Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 87aa8c5

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /