index.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. 'use strict';
  2. var server = 'https://itunes.apple.com/';
  3. var $videosList = $('#videos-list'),
  4. $searchForm = $('#search-form');
  5. $searchForm.on('submit', function(event) {
  6. event.preventDefault();
  7. var searchString = $('[name="srch-term"]', this).val();
  8. requestVideos(searchString);
  9. });
  10. function requestVideos(title) {
  11. var request = $.ajax({
  12. url: `${server}/search?term=${title}&limit=5&entity=musicVideo`,
  13. method: 'GET'
  14. });
  15. request.done((response) => {
  16. var responseJson = JSON.parse(response);
  17. if (!responseJson.hasOwnProperty('results')) return;
  18. var videos = responseJson.results;
  19. $('#myCarousel').removeAttr('hidden');
  20. $('.carousel-inner').empty();
  21. videos.forEach((video) => {
  22. var $item = $('<div>').addClass('item'),
  23. $carouselCaption = $('<div>').addClass('carousel-caption').appendTo($item);
  24. var $video = $('<video controls>');
  25. var $source = $('<source>').attr('src', video.previewUrl);
  26. $video
  27. .append($source)
  28. .appendTo($item);
  29. $('<h2>')
  30. .addClass('video-heading')
  31. .text(video.trackName)
  32. .appendTo($carouselCaption);
  33. $('<h3>')
  34. .addClass('artist-name')
  35. .text(video.artistName)
  36. .appendTo($carouselCaption);
  37. $carouselCaption
  38. .appendTo($item);
  39. $item
  40. .appendTo('.carousel-inner');
  41. })
  42. $('.item').eq(0).addClass('active');
  43. });
  44. request.fail((error) => {
  45. console.log('error', error);
  46. });
  47. };
  48. $('.carousel').carousel();
  49. requestVideos('enigma');