Skip to content

Commit 5d0191e

Browse files
coder12gitcoder12git
committed
What's in your fridge feature done
1 parent 27b1dac commit 5d0191e

File tree

2 files changed

+158
-17
lines changed

2 files changed

+158
-17
lines changed

‎app.js

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,18 +98,25 @@ app.post("/ingredientList", async (req, res) => {
9898
const recipesData = await generateRecipesByIngredients.json();
9999

100100
// Generate recipe information
101+
const recipeInfoPromises = recipesData.map(async (recipe) => {
102+
const recipeInfo = await fetch(
103+
`https://api.spoonacular.com/recipes/${recipe.id}/nutritionWidget.json?apiKey=${apiKey}`
104+
);
105+
const infoData = await recipeInfo.json();
106+
return {
107+
...recipe,
108+
nutrients: infoData,
109+
};
110+
});
101111

102-
const recipeInfo = await fetch(
103-
`https://api.spoonacular.com/recipes/complexSearch?apiKey=c7d40af634094a53a02a542268b9f073`
104-
);
105-
const results = recipeInfo.json();
112+
// Wait for all recipe nutrient information to be fetched
113+
const recipesWithNutrients = await Promise.all(recipeInfoPromises);
106114

107115
res.render("planMealsByIngredients", {
108-
recipes: recipesData,
109-
results: results,
116+
recipes: recipesWithNutrients,
110117
});
111118

112-
// res.send(recipesData);
119+
// res.send(recipesWithNutrients);
113120
} catch (error) {
114121
res.send(error);
115122
console.log(error);

‎views/planMealsByIngredients.ejs

Lines changed: 144 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,148 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23
<head>
3-
<title>Meal Plan</title>
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>Meal Planning App</title>
8+
<link
9+
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
10+
rel="stylesheet"
11+
/>
12+
<link href="/css/styles.css" rel="stylesheet" />
13+
<style>
14+
table {
15+
font-family: arial, sans-serif;
16+
border-collapse: collapse;
17+
width: 100%;
18+
}
19+
td,
20+
th {
21+
border: 1px solid #ff8400;
22+
text-align: left;
23+
padding: 8px;
24+
}
25+
tr:nth-child(even) {
26+
background-color: #f6f1e9;
27+
}
28+
</style>
429
</head>
5-
<body>
6-
<ul>
7-
<% recipes.forEach(function(recipe){ %>
8-
<li><a href="/recipe/<%= recipe.id %>"><%= recipe.title %></a></li>
9-
<% results.results.forEach(function(result){%> if(result.id===recipe.id){
10-
<li></li>
11-
} });%> <% }) %>
12-
</ul>
30+
<body class="font-mono bg-gray-400">
31+
<nav
32+
x-data="{show:false}"
33+
class="flex items-center justify-between flex-wrap bg-orange-600 p-6"
34+
>
35+
<div class="flex items-center flex-shrink-0 text-white mr-6">
36+
<span class="font-semibold text-xl tracking-tight">Plan Your Meal</span>
37+
</div>
38+
<div class="block md:hidden">
39+
<button
40+
@click="show=!show"
41+
class="flex items-center px-3 py-2 border rounded text-gray-100 border-gray-200 hover:text-white hover:border-white"
42+
>
43+
<svg
44+
class="fill-current h-3 w-3"
45+
viewBox="0 0 20 20"
46+
xmlns="http://www.w3.org/2000/svg"
47+
>
48+
<title>Menu</title>
49+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
50+
</svg>
51+
</button>
52+
</div>
53+
<div
54+
@click.away="show = false"
55+
:class="{ 'block': show, 'hidden': !show }"
56+
class="w-full block flex-grow md:flex md:justify-end md:w-auto"
57+
>
58+
<div>
59+
<!-- <a href="#" class="block md:inline-block text-lg px-4 py-2 leading-none rounded text-white border-white hover:border-transparent hover:text-orange-500 hover:bg-white mt-4 md:mt-0">Compose Post</a> -->
60+
<a
61+
href="#"
62+
class="block md:inline-block text-lg px-4 py-2 leading-none rounded text-white border-white hover:border-transparent hover:text-orange-500 hover:bg-white mt-4 md:mt-0"
63+
>Dashboard</a
64+
>
65+
<a
66+
href="/"
67+
class="block md:inline-block text-lg px-4 py-2 leading-none rounded text-orange border-white hover:border-transparent bg-white mt-4 md:mt-0"
68+
>Home</a
69+
>
70+
</div>
71+
</div>
72+
</nav>
73+
<div
74+
style="
75+
text-align: center;
76+
margin-top: 20px;
77+
font-size: larger;
78+
font-weight: 600;
79+
color: orange;
80+
"
81+
>
82+
<h1 style="font-size: 50px">Welcome to your meal planning journey.</h1>
83+
<a href="/inputIngredient">
84+
<button
85+
id="search"
86+
class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 border border-orange-700 rounded"
87+
>
88+
Create recipes by ingredients
89+
</button>
90+
</a>
91+
</div>
92+
<div>
93+
<div style="text-align: center; margin-top: 5px">
94+
<button
95+
id="downloadBtn"
96+
class="bg-orange-400 hover:bg-orange-700 text-white font-semibold py-2 px-4 mr-500 ml-500 p-3 mt-3 rounded focus:outline-none focus:shadow-outline"
97+
>
98+
Download as PDF
99+
</button>
100+
</div>
101+
<div id="result">
102+
<table style="margin-top: 5%">
103+
<tr>
104+
<th>Meal</th>
105+
<th>Calories</th>
106+
<th>Carbs</th>
107+
<th>Protein</th>
108+
<th>Fat</th>
109+
</tr>
110+
<tbody id="table_body">
111+
<% recipes.forEach(function(recipe){ %>
112+
<tr>
113+
<td>
114+
<a href="/recipe/<%= recipe.id %>"><%= recipe.title %></a>
115+
</td>
116+
<td><%= recipe.nutrients.calories %></td>
117+
<td><%= recipe.nutrients.carbs %></td>
118+
<td><%= recipe.nutrients.protein %></td>
119+
<td><%= recipe.nutrients.fat %></td>
120+
</tr>
121+
<% }) %>
122+
</tbody>
123+
</table>
124+
</div>
125+
</div>
126+
<script
127+
src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
128+
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
129+
crossorigin="anonymous"
130+
referrerpolicy="no-referrer"
131+
></script>
132+
133+
<script>
134+
window.onload = function () {
135+
const btn = document.getElementById("downloadBtn");
136+
btn.addEventListener("click", () => {
137+
const menu = this.document.getElementById("result");
138+
const options = {
139+
filename: "menu.pdf",
140+
image: { type: "jpeg", quality: 0.98 },
141+
jsPDF: { format: "letter", orientation: "landscape" },
142+
};
143+
html2pdf().from(menu).set(options).save();
144+
});
145+
};
146+
</script>
13147
</body>
14148
</html>

0 commit comments

Comments
 (0)