Skip to content

Commit c576c19

Browse files
AlexDimov-04AlexDimov-04
committed
added recipe application file
1 parent 001e1db commit c576c19

File tree

5 files changed

+531
-0
lines changed

5 files changed

+531
-0
lines changed

‎Food Recipe App/food.jpg

3.15 MB
Loading

‎Food Recipe App/index.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Recipes</title>
9+
<link rel="stylesheet" href="reset.css">
10+
<link rel="stylesheet" href="style.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
16+
rel="stylesheet">
17+
</head>
18+
19+
<body>
20+
<div class="container">
21+
<div class="meal-wrapper">
22+
<div class="meal-search">
23+
<h2 class="title">Find Meals For Your Ingredients</h2>
24+
<blockquote>Real food doesn't have ingredients, real food is ingredients.<br>
25+
<cite>- Jamie Oliver</cite>
26+
</blockquote>
27+
28+
<div class="meal-search-box">
29+
<input type="text" class="search-control" placeholder="Enter an ingredient" id="search-input">
30+
<button type="submit" class="search-btn btn" id="search-btn">
31+
<i class="fas fa-search"></i>
32+
</button>
33+
</div>
34+
</div>
35+
36+
<div class="meal-result">
37+
<h2 class="title">Your Search Results:</h2>
38+
<div id="meal">
39+
<!-- meal item -->
40+
<!-- <div class = "meal-item">
41+
<div class = "meal-img">
42+
<img src = "food.jpg" alt = "food">
43+
</div>
44+
<div class = "meal-name">
45+
<h3>Potato Chips</h3>
46+
<a href = "#" class = "recipe-btn">Get Recipe</a>
47+
</div>
48+
</div> -->
49+
<!-- end of meal item -->
50+
</div>
51+
</div>
52+
53+
54+
<div class="meal-details">
55+
<!-- recipe close btn -->
56+
<button type="button" class="btn recipe-close-btn" id="recipe-close-btn">
57+
<i class="fas fa-times"></i>
58+
</button>
59+
60+
<!-- meal content -->
61+
<div class="meal-details-content">
62+
<!-- <h2 class = "recipe-title">Meals Name Here</h2>
63+
<p class = "recipe-category">Category Name</p>
64+
<div class = "recipe-instruct">
65+
<h3>Instructions:</h3>
66+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo blanditiis quis accusantium natus! Porro, reiciendis maiores molestiae distinctio veniam ratione ex provident ipsa, soluta suscipit quam eos velit autem iste!</p>
67+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet aliquam voluptatibus ad obcaecati magnam, esse numquam nisi ut adipisci in?</p>
68+
</div>
69+
<div class = "recipe-meal-img">
70+
<img src = "food.jpg" alt = "">
71+
</div>
72+
<div class = "recipe-link">
73+
<a href = "#" target = "_blank">Watch Video</a>
74+
</div> -->
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
80+
81+
<script src="script.js"></script>
82+
</body>
83+
84+
</html>

‎Food Recipe App/reset.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* Box sizing rules */
2+
*,
3+
*::before,
4+
*::after {
5+
box-sizing: border-box;
6+
}
7+
8+
/* Remove default margin */
9+
body,
10+
h1,
11+
h2,
12+
h3,
13+
h4,
14+
p,
15+
figure,
16+
blockquote,
17+
dl,
18+
dd {
19+
margin: 0;
20+
}
21+
22+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
23+
ul[role='list'],
24+
ol[role='list'] {
25+
list-style: none;
26+
padding: 0px;
27+
margin: 0px;
28+
}
29+
30+
/* Set core root defaults */
31+
html:focus-within {
32+
scroll-behavior: smooth;
33+
}
34+
35+
/* Set core body defaults */
36+
body {
37+
min-height: 100vh;
38+
text-rendering: optimizeSpeed;
39+
line-height: 1.5;
40+
}
41+
42+
/* A elements that don't have a class get default styles */
43+
a:not([class]) {
44+
text-decoration-skip-ink: auto;
45+
}
46+
47+
/* Make images easier to work with */
48+
img,
49+
picture {
50+
max-width: 100%;
51+
display: block;
52+
}
53+
54+
/* Inherit fonts for inputs and buttons */
55+
input,
56+
button,
57+
textarea,
58+
select {
59+
font: inherit;
60+
}
61+
62+
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
63+
@media (prefers-reduced-motion: reduce) {
64+
html:focus-within {
65+
scroll-behavior: auto;
66+
}
67+
68+
*,
69+
*::before,
70+
*::after {
71+
animation-duration: 0.01ms !important;
72+
animation-iteration-count: 1 !important;
73+
transition-duration: 0.01ms !important;
74+
scroll-behavior: auto !important;
75+
}
76+
}

