Skip to content

Instantly share code, notes, and snippets.

@HuangStanley050

HuangStanley050/index.html

Created January 2, 2018 03:14
Show Gist options
  • Save HuangStanley050/e143debd846ea77d17ab3a945bdf05f3 to your computer and use it in GitHub Desktop.
Save HuangStanley050/e143debd846ea77d17ab3a945bdf05f3 to your computer and use it in GitHub Desktop.
Download ZIP
Music Search app
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Search App</title>
<link href="./resources/something.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row" ><!--header-->
<div class="col-sm-12" id="header_search">
<div class="title">
trackster
</div>
<div class="search">
<input type="text" id="search_term"/>
<button type="button" class="btn btn-primary btn-sm" id="lookup"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div> <!--end of header_search-->
<div class="row" id="info_header"><!--search info row-->
<div class="col-sm-12" id="search_info">
<div class="song">
# Song
</div>
<div class="info">
Artist
</div>
<div class="info">
Album
</div>
<div class="info">
Popularity
</div>
</div>
</div> <!--end search info row-->
<!---search result--->
<div id="search_result">
<!--
<i class="fa fa-play-circle-o"></i>
-->
</div>
</div> <!--end of container-fluid-->
</body>
</html>
Raw
script.js
$( document ).ready(function() {
var api_key="f773c85bcaec2ce13ffed60765f020f9";
var term;
var searched=0;
function get_data(){
var search_url="https://ws.audioscrobbler.com/2.0/?method=track.search&limit=5&track="+term+"&api_key=f773c85bcaec2ce13ffed60765f020f9&format=json&callback=?";
//console.log(search_url);
// <a href=""></a>
var artist;
var track;
var track_url;
var album_path;
var album_art;
var popularity;
var play_icon="<i class=\"fa fa-play-circle-o\"></i>";
var track_class="<div class=\"track\">"+play_icon+"\</div>";
var info_class="<div class=\"information\"></div>";
var info_class_artist="<div class=\"information\"></div>";
var info_class_popularity="<div class=\"information\"></div>";
var info_class_img="<div class=\"information\"><img src=></div>";
$.getJSON(search_url,function(data,status){
//data.results
//data.results.trackmatches
//data.results.trackmatches.track"[]"
//data.results.trackmatches.track[0]["name"]--->track name
//data.results.trackmatches.track[0].artist--->artist
//data.results.trackmatches.track[0].listeners-->popularity
//data.results.trackmatches.track[0].image[1]["#text"]-->image
//test=JSON.stringify(data.results);
for(var i=0;i<5;i++){
track_url=data.results.trackmatches.track[i].url;
track=data.results.trackmatches.track[i].name;
artist=data.results.trackmatches.track[i].artist;
album_art=data.results.trackmatches.track[i].image[1]["#text"];
popularity=data.results.trackmatches.track[i].listeners;
album_path="<a target=\"_blank\" href="+track_url+">"+play_icon+"</a>"
track_class="<div class=\"track\">"+album_path+track+"\</div>";
info_class_artist="<div class=\"information\">"+artist+"\</div>";
info_class_popularity="<div class=\"information\">"+popularity+"\</div>";
info_class_img="<div class=\"information\"><img src="+album_art+"></div>";
$("#search_result").append("<div class=\"row end_result\">"+track_class+info_class_artist+info_class_img+info_class_popularity+"\</div>");
}
});
}
$("#lookup").click(function(){
term = $("#search_term").val();
if(searched==1){
$("#search_result").empty();
searched=0;
}
get_data();
searched=1;
//alert(term);
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
html{
font-size: 16px;
}
.col-sm-12{
background-color: rgb(35,2,63);
height: 7rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.col-sm-12 .title{
font-family: Righteous;
font-size: 2.5rem;
color: rgb(255,0,171);
margin-top: 1rem;
margin-left: 2rem;
}
.col-sm-12 .search{
/*background-color: orange;*/
margin-top: 2rem;
width: 25rem;
height: 2rem;
}
.search input{
display: inline-block;
border-radius:5px;
background-color: rgb(191,191,191);
}
.search .btn {
display: inline-block;
background-color: rgb(255,102,204);
border-radius: 0.5rem;
height: 1.8rem;
}
.search .btn:hover{
background-color: rgb(255,0,171);
}
#search_info.col-sm-12 {
background-color: rgb(104,0,255);
height: 3rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#search_info.col-sm-12 .song {
width: 50%;
/*background-color: orange;*/
color: rgb(255,255,255);
font-size: 1rem;
font-family: Work Sans;
padding-left: 8rem;
padding-top: 0.5rem;
}
#search_info.col-sm-12 .info{
width: 16%;
color: rgb(255,255,255);
/*background-color: red;*/
font-family: Work Sans;
font-size: 1rem;
padding-top: 0.5rem;
}
.row.end_result{
background-color: rgb(204,204,204);
height: 5rem;
border-bottom: thin solid black;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.row.end_result:hover{
background-color: Cornsilk;
}
.row.end_result .track{
/*background-color: red;*/
height: 5rem;
width: 50%;
border-bottom: solid thin black;
font-family: Work Sans;
}
.row.end_result .information{
/*background-color: orange;*/
width: 16%;
height: 5rem;
padding-top: 5px;
/*border-left: solid thin black;
border-bottom: solid thin black;*/
}
.fa.fa-play-circle-o {
color: #ff00ab;
font-size: 2rem;
margin-top: auto;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment