Skip to content

Commit 87aa8c5

Browse files
HuXn-WebDevHuXn-WebDev
committed
Meal Finder Project
1 parent efc36b6 commit 87aa8c5

File tree

3 files changed

+243
-0
lines changed

3 files changed

+243
-0
lines changed

‎098. Meal Finder/app.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const searchMeal = async (e) => {
2+
e.preventDefault();
3+
4+
// Select Elements
5+
const input = document.querySelector(".input");
6+
const title = document.querySelector(".title");
7+
const info = document.querySelector(".info");
8+
const img = document.querySelector(".img");
9+
const ingredientsOutput = document.querySelector(".ingredients");
10+
11+
const showMealInfo = (meal) => {
12+
const { strMeal, strMealThumb, strInstructions } = meal;
13+
title.textContent = strMeal;
14+
img.style.backgroundImage = `url(${strMealThumb})`;
15+
info.textContent = strInstructions;
16+
17+
const ingredients = [];
18+
19+
for (let i = 1; i <= 20; i++) {
20+
if (meal[`strIngredient${i}`]) {
21+
ingredients.push(
22+
`${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`
23+
);
24+
} else {
25+
break;
26+
}
27+
}
28+
29+
const html = `
30+
<span>${ingredients
31+
.map((ing) => `<li class="ing">${ing}</li>`)
32+
.join("")}</span>
33+
`;
34+
35+
ingredientsOutput.innerHTML = html;
36+
};
37+
38+
const showAlert = () => {
39+
alert("Meal not found :(");
40+
};
41+
42+
// Fetch Data
43+
const fetchMealData = async (val) => {
44+
const res = await fetch(
45+
`https://www.themealdb.com/api/json/v1/1/search.php?s=${val}`
46+
);
47+
48+
const { meals } = await res.json();
49+
return meals;
50+
};
51+
52+
// Get the user value
53+
const val = input.value.trim();
54+
55+
if (val) {
56+
const meals = await fetchMealData(val);
57+
58+
if (!meals) {
59+
showAlert();
60+
return;
61+
}
62+
63+
meals.forEach(showMealInfo);
64+
} else {
65+
alert("Please try searching for meal :)");
66+
}
67+
};
68+
69+
const form = document.querySelector("form");
70+
form.addEventListener("submit", searchMeal);
71+
72+
const magnifier = document.querySelector(".magnifier");
73+
magnifier.addEventListener("click", searchMeal);

‎098. Meal Finder/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Meal Finder</title>
6+
<link rel="stylesheet" href="style.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
10+
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
11+
crossorigin="anonymous"
12+
referrerpolicy="no-referrer"
13+
/>
14+
</head>
15+
<body>
16+
<nav>
17+
<form class="input-container">
18+
<input type="text" class="input" placeholder="Search ..." />
19+
<i class="fa-solid fa-magnifying-glass magnifier"></i>
20+
</form>
21+
22+
<ul>
23+
<li>Breakfast</li>
24+
<li>Launch</li>
25+
<li>Dinner</li>
26+
</ul>
27+
</nav>
28+
29+
<main>
30+
<div class="container">
31+
<div class="img"></div>
32+
33+
<div class="content-container">
34+
<h1 class="title">Food Name</h1>
35+
<p class="info">
36+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde
37+
nostrum consequatur, nulla explicabo vero nesciunt architecto
38+
officiis eius ullam alias.
39+
</p>
40+
<button class="main-btn">$20 - Order Now</button>
41+
</div>
42+
</div>
43+
</main>
44+
45+
<section class="ingredients"></section>
46+
47+
<script src="app.js"></script>
48+
</body>
49+
</html>

‎098. Meal Finder/style.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
nav {
6+
display: flex;
7+
justify-content: space-around;
8+
align-items: center;
9+
margin: 20px;
10+
}
11+
12+
.input-container {
13+
display: flex;
14+
align-items: center;
15+
border: 1px solid #ff6e00;
16+
padding: 5px;
17+
width: 300px;
18+
height: 50px;
19+
border-radius: 50px;
20+
margin: 10px;
21+
position: relative;
22+
transition: width 1.5s;
23+
}
24+
25+
.input {
26+
margin: 10px 50px;
27+
margin-left: 20px;
28+
width: 100%;
29+
color: #ff6e00;
30+
border: none;
31+
background: transparent;
32+
outline: none;
33+
transition-delay: 0.5s;
34+
}
35+
36+
.magnifier {
37+
position: absolute;
38+
right: 15px;
39+
width: 25px;
40+
text-align: center;
41+
margin: 0 auto;
42+
cursor: pointer;
43+
color: #ffa31a;
44+
}
45+
46+
ul li {
47+
display: inline;
48+
margin-left: 40px;
49+
font-family: sans-serif;
50+
}
51+
52+
main {
53+
display: flex;
54+
justify-content: center;
55+
align-items: center;
56+
}
57+
58+
.container {
59+
width: 60%;
60+
padding: 3rem;
61+
box-shadow: 10px 10px 40px 5px #e0e0e0;
62+
margin-top: 5rem;
63+
display: flex;
64+
justify-content: space-between;
65+
align-items: center;
66+
}
67+
68+
.content-container h1 {
69+
font-family: sans-serif;
70+
font-size: 2rem;
71+
color: #2c2c2c;
72+
}
73+
74+
.content-container p {
75+
font-family: sans-serif;
76+
line-height: 1.4;
77+
margin-bottom: 2rem;
78+
color: #444444;
79+
width: 26rem;
80+
}
81+
82+
.img {
83+
transform: translateX(-120px);
84+
margin-top: 1rem;
85+
width: 350px;
86+
height: 350px;
87+
border-radius: 300px;
88+
background: url("https://images.unsplash.com/photo-1600289031464-74d374b64991?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1075&q=80");
89+
background-repeat: no-repeat;
90+
background-position: center;
91+
background-size: conver;
92+
}
93+
94+
.ingredients {
95+
width: 80%;
96+
margin: 0 auto;
97+
margin-top: 5rem;
98+
padding: 50px;
99+
}
100+
101+
.ingredients span {
102+
display: flex;
103+
flex-wrap: wrap;
104+
list-style: none;
105+
}
106+
107+
.ing {
108+
padding: 10px 20px;
109+
border: 2px solid #ff6e00;
110+
color: #ff6e00;
111+
font-family: sans-serif;
112+
border-radius: 100px;
113+
}
114+
115+
.main-btn {
116+
background: transparent;
117+
border: none;
118+
border: 2px solid #ffa31a;
119+
padding: 10px;
120+
color: #ffa31a;
121+
}

0 commit comments

Comments
 (0)