‎Food Recipe App/script.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const searchBtn = document.getElementById('search-btn');
2+
const mealList = document.getElementById('meal');
3+
const mealDetailsContent = document.querySelector('.meal-details-content');
4+
const recipeCloseBtn = document.getElementById('recipe-close-btn');
5+
let searchInputTxt = document.getElementById('search-input');
6+
7+
searchBtn.addEventListener('click', getMealList);
8+
mealList.addEventListener('click', getMealRecipe);
9+
recipeCloseBtn.addEventListener('click', () => {
10+
mealDetailsContent.parentNode.classList.remove('showRecipe');
11+
})
12+
13+
function getMealList() {
14+
searchInputTxt.value = searchInputTxt.value.trim();
15+
const BASE_URL = `https://www.themealdb.com/api/json/v1/1/filter.php?i=${searchInputTxt.value}`;
16+
17+
fetch(BASE_URL)
18+
.then((res) => res.json())
19+
.then((data) => {
20+
if (data.meals) {
21+
mealList.innerHTML = '';
22+
data.meals.forEach((meal) => {
23+
mealList.innerHTML += `
24+
<div class="meal-item" id="${meal.idMeal}">
25+
<div class = "meal-img">
26+
<img src = "${meal.strMealThumb}" alt = "food">
27+
</div>
28+
<div class = "meal-name">
29+
<h3>${meal.strMeal}</h3>
30+
<a href = "#" class = "recipe-btn">Get Recipe</a>
31+
</div>
32+
</div>
33+
`
34+
});
35+
} else {
36+
mealList.innerHTML = 'Sorry, we didn\' t find any meal!';
37+
mealList.classList.add('notFound');
38+
}
39+
})
40+
.catch((err) => {
41+
console.error(err);
42+
})
43+
}
44+
45+
function getMealRecipe(e) {
46+
e.preventDefault();
47+
48+
if (e.target.classList.contains('recipe-btn')) {
49+
let mealItem = e.target.parentNode.parentNode;
50+
fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.id}`)
51+
.then((res) => res.json())
52+
.then((data) => {
53+
mealRecipeModal(data.meals);
54+
})
55+
}
56+
}
57+
58+
function mealRecipeModal(meal) {
59+
meal = meal[0];
60+
mealDetailsContent.innerHTML = `
61+
<h2 class = "recipe-title">${meal.strMeal}</h2>
62+
<p class = "recipe-category">${meal.strCategory}</p>
63+
<div class = "recipe-instruct">
64+
<h3>Instructions:</h3>
65+
<p>${meal.strInstructions}</p>
66+
</div>
67+
<div class = "recipe-meal-img">
68+
<img src = "${meal.strMealThumb}" alt = "">
69+
</div>
70+
<div class = "recipe-link">
71+
<a href = "${meal.strYoutube}" target = "_blank">Watch Video</a>
72+
</div>
73+
`
74+
75+
mealDetailsContent.parentNode.classList.add('showRecipe');
76+
}

0 commit comments

Comments
 (0)