Skip to content

Commit 99aa8a9

Browse files
nagasaisriyanagasaisriya
committed
added random_meal_generator app
1 parent e7f8fbe commit 99aa8a9

File tree

4 files changed

+154
-0
lines changed

4 files changed

+154
-0
lines changed

‎Index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,7 @@
8080
| [Chess Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic chess game for entertainment purpose. |
8181
| [Password Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Password%20Generator) | A password generator app to generate strong passwords which can be easily used for authentication. |
8282
| [Parallex Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic website using HTML, CSS, JAVASCRIPT with modern look. |
83+
| [Random Meal Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Random%20Meal-generator) | A random meals generator app using HTML, CSS, JAVASCRIPT and an external API. It shows a picture of meal with name, category, ingredients and instructions |
84+
85+
8386

‎Random Meal-generator/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Random meal generator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="row text-center">
13+
<main>
14+
<h2>
15+
Feeling hungry?
16+
</h2>
17+
<h5>Get a random meal by clicking below</h5>
18+
<button class="button-primary" id="get_meal">Get Meal 🍔</button>
19+
</main>
20+
</div>
21+
<div id="meal" class="row-meal"></div>
22+
</div>
23+
</body>
24+
<script src="script.js"></script>
25+
</html>
26+
27+
28+

‎Random Meal-generator/script.js

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

‎Random Meal-generator/style.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
font-family: 'Poppins',sans-serif;
6+
}
7+
8+
body {
9+
background: -webkit-linear-gradient(left,#fff,#a245a2);
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: center;
13+
align-items: center;
14+
padding: 30px 0;
15+
min-height: 100vh;
16+
}
17+
18+
img {
19+
position: relative;
20+
max-width: 100%;
21+
}
22+
23+
p {
24+
margin-bottom: 5px;
25+
}
26+
27+
h3 {
28+
margin: 0;
29+
}
30+
31+
h5 {
32+
margin: 10px 0;
33+
}
34+
35+
li {
36+
margin-bottom: 0;
37+
}
38+
39+
.meal {
40+
margin: 20px 0;
41+
}
42+
43+
.text-center {
44+
text-align: center;
45+
}
46+
47+
.videoWrapper {
48+
position: relative;
49+
padding-bottom: 56.25%;
50+
padding-top: 25px;
51+
height: 0;
52+
}
53+
54+
.videoWrapper iframe {
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
width: 100%;
59+
height: 100%;
60+
}
61+
62+

0 commit comments

Comments
 (0)