Skip to content

Commit d199c2d

Browse files
coder12gitcoder12git
committed
Added new designs for #popular
1 parent 7c8711d commit d199c2d

File tree

3 files changed

+101
-25
lines changed

3 files changed

+101
-25
lines changed

‎routes/db.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ router.post("/savedRecipe", (req, res) => {
1010
id: req.body.id,
1111
time: req.body.time,
1212
});
13-
1413
recipe.save();
1514
res.send("Recipe saved successfully!");
15+
1616
} catch (error) {
1717
res.send(error);
1818
}

‎views/recipe.ejs

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>FoodMeets</title>
8-
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
8+
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
99
<meta charset="UTF-8" />
1010
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -83,19 +83,44 @@
8383
<link href="/css/styles.css" rel="stylesheet" />
8484
</head>
8585
<body class="font-mono bg-gray-400">
86-
<nav x-data="{show:false}" class="flex items-center justify-between flex-wrap bg-orange-600 p-6">
86+
<nav
87+
x-data="{show:false}"
88+
class="flex items-center justify-between flex-wrap bg-orange-600 p-6"
89+
>
8790
<div class="flex items-center flex-shrink-0 text-white mr-6">
8891
<span class="font-semibold text-xl tracking-tight">FoodMeets</span>
8992
</div>
9093
<div class="block md:hidden">
91-
<button @click="show=!show" class="flex items-center px-3 py-2 border rounded text-gray-100 border-gray-200 hover:text-white hover:border-white">
92-
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
94+
<button
95+
@click="show=!show"
96+
class="flex items-center px-3 py-2 border rounded text-gray-100 border-gray-200 hover:text-white hover:border-white"
97+
>
98+
<svg
99+
class="fill-current h-3 w-3"
100+
viewBox="0 0 20 20"
101+
xmlns="http://www.w3.org/2000/svg"
102+
>
103+
<title>Menu</title>
104+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
105+
</svg>
93106
</button>
94107
</div>
95-
<div @click.away="show = false" :class="{ 'block': show, 'hidden': !show }" class="w-full block flex-grow md:flex md:justify-end md:w-auto">
108+
<div
109+
@click.away="show = false"
110+
:class="{ 'block': show, 'hidden': !show }"
111+
class="w-full block flex-grow md:flex md:justify-end md:w-auto"
112+
>
96113
<div>
97-
<a href="/trendingRecipes" 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">Popular</a>
98-
<a href="/" 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">Home</a>
114+
<a
115+
href="/trendingRecipes"
116+
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"
117+
>Popular</a
118+
>
119+
<a
120+
href="/"
121+
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"
122+
>Home</a
123+
>
99124
</div>
100125
</div>
101126
</nav>
@@ -105,14 +130,35 @@
105130
<div class="flex flex-col items-center justify-start">
106131
<button
107132
id="downloadBtn"
108-
class="bg-orange-400 hover:bg-orange-700 text-white font-semibold py-2 px-4 ml-500 p-3 mt-3 rounded focus:outline-none focus:shadow-outline"
133+
class="bg-orange-400 hover:bg-orange-700 text-white font-bold py-2 px-4 ml-500 p-3 mt-3 rounded focus:outline-none focus:shadow-outline inline-flex items-center"
109134
>
110-
Download as PDF
135+
<svg
136+
class="fill-current w-4 h-4 mr-2"
137+
xmlns="http://www.w3.org/2000/svg"
138+
viewBox="0 0 20 20"
139+
>
140+
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
141+
</svg>
142+
<span>Download</span>
111143
</button>
112144

113145
<div class="container" id="meals">
114146
<div class="left-side">
115147
<img src="<%= image %>" alt="Recipe Image" class="profile-image" />
148+
<form action="/savedRecipe" , method="post">
149+
<input type="hidden" name="name" value="<%= title %>" />
150+
<input type="hidden" name="image" value="<%= image %>" />
151+
<input type="hidden" name="id" value="<%= id %>" />
152+
<input type="hidden" name="time" value="<%= readyInMinutes %>" />
153+
<div class="flex flex-col items-center justify-start">
154+
<button
155+
type="submit"
156+
class="bg-blue-400 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline inline-flex items-center"
157+
>
158+
<span>Save</span>
159+
</button>
160+
</div>
161+
</form>
116162
<h1><strong><%= title %></strong></h1>
117163
<h2><strong>Ready In Minutes: <%= readyInMinutes %></strong></h2>
118164
<h2><strong>Nutritional information</strong></h2>
@@ -164,14 +210,6 @@
164210
</div>
165211
</div>
166212

167-
<form action="/savedRecipe", method="post">
168-
<input type="hidden" name="name" value="<%= title %>">
169-
<input type="hidden" name="image" value="<%= image %>">
170-
<input type="hidden" name="id" value="<%= id %>">
171-
<input type="hidden" name="time" value="<%= readyInMinutes %>">
172-
<button type="submit">Saved</button>
173-
</form>
174-
175213
<script
176214
src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
177215
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="

‎views/trendingRecipes.ejs

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,52 @@
5454
</div>
5555
</div>
5656
</nav>
57-
<br>
58-
<ul>
57+
<div
58+
class="grid grid-flow-row gap-8 text-neutral-600 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
59+
>
5960
<% recipes.forEach(function(recipe){%>
60-
<li><a href="/recipe/<%= recipe.id %>"><%= recipe.name %></a></li>
61-
<li><%= recipe.image %></li>
62-
<li><%= recipe.id %></li>
63-
<li><%= recipe.time %></li>
61+
62+
<div class="max-w-sm bg-white border rounded-lg ml-6 mt-5 mb-12 mr-6">
63+
<a href="/recipe/<%= recipe.id %>" class="cursor-pointer">
64+
<img
65+
class="rounded-t h-72 w-full object-cover"
66+
src="<%= recipe.image %>?auto=format&fit=crop&w=400&q=50"
67+
alt=""
68+
/>
69+
</a>
70+
<div class="p-5">
71+
<a href="/recipe/<%= recipe.id %>" class="cursor-pointer">
72+
<h5
73+
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
74+
>
75+
<%= recipe.name %>
76+
</h5>
77+
</a>
78+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
79+
Ready In Minutes: <%= recipe.time %>
80+
</p>
81+
<a
82+
href="/recipe/<%= recipe.id %>"
83+
class="cursor-pointer inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
84+
>
85+
Read more
86+
<svg
87+
aria-hidden="true"
88+
class="w-4 h-4 ml-2 -mr-1"
89+
fill="currentColor"
90+
viewBox="0 0 20 20"
91+
xmlns="http://www.w3.org/2000/svg"
92+
>
93+
<path
94+
fill-rule="evenodd"
95+
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
96+
clip-rule="evenodd"
97+
></path>
98+
</svg>
99+
</a>
100+
</div>
101+
</div>
64102
<%});%>
65-
</ul>
103+
</div>
66104
</body>
67105
</html>

0 commit comments

Comments
 (0)