├── index.html
└── js
└── scripts.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | HW11-Maksim
8 |
47 |
48 |
49 |
50 |
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 | }
--------------------------------------------------------------------------------