Skip to content

Commit 22553e8

Browse files
coder12gitcoder12git
committed
Final Code Refactoring
1 parent d199c2d commit 22553e8

13 files changed

+234
-137
lines changed

‎env.example

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
SPOONACULAR_API_KEY=<SPOONACULAR_API_KEY> # (https://spoonacular.com/food-api/)
2-
DB_URI=
2+
DB_URI=<YOUR_DATABASE_URI> # (mongodb://localhost:27017/foodDB)

‎public/css/styles.css

Lines changed: 93 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,132 @@
11
body * {
2-
3-
font-family: 'Montserrat', sans-serif;
2+
font-family: "Montserrat", sans-serif;
43
}
54
.homeBody {
6-
min-height: 100svh;
7-
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://static.vecteezy.com/system/resources/previews/003/823/542/original/spices-for-use-as-cooking-ingredients-on-a-wooden-background-with-fresh-vegetables-healthy-food-herbs-organic-vegetables-on-the-table-raw-materials-of-cooking-preparation-tom-yum-free-photo.jpg");
8-
background-repeat: no-repeat;
9-
background-size: cover;
10-
background-position: center 30%;
11-
background-attachment: fixed;
5+
min-height: 100svh;
6+
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
7+
url("https://static.vecteezy.com/system/resources/previews/003/823/542/original/spices-for-use-as-cooking-ingredients-on-a-wooden-background-with-fresh-vegetables-healthy-food-herbs-organic-vegetables-on-the-table-raw-materials-of-cooking-preparation-tom-yum-free-photo.jpg");
8+
background-repeat: no-repeat;
9+
background-size: cover;
10+
background-position: center 30%;
11+
background-attachment: fixed;
1212
}
1313
h3.homeTitle {
14-
color: white;
15-
font-size: 3rem;
16-
animation: slidein 1.5s;
17-
14+
color: white;
15+
font-size: 3rem;
16+
animation: slidein 1.5s;
1817
}
1918
.optionsWrapper {
20-
display: flex;
21-
flex-direction: column;
22-
justify-content: center;
23-
align-items: center;
24-
margin-top: 2em;
25-
gap: 150px;
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: center;
22+
align-items: center;
23+
margin-top: 2em;
24+
gap: 150px;
2625
}
2726
.menuWrapper {
28-
display: flex;
29-
justify-content: space-around;
30-
width: 100%;
31-
gap: 100px;
27+
display: flex;
28+
justify-content: space-around;
29+
width: 100%;
30+
gap: 100px;
3231
}
3332
.component {
34-
transition: .2s;
35-
height: 200px;
36-
width: 200px;
37-
border: 5px solid white;
38-
color: white;
39-
display: flex;
40-
align-items: flex-end;
41-
border-radius: 50px;
42-
z-index: 2;
33+
transition: 0.2s;
34+
height: 200px;
35+
width: 200px;
36+
border: 5px solid white;
37+
color: white;
38+
display: flex;
39+
align-items: flex-end;
40+
border-radius: 50px;
41+
z-index: 2;
4342
}
4443
.component:hover {
45-
transition: .2s;
46-
transform: scale(1.5);
47-
border-radius: 15px;
44+
transition: 0.2s;
45+
transform: scale(1.5);
46+
border-radius: 15px;
4847
}
4948
.component:hover .textBackground {
50-
border-bottom-left-radius: 12px;
51-
border-bottom-right-radius: 12px;
49+
border-bottom-left-radius: 12px;
50+
border-bottom-right-radius: 12px;
5251
}
5352
.weeklyMenu {
54-
background-image: url("https://freedesignfile.com/upload/2017/05/Restaurant-menu-with-black-background-vector.jpg");
55-
background-position: center;
56-
background-size: cover;
57-
background-repeat: no-repeat;
58-
animation: weeklyMenuAnimation 1.2s;
53+
background-image: url("https://freedesignfile.com/upload/2017/05/Restaurant-menu-with-black-background-vector.jpg");
54+
background-position: center;
55+
background-size: cover;
56+
background-repeat: no-repeat;
57+
animation: weeklyMenuAnimation 1.2s;
5958
}
6059
.inFridge {
61-
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSI9F3QferHQjUXTo53v2JRvG2YPp78J3HgKA&usqp=CAU");
62-
background-position: center;
63-
background-size: cover;
64-
background-repeat: no-repeat;
65-
animation: fridge 1.2s;
60+
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSI9F3QferHQjUXTo53v2JRvG2YPp78J3HgKA&usqp=CAU");
61+
background-position: center;
62+
background-size: cover;
63+
background-repeat: no-repeat;
64+
animation: fridge 1.2s;
6665
}
6766
.somethingNew {
68-
background-image: url("https://images.unsplash.com/photo-1599508704512-2f19efd1e35f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80");
69-
background-position: center 80%;
70-
background-size: cover;
71-
background-repeat: no-repeat;
72-
animation: somethingNew 1.2s;
67+
background-image: url("https://images.unsplash.com/photo-1599508704512-2f19efd1e35f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80");
68+
background-position: center 80%;
69+
background-size: cover;
70+
background-repeat: no-repeat;
71+
animation: somethingNew 1.2s;
7372
}
7473
.textBackground {
75-
transition: .2s;
76-
background: rgba(0, 0, 0, 0.5);
77-
width: 100%;
78-
height: 50px;
79-
margin: 0;
80-
border-bottom-left-radius: 50px;
81-
border-bottom-right-radius: 50px;
74+
transition: 0.2s;
75+
background: rgba(0, 0, 0, 0.5);
76+
width: 100%;
77+
height: 50px;
78+
margin: 0;
79+
border-bottom-left-radius: 50px;
80+
border-bottom-right-radius: 50px;
8281
}
8382
.navShadow {
84-
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
85-
animation: moveup .5s;
83+
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
84+
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
85+
animation: moveup 0.5s;
8686
}
8787

