scottfontenot
8/23/2017 - 1:52 PM

1-thinkfultube.html

var $ = require('jquery');

const YOUTUBE_SEARCH_URL = 'https://www.googleapis.com/youtube/v3/search';
const apiKey = 'AIzaSyB6LDXCfWtsPmqUn9qLGPtPvoluS0tKmBE';

function getDataFromApi(searchTerm, callback) {
  const settings = {
    url: YOUTUBE_SEARCH_URL,
    data: {
      part: 'snippet',
      key: apiKey,
      q: `${searchTerm} in:name`
    },
    dataType: 'json',
    type: 'GET',
    success: callback
  };
$.ajax(settings);
}

function displayResult(result) {
 // console.log('displayResult', result);
  return `
  <div>
	  <h2>
		<a class="js-result-name" href="https://www.youtube.com/watch?v=${result.id.videoId}" target="_blank">${result.snippet.title}</a> 
		</h2>
	  <a href="https://www.youtube.com/watch?v=${result.id.videoId}" target="_blank"><img src="${result.snippet.thumbnails.medium.url}"></a>
	</div> 
      `;
}

function displayYoutubeSearchResults(data) {
 const searchResults = data.items.map((item, index) => displayResult(item));
 //console.log('displayYoutubeSearchResults', searchResults);
 $('.js-search-results').html(searchResults);
}

function watchSubmit() {
  $('.js-search-form').submit(function( event ) {
    event.preventDefault();
    let queryTarget = $(event.currentTarget).find('.js-query');
    let query = queryTarget.val();
    //console.log('query', query);
    queryTarget.val("");
    getDataFromApi(query, displayYoutubeSearchResults);
 
  });
}
$(watchSubmit);
















body {
  padding: 100px;
  background-color: grey;
}
https://repl.it/KTRX/54

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ThinkfulTube Project Challenge</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <section>
    <h1>ThinkfulTube Project Challenge - YouTube API</h1>
      <form action="#" class="js-search-form">
          <input type="text" class="js-query">
          </form>
          
      <h2>Results</h2>
      <div class="js-search-results">
            
      </div>
  </section>
      <script src="index.js"></script>
</body>
</html>