-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (352 loc) · 40.7 KB
/
index.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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Front End Test - Greenthumb</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./index.scss" />
</head>
<body>
<main role="main">
<div class="jumbotron image-header">
<div class="container">
<div class="header-logo--1">
<img src="images/icons/logo-white.svg" alt="Greenthumb" />
</div>
<div class="header-tit--1">
<h1 class="display-3">Find your next green friend</h1>
</div>
<div class="header-icon--1">
<img src="images/icons/arrow-down.svg" alt="">
</div>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="container-imagem--1">
<img src="images/illustrations/sun.png" alt="" width="75px">
</div>
<p class="container-text--1"><b>1.</b> Set the amount of <b>sunlight</b> your plant will get.</p>
<select class="container-form-select" id="sun" onChange="getValue()" required>
<option selected value="">Select...</option>
<option value="no">no</option>
<option value="low">low</option>
<option value="high">high</option>
</select>
</div>
<div class="col-md-4">
<div class="container-imagem--1">
<img src="images/illustrations/wateringcan.png" alt="" width="75px">
</div>
<p class="container-text--1"><b>2.</b> How often do you want to <b>water</b> your plant?</p>
<select class="container-form-select" id="want" onChange="getValue()" required>
<option selected value="">Select...</option>
<option value="regularly">regularly</option>
<option value="daily">daily</option>
<option value="rarely">rarely</option>
</select>
</div>
<div class="col-md-4">
<div class="container-imagem--1">
<img src="images/illustrations/dog.png" alt="" width="75px">
</div>
<p class="container-text--1"><b>3.</b> Do you have pets? Do they <b>chew</b> plants?</p>
<select class="container-form-select" id="pets" onChange="getValue()" required>
<option selected value="">Select...</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
</div>
</section>
<div class="background-2">
<div class="container">
<div class="row ">
<div class="col-md-12 container-tit--1">
<img src="images/illustrations/pick.png" alt="" width="158px">
<h1 class="display-4">Our picks for you</h1>
</div>
<div class="card-group">
<div id="accordionStar"></div>
<div id="accordion"></div>
<div class="no-result">
<div class="no-result--text">
<h2 class="card-no-result-h">No results yet…</h2>
<p class="card-no-result-p">Use the filters above to find the plant that best fits your environment :)</p>
</div>
<img class="img-no-result" src="images/illustrations/no-results.png" alt="">
</div>
</div>
<button type="button" class="btn btn-lg btn-block" onclick="back()"> <img src="images/icons/arrow-up.svg" alt=""> back to the top</button>
</div>
</div>
</div>
</main>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<script>
function getValue() {
const sun = document.getElementById("sun").value;
const want = document.getElementById("want").value;
const pets = document.getElementById("pets").value;
if (sun && want && pets) {
document.getElementsByClassName('no-result')[0].style.display = 'none';
document.getElementById('accordion').innerHTML = '';
document.getElementById('accordionStar').innerHTML = '';
const url = "https://front-br-challenges.web.app/api/v2/green-thumb/?sun=" + sun + "&water=" + want+ "&pets=" + pets
fetch(url, {
mode: 'cors',
}).then(function(response){
response.json().then(function(data){
if (data.status == 404){
document.getElementById('accordion').innerHTML = '';
document.getElementById('accordionStar').innerHTML = '';
document.getElementsByClassName('container-tit--1')[0].style.display = 'none';
document.getElementsByClassName('no-result')[0].style.display = 'flex';
}
const container = document.getElementById('accordion');
const containerStar = document.getElementById('accordionStar');
if (data.status != 404){
data.forEach((result, idx) => {
const card = document.createElement('div');
card.classList = 'card-body';
if (result.staff_favorite){
const content = `
<div class="card card-star" class="${result.staff_favorite ? 'start-block' : 'start-none'}">
<div id="collapse-${idx}" class="collapse show" aria-labelledby="heading-${idx}" data-parent="#accordionStar">
<div class="align-image2">
<span class="card-span--1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.523-3.356c.329-.314.158-.888-.283-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767l-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288l1.847-3.658 1.846 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.564.564 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg> Staff favorite</span>
<svg width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H167.5C179.374 0 189 9.62588 189 21.5C189 33.3741 179.374 43 167.5 43H0V0Z" fill="#75BC97"/>
</g>
<defs>
<filter id="filter0_d" x="-28" y="-18" width="245" height="99" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="10"/>
<feGaussianBlur stdDeviation="14"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.181163 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</div>
<div class="card-body card2">
<div class="align-image">
<img class="img-fluid card-content--img2" src="${result.url}" alt="" width="400">
</div>
</div>
<div class="card-big--text">
<h5 class="card-text--title2">${result.name}</h5>
<div class="card-content--3">
<p class="card-text--price2">$${result.price}</p>
<div class="card-content--icons" id="img1">
<div class="${result.toxicity ? 'svg-block' : 'svg-none'}">
<svg width="34px" height="25px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/Toxic</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-614.000000, -1791.000000)" fill="#6E6E6E">
<g id="triostar" transform="translate(502.000000, 1584.000000)">
<g id="Icon/Big/Toxic" transform="translate(112.000000, 207.000000)">
<path d="M10.4940257,3.45568587e-15 C14.5494257,3.45568587e-15 17.8488257,3.2994 17.8488257,7.35505714 L17.8488257,8.07531429 C17.8488257,11.0142 16.11414,13.6419429 13.4143971,14.8176 L13.4143971,16.3823143 C13.4143971,17.4134571 12.5755971,18.252 11.5447114,18.252 L6.30414,18.252 C5.27299714,18.252 4.43445429,17.4134571 4.43445429,16.3823143 L4.43445429,14.8176 C1.73471143,13.6419429 2.57142857e-05,11.0142 2.57142857e-05,8.07531429 L2.57142857e-05,7.35505714 C2.57142857e-05,3.2994 3.29942571,3.45568587e-15 7.35482571,3.45568587e-15 L10.4940257,3.45568587e-15 Z M10.4940257,0.514285714 L7.35482571,0.514285714 C3.58305429,0.514285714 0.514311429,3.58302857 0.514311429,7.35505714 L0.514311429,8.07531429 C0.514311429,10.8619714 2.19216857,13.3480286 4.78879714,14.409 C4.88548286,14.4483429 4.94874,14.5427143 4.94874,14.6471143 L4.94874,16.3823143 C4.94874,17.1295714 5.55662571,17.7377143 6.30414,17.7377143 L6.85302571,17.737 L6.85321714,15.9856714 C6.85321714,15.8434714 6.96841714,15.7285286 7.11036,15.7285286 C7.25230286,15.7285286 7.36750286,15.8434714 7.36750286,15.9856714 L7.36702571,17.737 L10.0780257,17.737 L10.0781743,15.9856714 C10.0781743,15.8434714 10.1933743,15.7285286 10.3353171,15.7285286 C10.47726,15.7285286 10.59246,15.8434714 10.59246,15.9856714 L10.5920257,17.737 L11.5447114,17.7377143 C12.2919686,17.7377143 12.9001114,17.1295714 12.9001114,16.3823143 L12.9001114,14.6471143 C12.9001114,14.5427143 12.9633686,14.4483429 13.0600543,14.409 C15.6566829,13.3480286 17.33454,10.8619714 17.33454,8.07531429 L17.33454,7.35505714 C17.33454,3.58302857 14.2657971,0.514285714 10.4940257,0.514285714 Z M5.49781714,7.25626286 C6.75113143,7.25626286 7.77044571,8.27583429 7.77044571,9.52914857 C7.77044571,10.7824629 6.75113143,11.8020343 5.49781714,11.8020343 C4.24450286,11.8020343 3.22493143,10.7824629 3.22493143,9.52914857 C3.22493143,8.27583429 4.24450286,7.25626286 5.49781714,7.25626286 Z M12.3510086,7.25626286 C13.6043229,7.25626286 14.6236371,8.27583429 14.6236371,9.52914857 C14.6236371,10.7824629 13.6043229,11.8020343 12.3510086,11.8020343 C11.0976943,11.8020343 10.0781229,10.7824629 10.0781229,9.52914857 C10.0781229,8.27583429 11.0976943,7.25626286 12.3510086,7.25626286 Z M5.49781714,7.77054857 C4.52813143,7.77054857 3.73921714,8.55946286 3.73921714,9.52914857 C3.73921714,10.4985771 4.52813143,11.2877486 5.49781714,11.2877486 C6.46750286,11.2877486 7.25616,10.4985771 7.25616,9.52914857 C7.25616,8.55946286 6.46750286,7.77054857 5.49781714,7.77054857 Z M12.3510086,7.77054857 C11.3813229,7.77054857 10.5924086,8.55946286 10.5924086,9.52914857 C10.5924086,10.4985771 11.3813229,11.2877486 12.3510086,11.2877486 C13.3206943,11.2877486 14.1093514,10.4985771 14.1093514,9.52914857 C14.1093514,8.55946286 13.3206943,7.77054857 12.3510086,7.77054857 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.sun === "no" ? 'svg-block' : 'svg-none'}">
<svg width="34px" height="25px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/HighSun</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-640.000000, -1792.000000)" fill="#6E6E6E">
<g id="triostar" transform="translate(502.000000, 1584.000000)">
<g id="Icon/Big/NoSun" transform="translate(137.000000, 207.000000)">
<path d="M2.79255652,4.92249706 L3.22690435,5.21579118 C2.48107826,6.35296765 2.08690435,7.67967353 2.08690435,9.05190882 C2.08690435,12.8755853 5.15264348,15.9861441 8.92064348,15.9861441 C10.3478609,15.9861441 11.7145565,15.5446147 12.8738609,14.7089382 L13.1759478,15.1406735 C11.9282087,16.0401441 10.4566435,16.5155559 8.92064348,16.5155559 C4.86490435,16.5155559 1.56516522,13.1675559 1.56516522,9.05190882 C1.56516522,7.57511471 1.9896,6.14702647 2.79255652,4.92249706 Z M2.2424087,1.90122353 L15.9678,15.8284588 C16.0698,15.9319588 16.0698,16.0992529 15.9678,16.2027529 C15.9169304,16.2543706 15.8501478,16.2803118 15.7833652,16.2803118 C15.7165826,16.2803118 15.6498,16.2543706 15.5989304,16.2027529 L1.87353913,2.27551765 C1.77153913,2.17201765 1.77153913,2.00445882 1.87353913,1.90122353 C1.97527826,1.79772353 2.1404087,1.79772353 2.2424087,1.90122353 Z M8.92061739,1.58815588 C12.9763565,1.58815588 16.2760957,4.93642059 16.2760957,9.05206765 C16.2760957,10.5725382 15.8284435,12.0355676 14.9811391,13.2825971 L14.5517478,12.9821559 C15.3385304,11.8238029 15.7543565,10.4645382 15.7543565,9.05206765 C15.7543565,5.22839118 12.6888783,2.11756765 8.92061739,2.11756765 C7.65044348,2.11756765 6.4107913,2.47359706 5.33574783,3.14727353 L5.06157391,2.69674412 C6.21905217,1.97171471 7.55366087,1.58815588 8.92061739,1.58815588 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.sun === "low" ? 'svg-block' : 'svg-none'}">
<svg width="34px" height="25px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/LowSun</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-877.000000, -1527.000000)" fill="#6E6E6E">
<g id="ponytail-palm" transform="translate(733.000000, 1319.000000)">
<g id="Icon/Big/LowSun" transform="translate(144.000000, 208.000000)">
<g id="Group-12" transform="translate(0.275362, 0.279412)">
<path d="M9.45817281,13.6257446 L9.45817281,18.7205882 L8.99110255,18.7205882 L8.99110255,13.6257446 L9.45817281,13.6257446 Z M12.8926806,12.2732887 L16.1460585,15.5745104 L15.8158398,15.9095853 L12.5624619,12.6083636 L12.8926806,12.2732887 Z M5.55659479,12.5102582 L5.88681347,12.845333 L2.86697068,15.9095853 L2.53675201,15.5745104 L5.55659479,12.5102582 Z M9.22463768,5.56878258 C11.1562068,5.56878258 12.7276646,7.16335015 12.7276646,9.12332465 C12.7276646,11.0832991 11.1562068,12.6778667 9.22463768,12.6778667 C7.29306861,12.6778667 5.72161071,11.0832991 5.72161071,9.12332465 C5.72161071,7.16335015 7.29306861,5.56878258 9.22463768,5.56878258 Z M9.22463768,6.04272152 C7.55065786,6.04272152 6.18868098,7.42472748 6.18868098,9.12332465 C6.18868098,10.8219218 7.55065786,12.2039278 9.22463768,12.2039278 C10.8986175,12.2039278 12.2605944,10.8219218 12.2605944,9.12332465 C12.2605944,7.42472748 10.8986175,6.04272152 9.22463768,6.04272152 Z M4.55393506,9.12332465 L4.55393506,9.59726359 L-2.04799901e-14,9.59726359 L-2.04799901e-14,9.12332465 L4.55393506,9.12332465 Z M18.4492754,9.12332465 L18.4492754,9.59726359 L13.6618052,9.59726359 L13.6618052,9.12332465 L18.4492754,9.12332465 Z M15.5823981,2.33699293 L15.9126168,2.67206776 L12.6592389,5.97328946 L12.3290202,5.63821463 L15.5823981,2.33699293 Z M3.1004124,2.33699293 L6.23702275,5.5197299 L5.90680407,5.85480473 L2.77019373,2.67206776 L3.1004124,2.33699293 Z M9.45817281,0 L9.45817281,4.62090469 L8.99110255,4.62090469 L8.99110255,0 L9.45817281,0 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.sun === "high" ? 'svg-block' : 'svg-none'}">
<svg width="34" height="25" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2595 3.36709H9.74051V0H9.2595V3.36709ZM9.49999 4.81013C7.04659 4.81013 5.05063 6.80609 5.05063 9.25949C5.05063 11.7129 7.04659 13.7089 9.49999 13.7089C11.9534 13.7089 13.9494 11.7129 13.9494 9.25949C13.9494 6.80609 11.9534 4.81013 9.49999 4.81013ZM9.5 14.1899C6.78131 14.1899 4.56962 11.9782 4.56962 9.25949C4.56962 6.54081 6.78131 4.32911 9.5 4.32911C12.2187 4.32911 14.4304 6.54081 14.4304 9.25949C14.4304 11.9782 12.2187 14.1899 9.5 14.1899ZM9.74051 19H9.2595V15.6329H9.74051V19ZM0 9.74051H3.36709V9.25949H0V9.74051ZM19 9.74051H15.6329V9.25949H19V9.74051ZM5.23382 5.09292L2.85305 2.71214L3.19313 2.37207L5.5739 4.75284L5.23382 5.09292ZM13.9072 13.7663L16.2879 16.147L16.628 15.807L14.2473 13.4262L13.9072 13.7663ZM2.95255 16.147L2.61248 15.807L4.99325 13.4262L5.33333 13.7663L2.95255 16.147ZM13.6666 4.75284L14.0067 5.09292L16.3875 2.71214L16.0474 2.37207L13.6666 4.75284Z" fill="#6E6E6E"/>
</svg>
</div>
<div class="${result.water === "rarely" ? 'svg-block' : 'svg-none'}">
<svg width="34px" height="25px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/HighSun Copy</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-905.000000, -1263.000000)" fill="#6E6E6E">
<g id="euphorbia" transform="translate(733.000000, 1054.000000)">
<g id="Icon/Big/OneDrop" transform="translate(171.000000, 209.000000)">
<path d="M8.06808511,0.590807627 C7.12978156,1.49100395 2.03120567,6.52212032 2.03120567,9.54543743 C2.03120567,12.8673856 4.73939291,15.5696958 8.06808511,15.5696958 C11.3967773,15.5696958 14.1049645,12.8673856 14.1049645,9.54543743 C14.1049645,6.52212032 9.00638865,1.49100395 8.06808511,0.590807627 M8.06808511,16 C4.50158298,16 1.6,13.1044832 1.6,9.54543743 C1.6,6.04598876 7.66318298,0.376085846 7.92125957,0.136406422 L8.06808511,0 L8.21491064,0.136406422 C8.47298723,0.376085846 14.5361702,6.04598876 14.5361702,9.54543743 C14.5361702,13.1044832 11.6345872,16 8.06808511,16" id="Fill-1"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.water === "regularly" ? 'svg-block' : 'svg-none'}">
<svg width="34px" height="25px" viewBox="0 0 16 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/Regularly</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-903.000000, -1529.000000)" fill="#6E6E6E">
<g id="ponytail-palm" transform="translate(733.000000, 1319.000000)">
<g id="Icon/Big/TwoDrops" transform="translate(170.000000, 210.000000)">
<path d="M5.98653659,0.0529134223 C6.22009756,0.272449931 11.7073171,5.46584814 11.7073171,8.6711994 C11.7073171,11.9311392 9.08136585,14.5833136 5.85365854,14.5833136 C2.62595122,14.5833136 3.93334561e-14,11.9311392 3.93334561e-14,8.6711994 C3.93334561e-14,5.46584814 5.48721951,0.272449931 5.72078049,0.0529134223 C5.79570732,-0.0176378074 5.91160976,-0.0176378074 5.98653659,0.0529134223 Z M10.2792195,0.0529331294 C10.5127805,0.272469638 16,5.46586784 16,8.67121911 C16,11.9311589 13.3740488,14.5833333 10.1463415,14.5833333 C9.96663415,14.5833333 9.78419512,14.5748593 9.6044878,14.5583054 C9.49717073,14.5482548 9.41814634,14.4524785 9.42809756,14.3440898 C9.43785366,14.235701 9.53209756,14.1558875 9.64019512,14.165741 C9.808,14.1813096 9.97834146,14.1891924 10.1463415,14.1891924 C13.1588293,14.1891924 15.6097561,11.7137902 15.6097561,8.67121911 C15.6097561,5.90178773 10.9949268,1.29309762 10.1461463,0.469145971 C9.92058537,0.687500056 9.42868293,1.17288463 8.83317073,1.81513731 C8.75921951,1.89435964 8.63570732,1.89849812 8.55726829,1.82420255 C8.47863415,1.74990698 8.47453659,1.62516137 8.54829268,1.54574197 C9.376,0.653209794 10.0072195,0.0588452436 10.0134634,0.0529331294 C10.0883902,-0.0176181004 10.2042927,-0.0176181004 10.2792195,0.0529331294 Z M5.85365854,0.469126264 C5.0044878,1.29366913 0.390243902,5.9019651 0.390243902,8.6711994 C0.390243902,11.7139675 2.84117073,14.1891727 5.85365854,14.1891727 C8.86614634,14.1891727 11.3170732,11.7139675 11.3170732,8.6711994 C11.3170732,5.9019651 6.70282927,1.29366913 5.85365854,0.469126264 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>`;
containerStar.innerHTML += content;
}
})
data.forEach((result, idx) => {
const card = document.createElement('div');
card.classList = 'card-body';
const content = `
<div class="card">
<div id="collapse-${idx}" class="collapse show" aria-labelledby="heading-${idx}" data-parent="#accordion">
<div class="card-body">
<img class="img-fluid card-content--img" src="${result.url}" alt="" width="100">
<h5 class="card-text--title">${result.name}</h5>
<div class="card-content--2">
<p class="card-text--price">$${result.price}</p>
<div class="card-content--icons" id="img1">
<div class="${result.toxicity ? 'svg-block' : 'svg-none'}">
<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/Toxic</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-614.000000, -1791.000000)" fill="#6E6E6E">
<g id="triostar" transform="translate(502.000000, 1584.000000)">
<g id="Icon/Big/Toxic" transform="translate(112.000000, 207.000000)">
<path d="M10.4940257,3.45568587e-15 C14.5494257,3.45568587e-15 17.8488257,3.2994 17.8488257,7.35505714 L17.8488257,8.07531429 C17.8488257,11.0142 16.11414,13.6419429 13.4143971,14.8176 L13.4143971,16.3823143 C13.4143971,17.4134571 12.5755971,18.252 11.5447114,18.252 L6.30414,18.252 C5.27299714,18.252 4.43445429,17.4134571 4.43445429,16.3823143 L4.43445429,14.8176 C1.73471143,13.6419429 2.57142857e-05,11.0142 2.57142857e-05,8.07531429 L2.57142857e-05,7.35505714 C2.57142857e-05,3.2994 3.29942571,3.45568587e-15 7.35482571,3.45568587e-15 L10.4940257,3.45568587e-15 Z M10.4940257,0.514285714 L7.35482571,0.514285714 C3.58305429,0.514285714 0.514311429,3.58302857 0.514311429,7.35505714 L0.514311429,8.07531429 C0.514311429,10.8619714 2.19216857,13.3480286 4.78879714,14.409 C4.88548286,14.4483429 4.94874,14.5427143 4.94874,14.6471143 L4.94874,16.3823143 C4.94874,17.1295714 5.55662571,17.7377143 6.30414,17.7377143 L6.85302571,17.737 L6.85321714,15.9856714 C6.85321714,15.8434714 6.96841714,15.7285286 7.11036,15.7285286 C7.25230286,15.7285286 7.36750286,15.8434714 7.36750286,15.9856714 L7.36702571,17.737 L10.0780257,17.737 L10.0781743,15.9856714 C10.0781743,15.8434714 10.1933743,15.7285286 10.3353171,15.7285286 C10.47726,15.7285286 10.59246,15.8434714 10.59246,15.9856714 L10.5920257,17.737 L11.5447114,17.7377143 C12.2919686,17.7377143 12.9001114,17.1295714 12.9001114,16.3823143 L12.9001114,14.6471143 C12.9001114,14.5427143 12.9633686,14.4483429 13.0600543,14.409 C15.6566829,13.3480286 17.33454,10.8619714 17.33454,8.07531429 L17.33454,7.35505714 C17.33454,3.58302857 14.2657971,0.514285714 10.4940257,0.514285714 Z M5.49781714,7.25626286 C6.75113143,7.25626286 7.77044571,8.27583429 7.77044571,9.52914857 C7.77044571,10.7824629 6.75113143,11.8020343 5.49781714,11.8020343 C4.24450286,11.8020343 3.22493143,10.7824629 3.22493143,9.52914857 C3.22493143,8.27583429 4.24450286,7.25626286 5.49781714,7.25626286 Z M12.3510086,7.25626286 C13.6043229,7.25626286 14.6236371,8.27583429 14.6236371,9.52914857 C14.6236371,10.7824629 13.6043229,11.8020343 12.3510086,11.8020343 C11.0976943,11.8020343 10.0781229,10.7824629 10.0781229,9.52914857 C10.0781229,8.27583429 11.0976943,7.25626286 12.3510086,7.25626286 Z M5.49781714,7.77054857 C4.52813143,7.77054857 3.73921714,8.55946286 3.73921714,9.52914857 C3.73921714,10.4985771 4.52813143,11.2877486 5.49781714,11.2877486 C6.46750286,11.2877486 7.25616,10.4985771 7.25616,9.52914857 C7.25616,8.55946286 6.46750286,7.77054857 5.49781714,7.77054857 Z M12.3510086,7.77054857 C11.3813229,7.77054857 10.5924086,8.55946286 10.5924086,9.52914857 C10.5924086,10.4985771 11.3813229,11.2877486 12.3510086,11.2877486 C13.3206943,11.2877486 14.1093514,10.4985771 14.1093514,9.52914857 C14.1093514,8.55946286 13.3206943,7.77054857 12.3510086,7.77054857 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.sun === "no" ? 'svg-block' : 'svg-none'}">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/HighSun</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-640.000000, -1792.000000)" fill="#6E6E6E">
<g id="triostar" transform="translate(502.000000, 1584.000000)">
<g id="Icon/Big/NoSun" transform="translate(137.000000, 207.000000)">
<path d="M2.79255652,4.92249706 L3.22690435,5.21579118 C2.48107826,6.35296765 2.08690435,7.67967353 2.08690435,9.05190882 C2.08690435,12.8755853 5.15264348,15.9861441 8.92064348,15.9861441 C10.3478609,15.9861441 11.7145565,15.5446147 12.8738609,14.7089382 L13.1759478,15.1406735 C11.9282087,16.0401441 10.4566435,16.5155559 8.92064348,16.5155559 C4.86490435,16.5155559 1.56516522,13.1675559 1.56516522,9.05190882 C1.56516522,7.57511471 1.9896,6.14702647 2.79255652,4.92249706 Z M2.2424087,1.90122353 L15.9678,15.8284588 C16.0698,15.9319588 16.0698,16.0992529 15.9678,16.2027529 C15.9169304,16.2543706 15.8501478,16.2803118 15.7833652,16.2803118 C15.7165826,16.2803118 15.6498,16.2543706 15.5989304,16.2027529 L1.87353913,2.27551765 C1.77153913,2.17201765 1.77153913,2.00445882 1.87353913,1.90122353 C1.97527826,1.79772353 2.1404087,1.79772353 2.2424087,1.90122353 Z M8.92061739,1.58815588 C12.9763565,1.58815588 16.2760957,4.93642059 16.2760957,9.05206765 C16.2760957,10.5725382 15.8284435,12.0355676 14.9811391,13.2825971 L14.5517478,12.9821559 C15.3385304,11.8238029 15.7543565,10.4645382 15.7543565,9.05206765 C15.7543565,5.22839118 12.6888783,2.11756765 8.92061739,2.11756765 C7.65044348,2.11756765 6.4107913,2.47359706 5.33574783,3.14727353 L5.06157391,2.69674412 C6.21905217,1.97171471 7.55366087,1.58815588 8.92061739,1.58815588 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.sun === "low" ? 'svg-block' : 'svg-none'}">
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/LowSun</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-877.000000, -1527.000000)" fill="#6E6E6E">
<g id="ponytail-palm" transform="translate(733.000000, 1319.000000)">
<g id="Icon/Big/LowSun" transform="translate(144.000000, 208.000000)">
<g id="Group-12" transform="translate(0.275362, 0.279412)">
<path d="M9.45817281,13.6257446 L9.45817281,18.7205882 L8.99110255,18.7205882 L8.99110255,13.6257446 L9.45817281,13.6257446 Z M12.8926806,12.2732887 L16.1460585,15.5745104 L15.8158398,15.9095853 L12.5624619,12.6083636 L12.8926806,12.2732887 Z M5.55659479,12.5102582 L5.88681347,12.845333 L2.86697068,15.9095853 L2.53675201,15.5745104 L5.55659479,12.5102582 Z M9.22463768,5.56878258 C11.1562068,5.56878258 12.7276646,7.16335015 12.7276646,9.12332465 C12.7276646,11.0832991 11.1562068,12.6778667 9.22463768,12.6778667 C7.29306861,12.6778667 5.72161071,11.0832991 5.72161071,9.12332465 C5.72161071,7.16335015 7.29306861,5.56878258 9.22463768,5.56878258 Z M9.22463768,6.04272152 C7.55065786,6.04272152 6.18868098,7.42472748 6.18868098,9.12332465 C6.18868098,10.8219218 7.55065786,12.2039278 9.22463768,12.2039278 C10.8986175,12.2039278 12.2605944,10.8219218 12.2605944,9.12332465 C12.2605944,7.42472748 10.8986175,6.04272152 9.22463768,6.04272152 Z M4.55393506,9.12332465 L4.55393506,9.59726359 L-2.04799901e-14,9.59726359 L-2.04799901e-14,9.12332465 L4.55393506,9.12332465 Z M18.4492754,9.12332465 L18.4492754,9.59726359 L13.6618052,9.59726359 L13.6618052,9.12332465 L18.4492754,9.12332465 Z M15.5823981,2.33699293 L15.9126168,2.67206776 L12.6592389,5.97328946 L12.3290202,5.63821463 L15.5823981,2.33699293 Z M3.1004124,2.33699293 L6.23702275,5.5197299 L5.90680407,5.85480473 L2.77019373,2.67206776 L3.1004124,2.33699293 Z M9.45817281,0 L9.45817281,4.62090469 L8.99110255,4.62090469 L8.99110255,0 L9.45817281,0 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.sun === "high" ? 'svg-block' : 'svg-none'}">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2595 3.36709H9.74051V0H9.2595V3.36709ZM9.49999 4.81013C7.04659 4.81013 5.05063 6.80609 5.05063 9.25949C5.05063 11.7129 7.04659 13.7089 9.49999 13.7089C11.9534 13.7089 13.9494 11.7129 13.9494 9.25949C13.9494 6.80609 11.9534 4.81013 9.49999 4.81013ZM9.5 14.1899C6.78131 14.1899 4.56962 11.9782 4.56962 9.25949C4.56962 6.54081 6.78131 4.32911 9.5 4.32911C12.2187 4.32911 14.4304 6.54081 14.4304 9.25949C14.4304 11.9782 12.2187 14.1899 9.5 14.1899ZM9.74051 19H9.2595V15.6329H9.74051V19ZM0 9.74051H3.36709V9.25949H0V9.74051ZM19 9.74051H15.6329V9.25949H19V9.74051ZM5.23382 5.09292L2.85305 2.71214L3.19313 2.37207L5.5739 4.75284L5.23382 5.09292ZM13.9072 13.7663L16.2879 16.147L16.628 15.807L14.2473 13.4262L13.9072 13.7663ZM2.95255 16.147L2.61248 15.807L4.99325 13.4262L5.33333 13.7663L2.95255 16.147ZM13.6666 4.75284L14.0067 5.09292L16.3875 2.71214L16.0474 2.37207L13.6666 4.75284Z" fill="#6E6E6E"/>
</svg>
</div>
<div class="${result.water === "rarely" ? 'svg-block' : 'svg-none'}">
<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/HighSun Copy</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-905.000000, -1263.000000)" fill="#6E6E6E">
<g id="euphorbia" transform="translate(733.000000, 1054.000000)">
<g id="Icon/Big/OneDrop" transform="translate(171.000000, 209.000000)">
<path d="M8.06808511,0.590807627 C7.12978156,1.49100395 2.03120567,6.52212032 2.03120567,9.54543743 C2.03120567,12.8673856 4.73939291,15.5696958 8.06808511,15.5696958 C11.3967773,15.5696958 14.1049645,12.8673856 14.1049645,9.54543743 C14.1049645,6.52212032 9.00638865,1.49100395 8.06808511,0.590807627 M8.06808511,16 C4.50158298,16 1.6,13.1044832 1.6,9.54543743 C1.6,6.04598876 7.66318298,0.376085846 7.92125957,0.136406422 L8.06808511,0 L8.21491064,0.136406422 C8.47298723,0.376085846 14.5361702,6.04598876 14.5361702,9.54543743 C14.5361702,13.1044832 11.6345872,16 8.06808511,16" id="Fill-1"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="${result.water === "regularly" ? 'svg-block' : 'svg-none'}">
<svg width="16px" height="15px" viewBox="0 0 16 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon/Big/Regularly</title>
<g id="desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="d.-results" transform="translate(-903.000000, -1529.000000)" fill="#6E6E6E">
<g id="ponytail-palm" transform="translate(733.000000, 1319.000000)">
<g id="Icon/Big/TwoDrops" transform="translate(170.000000, 210.000000)">
<path d="M5.98653659,0.0529134223 C6.22009756,0.272449931 11.7073171,5.46584814 11.7073171,8.6711994 C11.7073171,11.9311392 9.08136585,14.5833136 5.85365854,14.5833136 C2.62595122,14.5833136 3.93334561e-14,11.9311392 3.93334561e-14,8.6711994 C3.93334561e-14,5.46584814 5.48721951,0.272449931 5.72078049,0.0529134223 C5.79570732,-0.0176378074 5.91160976,-0.0176378074 5.98653659,0.0529134223 Z M10.2792195,0.0529331294 C10.5127805,0.272469638 16,5.46586784 16,8.67121911 C16,11.9311589 13.3740488,14.5833333 10.1463415,14.5833333 C9.96663415,14.5833333 9.78419512,14.5748593 9.6044878,14.5583054 C9.49717073,14.5482548 9.41814634,14.4524785 9.42809756,14.3440898 C9.43785366,14.235701 9.53209756,14.1558875 9.64019512,14.165741 C9.808,14.1813096 9.97834146,14.1891924 10.1463415,14.1891924 C13.1588293,14.1891924 15.6097561,11.7137902 15.6097561,8.67121911 C15.6097561,5.90178773 10.9949268,1.29309762 10.1461463,0.469145971 C9.92058537,0.687500056 9.42868293,1.17288463 8.83317073,1.81513731 C8.75921951,1.89435964 8.63570732,1.89849812 8.55726829,1.82420255 C8.47863415,1.74990698 8.47453659,1.62516137 8.54829268,1.54574197 C9.376,0.653209794 10.0072195,0.0588452436 10.0134634,0.0529331294 C10.0883902,-0.0176181004 10.2042927,-0.0176181004 10.2792195,0.0529331294 Z M5.85365854,0.469126264 C5.0044878,1.29366913 0.390243902,5.9019651 0.390243902,8.6711994 C0.390243902,11.7139675 2.84117073,14.1891727 5.85365854,14.1891727 C8.86614634,14.1891727 11.3170732,11.7139675 11.3170732,8.6711994 C11.3170732,5.9019651 6.70282927,1.29366913 5.85365854,0.469126264 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
`;
container.innerHTML += content;
})
}
});
})
.catch(function(err){
console.error('Failed retrieving information', err);
});
}
}
</script>
<script>
function back() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>