generated from ewuweblab/giphy-api-swiper-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
51 lines (36 loc) · 1.22 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*** Variables ***/
// API Key
const API_KEY = 'PeHq7nutMojzQ3zpHHf9eTtroz6ivN2j';
// limit
const limit = 10;
// Get `input`
const inputField = document.querySelector('.search-input');
// Initialize or Default search query
inputField.value = '';
// Listen to key presses
inputField.addEventListener('keyup', event => {
if (event.key === 'Enter') {
// Go fetch Giphy API data
fetch(`https://api.giphy.com/v1/gifs/search?api_key=${API_KEY}&q=${inputField.value}&limit=${limit}`)
.then( response => response.json() )
.then( gifs => {
// check-check
console.log(gifs);
console.log(gifs.data);
// Get container for data
const videoContainer = document.querySelector('.swiper');
// Loop through the array of data
gifs.data.forEach( gif => {
// template
const template = `
<video src="${gif.images.original.mp4}" autoplay loop></video>
`;
// append
videoContainer.insertAdjacentHTML("afterbegin", template);
});
});
// Reset value and return cursor focus -- of input field
inputField.value = '';
inputField.focus();
}
});