├── index.html └── js └── scripts.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HW11-Maksim 8 | 47 | 48 | 49 |
50 |
51 | 52 | 53 |
54 |
55 |
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | var here = document.querySelector('#here'); 2 | var tagForm = document.querySelector('form'); 3 | var tagInput = tagForm.querySelector('[name="Search"]'); 4 | var tagButton = tagForm.querySelector('button'); 5 | 6 | tagButton.onclick = function(e){ 7 | e.preventDefault(); 8 | here.innerHTML = ''; 9 | var request = tagInput.value; 10 | tagForm.reset(); 11 | var api = 'https://www.googleapis.com/youtube/v3/search?part=snippet&key=AIzaSyBrmaj7j0yIJGWcGPYH3THz_Rh8BYAtlQs&q=' + request + '&type=video'; 12 | var xhr = new XMLHttpRequest(); 13 | xhr.open('GET', api); 14 | xhr.onload = function renderHtml(){ 15 | var data = JSON.parse(xhr.response); 16 | var videoId = data.items[0].id.videoId; 17 | function renderVideo(id){ 18 | callback(id); 19 | data.items.forEach(function (item,index){ 20 | var tagDivMiniImg = document.createElement('div'); 21 | var tagImg = document.createElement('img'); 22 | var urlImg = item.snippet.thumbnails.medium.url; 23 | tagImg.setAttribute('src', urlImg); 24 | tagImg.setAttribute('width', '100%'); 25 | tagImg.setAttribute('height', '100%'); 26 | tagDivMiniImg.appendChild(tagImg); 27 | tagDivMiniImg.classList.add('float'); 28 | tagDivMiniImg.style.width = '20%' 29 | tagDivMiniImg.style.height = '20%' 30 | here.appendChild(tagDivMiniImg); 31 | tagDivMiniImg.onclick = function(){ 32 | here.innerHTML = ''; 33 | var newVideoId = item.id.videoId; 34 | renderVideo(newVideoId); 35 | } 36 | }) 37 | } 38 | renderVideo(videoId) 39 | } 40 | xhr.send(); 41 | } 42 | 43 | function callback (videoId){ 44 | var tagDivVideo = document.createElement('div'); 45 | tagDivVideo.innerHTML = ''; 46 | here.appendChild(tagDivVideo); 47 | } --------------------------------------------------------------------------------