8888
@keyframes moveup {
89-
0% {
90-
transform: translateY(-100px);
91-
}
92-
100% {
93-
transform: translateY(0);
94-
}
95-
89+
0% {
90+
transform: translateY(-100px);
91+
}
92+
100% {
93+
transform: translateY(0);
94+
}
9695
}
9796

9897
@keyframes weeklyMenuAnimation {
99-
0% {
100-
transform: translateX(-300px) translateY(500px);
101-
}
102-
100% {
103-
transform: translateX(0);
104-
}
98+
0% {
99+
transform: translateX(-300px) translateY(500px);
100+
}
101+
100% {
102+
transform: translateX(0);
103+
}
105104
}
106105
@keyframes fridge {
107-
0% {
108-
transform: translateY(500px);
109-
}
110-
100% {
111-
transform: translateX(0);
112-
}
106+
0% {
107+
transform: translateY(500px);
108+
}
109+
100% {
110+
transform: translateX(0);
111+
}
113112
}
114113
@keyframes somethingNew {
115-
0% {
116-
transform: translateX(300px) translateY(500px);
117-
}
118-
100% {
119-
transform: translateX(0);
120-
}
114+
0% {
115+
transform: translateX(300px) translateY(500px);
116+
}
117+
100% {
118+
transform: translateX(0);
119+
}
121120
}
122121

123122
@media only screen and (max-width: 450px) {
124-
.menuWrapper {
125-
display: flex;
126-
flex-direction: column;
127-
align-items: center;
128-
}
129-
.component {
130-
height: 300px;
131-
width: 300px;
132-
}
123+
.menuWrapper {
124+
display: flex;
125+
flex-direction: column;
126+
align-items: center;
127+
}
128+
.component {
129+
height: 300px;
130+
width: 300px;
131+
}
133132
}

‎routes/db.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ router.post("/savedRecipe", (req, res) => {
1111
time: req.body.time,
1212
});
1313
recipe.save();
14-
res.send("Recipe saved successfully!");
15-
14+
res.send('<h1 style="text-align: center;">Recipe Saved Successfully!</h1>');
1615
} catch (error) {
1716
res.send(error);
1817
}

‎routes/fridgeRoutes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,4 @@ router.post("/ingredientList", async (req, res) => {
5252
}
5353
});
5454

55-
module.exports = router;
55+
module.exports = router;

‎routes/recipeRoutes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ router.get("/recipe/:mealId", async (req, res) => {
4141
// res.send(summary.summary);
4242
});
4343

44-
module.exports = router;
44+
module.exports = router;

‎routes/tagRoutes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,4 @@ router.post("/randomList", async (req, res) => {
4646
}
4747
});
4848

