forked from benrbryant/JavaScript_APIs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
50 lines (41 loc) · 1.38 KB
/
app.js
File metadata and controls
50 lines (41 loc) · 1.38 KB
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
/*Class Notes:
API is Application Programming Interfaces, specifically we will be using the FETCH API
JSON is JavaScript Object Notation
Create an API on Giphy go to create an app
Query Parameters follow a ?
name=value pairs
each pair is separated by a &
*/
"use strict";
const GIPHY_URL = "https://api.giphy.com/v1/gifs/translate";
const GIPHY_KEY = "CwjqjW1X1EknCUg2xT4feWfo6Emcij9y";
// Exercise 1 Section
console.log("EXERCISE 1:\n==========\n");
let feedbackEle = document.querySelector("#feedback");
let searchInput = document.querySelector("#searchWord");
let searchBtn = document.querySelector("#submitSearch");
let gifEle = document.querySelector("#imageContainer > img");
//Event Handlers
searchBtn.addEventListener("click", (event) => {
fetch(`${GIPHY_URL}?api_key=${GIPHY_KEY}&s=${searchInput.value}`)
.then((res) => res.json())
.then((body) => {
//show the gif on the dom
gifEle.src = body.data.images.original.url;
})
.catch((err) => {
console.error(err);
//show the error message on the dom
feedbackEle.textContent = err.message;
});
});
async function getGif(searchTerm) {
try {
let res = await fetch(`${GIPHY_URL}?api_key=${GIPHY_KEY}&s=${searchTerm}`);
let body = await res.json();
gifEle.src = body.data.images.original.url;
} catch (err) {
console.error(err);
feedbackEle.textContent = err.message;
}
}