-
Notifications
You must be signed in to change notification settings - Fork 0
/
challenge-03.html
179 lines (159 loc) · 4.58 KB
/
challenge-03.html
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head>
<title>SWAPI Form</title>
</head>
<body>
<form id="form">
<p>
<label>
Search
<input id="gigphy-search" />
<!-- Create an input with type "text" and id "giphy-search" -->
</label>
</p>
<p>
<!-- Make three input tags -->
<!-- These will be radio buttons add a type attribute with value "radio" -->
<!-- To work as group all radio buttons hsould have the same name -->
<!-- Use the names and values below for each input -->
<!-- name="size" value="fixed_height" -->
<!-- name="size" value="fixed_height_small" -->
<!-- name="size" value="fixed_height_small_still" -->
<!-- Wrap each radio button in a label and include the label text -->
<!-- Here is the first input you make the others -->
<label>
<input type="radio" name="size" value="fixed_height" />
Fixed Height
</label>
<br />
<label>
<input type="radio" name="size" value="fixed_height_small" />
Fixed Height Small
</label>
<br />
<label>
<input type="radio" name="size" value="fixed_height_small_still" />
Fixed Height Small Still
</label>
</p>
<p>
<!-- Create an input inside a label. -->
<!-- This will be a checkbox. Use type = cheackbox -->
<!-- Checkbox id='cats-only'-->
<label>
<input
id="cats-only"
type="checkbox"
name="cats-only"
value="cats-only"
/>
Cats only!
</label>
</p>
<p>
<!-- Make an other check box -->
<!-- Use id='show-title'-->
<label>
<input
id="show-title"
type="checkbox"
name="show-title"
value="show-title"
/>
Show Title!
</label>
</p>
<p>
<!-- Make a range slider. This is inptu with type = range -->
<!-- range id="image-count"-->
<label>
<input
id="image-count"
type="range"
name="how-many"
value="1"
min="1"
max="6"
/>
How Many
</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
<div id="results">
<!-- Giphy Data -->
</div>
<script>
// No need to edit below this point
const form = document.getElementById("form");
const results = document.getElementById("results");
const giphySearch = document.getElementById("giphy-search");
form.onsubmit = (e) => {
e.preventDefault();
const search = giphySearch.value;
fetchData(search);
};
function fetchData(q = "cats") {
let catsOnly = false;
console.log(document.getElementById("cats-only"));
if (document.getElementById("cats-only") !== null) {
catsOnly = document.getElementById("cats-only").checked;
}
const search = catsOnly ? "cats " + q : q;
const api = "3sjrF3zZatafCQZ4pRCCuf5zoOfsctBm";
const path = `https://api.giphy.com/v1/gifs/search?api_key=${api}&q=${search}`;
fetch(path)
.then((res) => res.json())
.then((json) => handleData(json))
.catch((err) => handleErr(err));
}
function handleData(json) {
console.log(json);
let showTitle = false;
if (document.getElementById("show-title") !== null) {
showTitle = document.getElementById("show-title").checked;
}
let size = "fixed_height";
try {
size = Array.from(document.getElementsByName("size")).filter(
(item) => item.checked
)[0].value;
} catch {
//
}
let count = 3;
try {
count = document.getElementById("image-count").value;
} catch {
//
}
let str = "";
for (let i = 0; i < count; i += 1) {
const src = json.data[i].images[size].url;
let title = "";
if (showTitle) {
title = json.data[i].title;
}
str += `
<div>
<img src="${src}">
<p>${title}</p>
</div>`;
}
results.innerHTML = str;
}
function handleErr(err) {
console.log(err.message);
}
</script>
<style>
#results {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
</style>
</body>
</html>