Skip to content

Commit 524da7c

Browse files
codewithdevcodewithdev
committed
Updated
1 parent fe25446 commit 524da7c

File tree

3 files changed

+103
-88
lines changed

3 files changed

+103
-88
lines changed

‎GiphySearch/css/main.css

+38-23
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,52 @@
11
body {
2-
width: 80%;
3-
max-width: 1024px;
4-
margin: 0 auto;
2+
width: 80%;
3+
max-width: 1024px;
4+
margin: 0 auto;
5+
}
6+
7+
.header {
8+
padding: 100px 50px 50px 40px;
9+
position: relative;
10+
top: 50px;
11+
}
12+
13+
h1 {
14+
font-weight: bold;
15+
font-style: normal;
16+
font-family: "Times New Roman";
17+
font-size: 72px;
18+
color: #090;
19+
text-align: center;
520
}
621

722
.container-padding50 {
8-
padding-top: 50px;
23+
padding: 80px 0px 0px 30px;
924
}
1025

1126
.container-textinput {
12-
width: 80%;
13-
display: inline-block;
14-
padding: 20px;
15-
font-size: 16px;
16-
font-family: Helvetica, sans-serif;
27+
width: 70%;
28+
display: inline-block;
29+
padding: 16px;
30+
font-size: 20px;
31+
font-family: Helvetica, sans-serif;
1732
}
1833

1934
.container-button {
20-
width: 10%;
21-
display: inline-block;
22-
padding: 20px;
23-
background-color: green;
24-
color: white;
25-
font-size: 16px;
26-
font-family: Helvetica, sans-serif;
35+
width: 20%;
36+
display: inline-block;
37+
padding: 16px;
38+
background-color: green;
39+
color: white;
40+
font-size: 20px;
41+
font-family: Helvetica, sans-serif;
2742

28-
border: 1px solid green;
29-
border-radius: 5px;
43+
border: 1px solid green;
44+
border-radius: 5px;
3045
}
3146

3247
.container-image {
33-
width: 30%;
34-
display: block;
35-
float: left;
36-
margin-right:3%;
37-
}
48+
width: 30%;
49+
display: block;
50+
float: left;
51+
margin-right: 3%;
52+
}

‎GiphySearch/index.html

+19-15
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Giphy Search Engine</title>
5-
<link rel="stylesheet" href="css/main.css">
6-
</head>
7-
<body>
8-
<div class="container container-padding50">
9-
<input type="text" class="js-userinput container-textinput" />
10-
<button class="js-go container-button">Go!</button>
11-
</div>
12-
<div class="container container-padding50 js-container">
3+
<head>
4+
<title>Giphy Search Engine</title>
5+
<link rel="stylesheet" href="css/main.css" />
6+
</head>
137

14-
</div>
15-
<script src="javascript/main.js"></script>
16-
</body>
17-
</html>
8+
<body>
9+
<div class="header">
10+
<h1>Gif Search Engine</h1>
11+
</div>
12+
<div class="container container-padding50">
13+
<input type="text" class="js-userinput container-textinput" />
14+
<button class="js-go container-button">Search!</button>
15+
</div>
16+
<div class="container container-padding50 js-container"></div>
17+
18+
<!-- Link to JavaScript File here-->
19+
<script src="javascript/main.js"></script>
20+
</body>
21+
</html>

‎GiphySearch/javascript/main.js

+46-50
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,56 @@
1-
/* 1. Grab the input value */
2-
3-
4-
document.querySelector(".js-go").addEventListener('click',function(){
5-
6-
var input = document.querySelector("input").value;
7-
pushToDOM(input);
8-
9-
});
10-
11-
document.querySelector(".js-userinput").addEventListener('keyup',function(e){
12-
13-
var input = document.querySelector("input").value;
14-
15-
// if the key ENTER is pressed...
16-
if(e.which === 13) {
17-
pushToDOM(input);
18-
}
19-
1+
document.querySelector(".js-go").addEventListener("click", function () {
2+
var inputValue = document.querySelector(".js-userinput").value;
3+
var userInput = getUserInput();
4+
searchGiphy(userInput);
205
});
216

22-
/* 2. do the data stuff with the API */
23-
24-
var url = "http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC";
25-
26-
// AJAX Request
27-
var GiphyAJAXCall = new XMLHttpRequest();
28-
GiphyAJAXCall.open( 'GET', url );
29-
GiphyAJAXCall.send();
30-
31-
GiphyAJAXCall.addEventListener('load',function(e){
32-
33-
var data = e.target.response;
34-
pushToDOM(data);
35-
36-
});
37-
38-
39-
40-
41-
/* 3. Show me the GIFs */
42-
43-
44-
function pushToDOM(input) {
7+
document
8+
.querySelector(".js-userinput").addEventListener("keyup", function (data) {
9+
if (data.which === 13) {
10+
var userInput = getUserInput();
11+
searchGiphy(userInput);
12+
}
13+
});
4514

46-
var response = JSON.parse(input);
15+
function getUserInput() {
16+
var inputValue = document.querySelector(".js-userinput").value;
4717

48-
var imageUrls = response.data;
18+
return inputValue;
19+
}
4920

50-
imageUrls.forEach(function(image){
21+
function searchGiphy(searchQuery) {
22+
var url =
23+
"https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + searchQuery;
24+
// AJAX Request
25+
var GiphyAJAXCall = new XMLHttpRequest();
26+
GiphyAJAXCall.open("GET", url);
27+
GiphyAJAXCall.send();
28+
29+
GiphyAJAXCall.addEventListener("load", function (data) {
30+
var actualData = data.target.response;
31+
pushToDOM(actualData);
32+
console.log(actualData);
33+
});
34+
}
5135

36+
function pushToDOM(response) {
37+
// turn response into real javascript object
38+
response = JSON.parse(response);
39+
// drill down to the data array
40+
var images = response.data;
41+
42+
// find the container to hold this stuff in DOM
43+
var container = document.querySelector(".js-container");
44+
// clear it of old content since this function will be used on every search
45+
// we want to reset the div
46+
container.innerHTML = "";
47+
48+
// loop through data array and add IMG html
49+
images.forEach(function (image) {
50+
// find img src
5251
var src = image.images.fixed_height.url;
53-
console.log(src);
54-
55-
var container = document.querySelector(".js-container");
56-
container.innerHTML += "<img src=\"" + src + "\" class=\"container-image\">";
5752

53+
// concatenate a new IMG tag
54+
container.innerHTML += "<img src='" + src + "' class='container-image' />";
5855
});
59-
6056
}

0 commit comments

Comments
 (0)