JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

	<body>
		<form id="search-term">
			Entry:<br>
		  <input id="query" type="text"><br>
		  <input type="submit" value="Submit">
		 </form>
		 <div id="search-results">
		 </div>
		<script src="app.js"></script>
	</body>

JavaScript

$(function(){
  $('#search-term').submit(function(event){
    event.preventDefault();
    var searchTerm = $('#query').val();
    getRequest(searchTerm);
  });
});

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

  $.getJSON(url, params, function(data){
    showResults(data.Search);
  });
}

function showResults(results){
  var html = "";
  $.each(results, function(index,value){
    html += '<p>' + video.snippet.title + '</p>';
    console.log(video.snippet.title);
  });
  $('#search-results').html(html);
}