-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
86 lines (78 loc) · 2.49 KB
/
index.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
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
const searchUrl = 'https://www.themealdb.com/api/json/v1/1/search.php?s='
const randomUrl = 'https://www.themealdb.com/api/json/v1/1/random.php'
const form = document.querySelector('.flex form')
const searchButton = document.querySelector('#search-btn')
const randomButton = document.querySelector('#random-btn')
const search = document.querySelector('#search')
const resultHeading = document.querySelector('.result-heading')
const mealsEl = document.querySelector('.meals')
const singleMealEl = document.querySelector('.single-meal')
const searchMeal = async(e) => {
e.preventDefault()
const searchTerm = search.value
if(searchTerm.trim()) {
const response = await fetch(searchUrl+searchTerm)
const data = await response.json()
// console.log(data.meals)
if(data.meals === null) {
singleMealEl.innerHTML = ''
mealsEl.innerHTML = ''
resultHeading.innerText = `
Sorry! There are no results.
Try something else.
`
} else {
singleMealEl.innerHTML = ''
mealsEl.innerHTML = ''
resultHeading.innerHTML = ''
mealsEl.innerHTML = data.meals.map(meal =>
`
<div class='meal'>
<img src='${meal.strMealThumb}' alt='${meal.strMeal}>
<div class='meal-info'>${meal.strMeal}</div>
</div>
`
).join('')
}
} else {
alert('Please enter a search term')
}
search.value = ''
}
const getRandomMeal = async() => {
const response = await fetch(randomUrl)
const data = await response.json()
// console.log(data.meals[0])
const meal = data.meals[0]
let ingredients = []
for(i = 1; i <= 20; i++) {
if(meal[`strIngredient${i}`]) {
ingredients.push(
`${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`
)
}
}
// console.log(ingredients)
mealsEl.innerHTML = ''
resultHeading.innerHTML = ''
singleMealEl.innerHTML = `
<div class='single-meal'>
<h1>${meal.strMeal}</h1>
<img src='${meal.strMealThumb}' alt='${meal.strMeal}'>
<div class='single-meal-info>
${meal.strArea ? `<p>${meal.strArea}</p>` : ''}
${meal.strCategory ? `<p>${meal.strCategory}</p>` : ''}
</div>
<div class='main'>
<p>${meal.strInstructions}</p>
<h3>Ingredients</h3>
<ul>
${ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
</ul>
</div>
</div>
`
}
searchButton.addEventListener('click', searchMeal)
form.addEventListener('submit', searchMeal)
randomButton.addEventListener('click', getRandomMeal)