Skip to content

Commit 2846793

Browse files
Avdhesh-VarshneyAvdhesh-Varshney
committed
Random Meal Generator 😎
1 parent 02be708 commit 2846793

6 files changed

Lines changed: 274 additions & 0 deletions

File tree

‎Projects/Random-Meal-Generator/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# RANDOM MEAL GENERATOR
2+
3+
---
4+
5+
## **Description 📃**
6+
7+
- This app helps to generate random meals and shows a picture of meal with name, category, ingredients and instructions.
8+
9+
<br>
10+
11+
## **Tech Stack 🎮**
12+
13+
- HTML
14+
- CSS
15+
- JS
16+
17+
<br>
18+
19+
## **Working Video 📸**
20+
21+
https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/c4b9fbb1-81a4-422b-a33e-a97422a8477a
22+
23+
<br>
24+
25+
## **Created By 👦**
26+
27+
[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
28+
29+
<br>
30+
31+
### **Thanks for using this application 🎉**

‎Projects/Random-Meal-Generator/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
9+
<!-- Adding logo -->
10+
<link rel="shortcut icon" href="https://dcassetcdn.com/design_img/375573/141837/141837_3031164_375573_image.jpg"
11+
type="image/x-icon">
12+
13+
<!-- Title of the logo -->
14+
<title>Random meal generator</title>
15+
16+
<!-- Main stylesheet -->
17+
<link rel="stylesheet" href="./style.css">
18+
</head>
19+
20+
<body>
21+
<!-- Main container of the project -->
22+
<div class="container">
23+
<div class="row">
24+
<main>
25+
<h1>Feeling hungry?</h1>
26+
<h4>Get a random meal by clicking below</h4>
27+
<button id="get_meal">Get Meal 🍔</button>
28+
</main>
29+
</div>
30+
<div id="meal" class="row-meal"></div>
31+
</div>
32+
33+
<hr>
34+
35+
<p class="developer">
36+
Created By <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a>
37+
</p>
38+
39+
<!-- Main js file -->
40+
<script src="./script.js"></script>
41+
</body>
42+
43+
</html>

‎Projects/Random-Meal-Generator/script.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// Initialising global variables
2+
const get_meal_btn = document.getElementById('get_meal');
3+
const meal_container = document.getElementById('meal');
4+
5+
get_meal_btn.addEventListener('click', () => {
6+
fetch('https://www.themealdb.com/api/json/v1/1/random.php')
7+
.then(res => res.json())
8+
.then(res => {
9+
createMeal(res.meals[0]);
10+
});
11+
});
12+
13+
const createMeal = (meal) => {
14+
const ingredients = [];
15+
// Get all ingredients from the object. Up to 20
16+
for (let i = 1; i <= 20; i++) {
17+
if (meal[`strIngredient${i}`]) {
18+
ingredients.push(`${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`)
19+
} else {
20+
// Stop if no more ingredients
21+
break;
22+
}
23+
}
24+
25+
const newInnerHTML = `
26+
<div class="row1">
27+
<div class="columns five">
28+
<img src="${meal.strMealThumb}" alt="Meal Image">
29+
${meal.strCategory ? `<p><strong>Category:</strong> ${meal.strCategory}</p>` : ''}
30+
${meal.strArea ? `<p><strong>Area:</strong> ${meal.strArea}</p>` : ''}
31+
${meal.strTags ? `<p><strong>Tags:</strong> ${meal.strTags.split(',').join(', ')}</p>` : ''}
32+
<h5>Ingredients:</h5>
33+
<ul>
34+
${ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
35+
</ul>
36+
</div>
37+
<hr>
38+
<div class="columns seven">
39+
<h4>${meal.strMeal}</h4>
40+
<p>${meal.strInstructions}</p>
41+
</div>
42+
</div>
43+
<hr>
44+
${meal.strYoutube ? `
45+
<div class="row2">
46+
<h1>Video Recipe</h1>
47+
<div class="videoWrapper">
48+
<iframe width="420" height="315"
49+
src="https://www.youtube.com/embed/${meal.strYoutube.slice(-11)}">
50+
</iframe>
51+
</div>
52+
</div>` : ''}
53+
`;
54+
55+
meal_container.innerHTML = newInnerHTML;
56+
}

‎Projects/Random-Meal-Generator/style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/* Adding google font */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
3+
4+
/* Default settings */
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
font-family: 'Poppins', sans-serif;
10+
}
11+
12+
body {
13+
background: -webkit-linear-gradient(left, #fff, #a245a2);
14+
padding: 30px 0;
15+
min-height: 100vh;
16+
transition: all 0.2s;
17+
align-items: center;
18+
text-align: center;
19+
}
20+
21+
h1 {
22+
font-weight: normal;
23+
padding-bottom: 1.4rem;
24+
color: #a245a2;
25+
}
26+
27+
h4 {
28+
font-weight: normal;
29+
color: #a245a2;
30+
padding-bottom: 2rem;
31+
}
32+
33+
#get_meal {
34+
margin: 1rem;
35+
padding: 15px;
36+
border: none;
37+
outline: none;
38+
border-radius: 10px;
39+
font-size: 1.4rem;
40+
background: rgba(255, 255, 255, 0.25);
41+
transition: all 0.4s;
42+
cursor: pointer;
43+
}
44+
45+
#get_meal:hover {
46+
font-size: 1.6rem;
47+
padding: 18px;
48+
color: #a245a2;
49+
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
50+
}
51+
52+
.row-meal {
53+
display: flex;
54+
justify-content: center;
55+
flex-direction: column;
56+
}
57+
58+
img {
59+
padding: 1rem;
60+
position: relative;
61+
max-width: 70%;
62+
height: 50%;
63+
border: 2px solid coral;
64+
outline: none;
65+
transition: all 0.4s;
66+
border-radius: 1.4rem;
67+
align-items: center;
68+
}
69+
70+
img:hover {
71+
padding: 0;
72+
}
73+
74+
.five p {
75+
margin: 1rem;
76+
font-size: 1.6rem;
77+
letter-spacing: 2px;
78+
}
79+
80+
.five ul {
81+
text-decoration: none;
82+
list-style: none;
83+
font-size: 1.2rem;
84+
letter-spacing: 2px;
85+
margin: 1rem;
86+
}
87+
88+
hr {
89+
margin: 2.5rem 0;
90+
}
91+
92+
.seven h4,
93+
.row2 h1 {
94+
font-size: 2rem;
95+
color: #a245a2;
96+
font-weight: normal;
97+
}
98+
99+
.seven h4:hover {
100+
text-decoration: underline;
101+
}
102+
103+
.seven p {
104+
font-size: larger;
105+
letter-spacing: 2px;
106+
margin: 0 3rem;
107+
}
108+
109+
.videoWrapper {
110+
padding: 2% 10% 40%;
111+
border: 2px solid crimson;
112+
position: relative;
113+
}
114+
115+
.videoWrapper iframe {
116+
position: absolute;
117+
top: 0;
118+
left: 0;
119+
width: 100%;
120+
height: 100%;
121+
}
122+
123+
.developer {
124+
margin-bottom: 1.2rem;
125+
transition: all 0.3s;
126+
color: #a245a2;
127+
}
128+
129+
.developer a {
130+
text-decoration: none;
131+
color: #a245a2;
132+
}
133+
134+
.developer a:hover {
135+
text-decoration: underline;
136+
}

‎img/projects/Random-Meal-Generator.png‎

1.39 MB
Loading

‎projects.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1039,6 +1039,14 @@ const projects = [
10391039
"description":"Sound Equalizer is a clone of the sound equalizer system. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.",
10401040
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Sound_Equalizer",
10411041
"project-link":"Projects/Sound_Equalizer/index.html"
1042+
},
1043+
{
1044+
"title":"Random Meal Generator",
1045+
"tags":["HTML","CSS","JavaScript"],
1046+
"img":"img/projects/Random-Meal-Generator.png",
1047+
"description":"Random Meal Generator can generator different meals. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.",
1048+
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Random-Meal-Generator",
1049+
"project-link":"Projects/Random-Meal-Generator/index.html"
10421050
}
10431051
]
10441052

0 commit comments

Comments
 (0)