49-
module.exports = router;
49+
module.exports = router;

‎routes/weekMenusRoutes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,4 @@ router.post("/mealList", async (req, res) => {
4747
}
4848
});
4949

50-
module.exports = router;
50+
module.exports = router;

‎server.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const dotenv = require("dotenv");
22
const mongoose = require("mongoose");
33

4-
54
dotenv.config({ path: "./.env" });
65
mongoose.connect(process.env.DB_URI);
76

‎views/inputIngredient.ejs

Lines changed: 32 additions & 7 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
<link
1010
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
1111
rel="stylesheet"
@@ -15,19 +15,44 @@
1515

1616
<body class="font-mono bg-gray-400">
1717
<!--nav-->
18-
<nav x-data="{show:false}" class="flex items-center justify-between flex-wrap bg-orange-600 p-6">
18+
<nav
19+
x-data="{show:false}"
20+
class="flex items-center justify-between flex-wrap bg-orange-600 p-6"
21+
>
1922
<div class="flex items-center flex-shrink-0 text-white mr-6">
2023
<span class="font-semibold text-xl tracking-tight">FoodMeets</span>
2124
</div>
2225
<div class="block md:hidden">
23-
<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">
24-
<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>
26+
<button
27+
@click="show=!show"
28+
class="flex items-center px-3 py-2 border rounded text-gray-100 border-gray-200 hover:text-white hover:border-white"
29+
>
30+
<svg
31+
class="fill-current h-3 w-3"
32+
viewBox="0 0 20 20"
33+
xmlns="http://www.w3.org/2000/svg"
34+
>
35+
<title>Menu</title>
36+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
37+
</svg>
2538
</button>
2639
</div>
27-
<div @click.away="show = false" :class="{ 'block': show, 'hidden': !show }" class="w-full block flex-grow md:flex md:justify-end md:w-auto">
40+
<div
41+
@click.away="show = false"
42+
:class="{ 'block': show, 'hidden': !show }"
43+
class="w-full block flex-grow md:flex md:justify-end md:w-auto"
44+
>
2845
<div>
29-
<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>
30-
<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>
46+
<a
47+
href="/trendingRecipes"
48+
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"
49+
>Popular</a
50+
>
51+
<a
52+
href="/"
53+
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"
54+
>Home</a
55+
>
3156
</div>
3257
</div>
3358
</nav>

‎views/inputRandom.ejs

Lines changed: 32 additions & 7 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
<link
1010
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
1111
rel="stylesheet"
@@ -15,19 +15,44 @@
1515

1616
<body class="font-mono bg-gray-400">
1717
<!--nav-->
18-
<nav x-data="{show:false}" class="flex items-center justify-between flex-wrap bg-orange-600 p-6">
18+
<nav
19+
x-data="{show:false}"
20+
class="flex items-center justify-between flex-wrap bg-orange-600 p-6"
21+
>
1922
<div class="flex items-center flex-shrink-0 text-white mr-6">
2023
<span class="font-semibold text-xl tracking-tight">FoodMeets</span>
2124
</div>
2225
<div class="block md:hidden">
23-
<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">
24-
<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>
26+
<button
27+
@click="show=!show"
28+
class="flex items-center px-3 py-2 border rounded text-gray-100 border-gray-200 hover:text-white hover:border-white"
29+
>
30+
<svg
31+
class="fill-current h-3 w-3"
32+
viewBox="0 0 20 20"
33+
xmlns="http://www.w3.org/2000/svg"
34+
>
35+
<title>Menu</title>
36+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
37+
</svg>
2538
</button>
2639
</div>
27-
<div @click.away="show = false" :class="{ 'block': show, 'hidden': !show }" class="w-full block flex-grow md:flex md:justify-end md:w-auto">
40+
<div
41+
@click.away="show = false"
42+
:class="{ 'block': show, 'hidden': !show }"
43+
class="w-full block flex-grow md:flex md:justify-end md:w-auto"
44+
>
2845
<div>
29-
<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>
30-
<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>
46+
<a
47+
href="/trendingRecipes"
48+
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"
49+
>Popular</a
50+
>
51+
<a
52+
href="/"
53+
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"
54+
>Home</a
55+
>
3156
</div>
3257
</div>
3358
</nav>

0 commit comments

Comments
 (0)