JSFiddle - React, Tailwind, and code Playground

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>
 
  



<script type="text/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 =
 ...