JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Arvo:700&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<h1>Search!</h1>
<h2>Then click artist names to see similar artists</h2>
<form id="search">
    <input>
    <input type="submit">
</form>
<div id="search-results"></div>

CSS

body {
    padding: 20px;
    width: 500px;
    margin: 0 auto;
    font-family: "Arvo", serif;
    font-weight: normal;
    color: #aaa;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
}

a {
    color: #aaa;
    font-family: sans-serif;
    -webkit-transition: all 0.3s;
    display: block;
    padding: 4px;
    cusor: pointer;
}
a:hover {
    color: #81a769;
    background: #eee;
}
form {
    margin: 20px 0;
}
input {
    border: 1px solid #cdcdcd;
    padding: 8px 12px;
}
input[type=submit] {
    background-color: #b6e49a;
    -webkit-transition: all 0.3s;
    cursor: pointer;
    border: none;
}
input[type=submit]:hover {
    background-color: #81a769;
}

JavaScript

(function(){

// API Key: GUOMUFCGYMZEGEKJK 

var creds = {
    apiKey    : "GUOMUFCGYMZEGEKJK",
    consKey : "ea7abe22ca6f9b25944efc661a22a08a",
    secret     : "SVQeQArxQoaGT+j94DgpFQ",
}
var searchurl = "http://developer.echonest.com/api/v4/artist/search";
var similarurl = "http://developer.echonest.com/api/v4/artist/similar";
function doSearch(term){
    var params = {
        api_key : creds.apiKey,
        format : "json",
        callback : "?",
        name : term,
        sort : "hotttnesss-desc",
        bucket : "id:facebook"
    }
    $.getJSON(searchurl, params, function(data){
        console.log(data);
        var h = "<p>Did you mean:</p>";
        $(data.response.artists).each(function(i,el){
            h += "<a href='' data-echonestid='" + el.id +"'>" + el.name + "</a>";
        });
        $("#search-results").html(h);
    })
}
$("#search").on("submit", function(e){
    e.preventDefault();
    doSearch($("input").val());
});
$("body").on("click", "a", function(e){
    e.preventDefault();
    var a = $(this);
    var params = {
        api_key : creds.apiKey,
        format : "json",
        callback : "?",
        id : a.data("echonestid")
    }
    $.getJSON(similarurl, params, function(data){
        console.log(data);
        var h = "<p>Similar artists to "+ a.text() +"</p>";
        $(data.response.artists).each(function(i,el){
            h += "<a href='' data-echonestid='" + el.id +"'>" + el.name + "</a>";
        });
        $("#search-results").html(h);
    });
});


}())