Youtube search

by fredd man

HTML

<script type="text/javascript"
	src="https://embed-ssl.wistia.com/deliveries/47ecb65faa3c670042b5e4b4b1c79054.bin?disposition=attachment&filename=jquery-2.2.4.min.js">
</script>
 <form id="search-term">
    <input id="queryInput"   type="text">
    <button id="searchButton" class="search-button" type="text">
      Go
    </button>
</form>

<div id="search-results">
  </div>

CSS

.card{
    width: 100%;
    border-radius: 5px;
    background-color: #FFF;
    box-shadow: 0px 1px 4px 5px rgba(0,0,0,0.1);
    height: 250px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}
.card .info{
    width: 50%;
    float: left;
    height: 100%;
    position: relative;
}
.card .info img{
    width: 100%;
    position: absolute;
    vertical-align: middle;
    transform: translateY(-50%);
    top: 50%;
    opacity: 0.9;
}
.content{
        width: 50%;
    float: right;
}
.content a{
  text-decoration: none;
    cursor: pointer;
    font-size:12px;
}
.content a h2{
      font-size: 16px;
    color: #5e5e5e;
    text-align: center;
}
.content p{
     font-size: 12px;
    color: #5e5e5e;
    text-align: center;
}
.search-container {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 30px;
}

.search-container .search {
	position: relative;
}

.search-container .search-bar {
	height: 40px;
	width: 400px;
	border-radius: 10em;
	border: 0;
	font-size: 22px;
	padding-left: 10px;
}

.search-container .search-bar:focus {
	outline: none;
}

.search-container .search-button {
	position: absolute;
	top: 5px;
	right: 5px;
	border-radius: 100%;
	height: 30px;
	width: 30px;
	border: 0;
  color:#FFF;
}

.search-container .search-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.search-container .search-button:focus {
	outline: none;
}

.search-container .search-button:hover i {
	color: #EEE;
}
.main-container{
  margin-top:120px;
}

JavaScript

//2016 mizTech NTU ESOE mikeZheng 
var musicCards = [];

$(document).ready(function() {
    //替按鈕綁上事件
    $("#searchButton").on("click", function(event) {
    event.preventDefault();
        var searchTerm = $("#queryInput").val();
        //簡單防呆一下
        getRequest(searchTerm);
        
    });
});


function getRequest(searchTerm) {
  	var url = 'https://www.googleapis.com/youtube/v3/search';
    var params ={
    		part: 'snippet',
         key: 'AIzaSyAh_b4SGi1qTD0eZMovW4O8SXHk7hAhFLM',
        q: searchTerm
        
       
    }

  
        //將結果把所需部分進行擷取
  
        // console.log(musicCards);
        //將VIEW抽出來另外生成
            
   
     $.getJSON(url, params, showResults);
}



function showResults(results) {
	
    var htmlString = "";
   var response = results.items;
   
     $.each(response, function(i, item) {
            if (!item['id']['playlistId']) {
                var musicCard = {};
                musicCard._id = item['id']['videoId'];
                musicCard.title = item['snippet']['title'];
                musicCard.url = "https://www.youtube.com/embed/" + musicCard._id;
                musicCard.description = item['snippet']['description'];
                musicCards.push(musicCard);
            }
        }); 
   
   
    musicCards.forEach(function(musicCard, i) {
        var card = createCard(musicCard._id, musicCard.title, musicCard.description, musicCard.url);

        htmlString += card;
    });

    $('#search-results').html(htmlString);

}


function createCard(_id, title, description, url) {
    var card =
        '<div class="card">' +
        '<div class="info">' +
        '<img src="http://img.youtube.com/vi/' + _id + '/0.jpg" alt="' + description + '">' +
        '</div>' +
        '<div class="content">' +
        '<a href="'+url+'"><h2>' + title + '</h2></a>' +
        '<a href="'+url+'">https://www.youtube.com/embed/' + _id + '</a>' +
        '<p>' + description + '</p>' +
        '</div>' +
        '</div>';
    return...