Skip to content

Commit dfc185c

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #249 from nagasaisriya/add-randommealgenerator
Add randommealgenerator
2 parents 91be42c + 6d3f73d commit dfc185c

File tree

5 files changed

+187
-0
lines changed

5 files changed

+187
-0
lines changed

‎Index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
| [Chess Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic chess game for entertainment purpose. |
8282
| [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. |
8383
| [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. |
84+
| [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 |
8485
| [To Do List](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/todolist) |This app allows you to make a list of events you want to do and you can strikeout the events completed.|
8586
| [Weight Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weight%20Converter) |A web page where used can convert weight from kilograms to grams, ounces and pounds.|
8687
| [Restaurant website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Restaurant-website) |A Restuarant website with a simple and user friendly design ad a database linked to it.|
@@ -89,3 +90,4 @@
8990
| [Photo Editor](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/photo%20--%20editor) |It is a photo Editor which allows to rescale,flip and grey scale images.
9091
| [Temperature Convertor](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Temperature%20Convertor) | This webpage converts temperatures from and to Celsius, Fahrenheit and Kelvin.
9192
| [Band website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Band%20Website) |A Band website with a simple and user friendly design and multiple pages with some extra features.
93+

‎Random Meal-generator/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<h1>Random Meal Generator </h1>
2+
3+
<p>A Random Meal Generator written in HTML, CSS, and JavaScript .</p>
4+
5+
### Use of the Project:
6+
7+
<p>This app helps to generate random meals and shows a picture of meal with name, category, ingredients and instructions .</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Enjoy meals and recipies!!
29+
30+
<h3> ScreenShots </h3>
31+
32+
<img width="750" alt="Random meals Generator" src="https://user-images.githubusercontent.com/63009472/126068497-8a73e954-4d89-47ab-b573-882ad0dafc51.png">
33+
34+
<br>

‎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)