From 3b1673f9e1e18161b856c4b812dd2ac24d948bd9 Mon Sep 17 00:00:00 2001 From: "Keerthivasan (Keerthivasan S V) Venkitajalam" Date: Mon, 23 Dec 2024 01:27:11 +0530 Subject: [PATCH 1/6] Update catalog.html --- catalog.html | 223 +++++---------------------------------------------- 1 file changed, 18 insertions(+), 205 deletions(-) diff --git a/catalog.html b/catalog.html index 6e61a9f..b8df21e 100644 --- a/catalog.html +++ b/catalog.html @@ -2,23 +2,22 @@ Burnt Brotta | Catalog + + + + + + - - - - - - -
@@ -60,195 +59,8 @@


Find your next favorite recipe

 -
- - -
-
- - Image -
- Delight in the Flaky Marvel of Homemade Parottas! Experience - the Magic of Homemade Parottas: Flaky, Crispy, and - Oh-So-Tasty! -
-
-
- Signature Burnt Brotta -

-
-
2 hours
-
-
- - - - - -
-
- - -
- - - -
-
- Image -
- This soup is brimming with a rich symphony of flavours from - aromatic ingredients like ginger, garlic, shallots, and - turmeric, lending it a unique colour and flavour profile. - Mixed with noodles, potatoes, and a variety of veggies, this - combination results in a delicious, filling soup that everyone - can enjoy. -
-
-
- Indonasian Chicken Noodles -

-
-
40 mins
-
-
- - - - - -
-
- -
- - - -
-
- Image -
- Dazzle the senses with this indulgently creamy mousse. It has - a beautifully rich texture that is balanced by tart and juicy - fresh raspberries. The caramel shard topping is not only - beautiful, but also adds a satisfying crunch to this dessert. -
-
-
- Chocolate Raspberry Mousse -

-
-
20 mins
-
-
- - - - - -
-
- -
- - - -
-
- Image -
- Shakshuka is known as an easy and healthy breakfast option in - many countries, but it can definitely be enjoyed at any time - during the day. We gave our own plant-based spin to the - classic dish -
-
-
- Oven Baked Tofu Shakshuka -

-
-
40 mins
-
-
- - - - - -
-
- -
- - - -
-
- Image -
- Bubble tea, as the name suggests, is a tea-based drink from - Taiwan. Bubble tea can come in many flavours and have toppings - that range from chewy tapioca pearls, grass jelly, aloe vera, - or red beans. -
-
-
- Bloodshot bubble tea -

-
-
40 mins
-
-
- - - - - -
-
- -
- - - -
-
- Image -
- This creamy Thai curry is on regular rotation in our home. - It's loaded with veggies, tofu, and potatoes, making it hearty - and filling. -
-
-
- Coconut & Tofu Thai Red Curry -

-
-
40 mins
-
-
- - - - - -
-
- -
- +
+
@@ -310,5 +122,6 @@

Manasha

Copyright © Burnt Brotta B_Team 1

+ From 401e031065facab2a7108dcc1385fcaab320256c Mon Sep 17 00:00:00 2001 From: "Keerthivasan (Keerthivasan S V) Venkitajalam" Date: Mon, 23 Dec 2024 01:31:44 +0530 Subject: [PATCH 2/6] js for dynamic creation and population catalog items based on JSON data --- JS files/catalog.js | 65 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 JS files/catalog.js diff --git a/JS files/catalog.js b/JS files/catalog.js new file mode 100644 index 0000000..01a011d --- /dev/null +++ b/JS files/catalog.js @@ -0,0 +1,65 @@ +document.addEventListener("DOMContentLoaded", function () { + fetch("./recipes.json") + .then((response) => { + if (!response.ok) { + throw new Error("Network response was not ok " + response.statusText); + } + return response.json(); + }) + .then((recipes) => { + console.log("Fetched recipes:", recipes); + const catalogContainer = document.getElementById("catalog-container"); + if (!catalogContainer) { + console.error("Catalog container not found"); + return; + } + + recipes.forEach((recipe) => { + const recipeElement = document.createElement("div"); + recipeElement.className = "pro"; + recipeElement.innerHTML = ` +
+ ${recipe.name} +
${recipe.description}
+
+
+ ${recipe.name} +

+
+
${recipe.time}
+
+
+ ${generateStars(recipe.reviews.user_reviews)} +
+
+ + + + `; + + recipeElement.addEventListener("click", () => { + window.location.href = `recipe.html?id=${recipe.id}`; + }); + + console.log("Appending recipe element:", recipeElement); + catalogContainer.appendChild(recipeElement); + }); + }) + .catch((error) => { + console.error("Error fetching the recipe data:", error); + }); +}); + +function generateStars(reviews) { + const averageRating = + reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length; + let stars = ""; + for (let i = 0; i < 5; i++) { + if (i < averageRating) { + stars += ''; + } else { + stars += ''; + } + } + return stars; +} From e34a80267e16bb456e73a15fb616bc4bfca9fd93 Mon Sep 17 00:00:00 2001 From: "Keerthivasan (Keerthivasan S V) Venkitajalam" Date: Mon, 23 Dec 2024 01:41:59 +0530 Subject: [PATCH 3/6] Updated catalog.css to cater various screen sizes and few modifications. Added tweaks in the styling of div.pro to make it more rounded and occupy less space and made the page responsive across devices --- CSS files/catalog.css | 375 ++++++++++++++++++++++-------------------- 1 file changed, 199 insertions(+), 176 deletions(-) diff --git a/CSS files/catalog.css b/CSS files/catalog.css index 86eccf1..d50c7cd 100644 --- a/CSS files/catalog.css +++ b/CSS files/catalog.css @@ -1,11 +1,12 @@ -body{ +body { font-family: "Poppins"; } -.sec1{ + +.sec1 { padding: 30px 160px; } -#product1 .c-container{ +#product1 .c-container { display: flex; justify-content: space-between; padding: 20px 0px 60px 0px; @@ -13,10 +14,11 @@ body{ float: left; } -#product1{ +#product1 { text-align: center; } -#product1 .pro{ + +#product1 .pro { width: 23%; min-width: 250px; padding: 10px 12px; @@ -27,62 +29,61 @@ body{ margin: 15px 0; transition: 0.2s ease; position: relative; - padding: 40px 40px; background-color: #f3e7ae; } -#product1 .pro:hover{ +#product1 .pro:hover { box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.06); } -#product1 .pro img{ +#product1 .pro img { width: 100%; border-radius: 20px; } -#product1 .pro .description{ +#product1 .pro .description { text-align: start; padding: 10px 0; } -#product1 .pro .description span{ +#product1 .pro .description span { color: black; font-size: 20px; text-decoration: solid; text-align: center; } -#product1 .pro .description h2{ +#product1 .pro .description h2 { padding-top: 2px; color: #1a1a1a; font-size: 14px; } -#product1 .pro .description i{ +#product1 .pro .description i { font-size: 16px; color: rgb(243, 181, 25); } -body{ + +body { margin: 0px; } -.tags_div{ - padding-bottom:3px; - display: flex; - gap:5px; - +.tags_div { + padding-bottom: 3px; + display: flex; + gap: 5px; } -.tag{ - background-color: rgba(255,229,91,61%); - padding:2px 4px; + +.tag { + background-color: rgba(255, 229, 91, 61%); + padding: 2px 4px; text-align: center; color: black; border-radius: 2px; font-family: "Poppins"; } - -#product1 .pro .basket{ +#product1 .pro .basket { width: 40px; height: 40px; line-height: 40px; @@ -94,28 +95,26 @@ body{ position: absolute; right: 10px; bottom: 20px; - right: 20px; - } -*{ +* { scroll-behavior: smooth; - } - body { +} + +body { background-color: #F7F3EF; margin: 0px; cursor: none; - } - - #navbar{ - position: fixed; - padding: 30px 50px 0px 70px; - display: flex; - z-index: 1; - - } - - .logo{ +} + +#navbar { + position: fixed; + padding: 30px 50px 0px 70px; + display: flex; + z-index: 1; +} + +.logo { margin-right: 170px; width: 300px; height: 100px; @@ -123,152 +122,176 @@ body{ background-size: 60%; background-repeat: no-repeat; margin-top: 15px; - } - - ul{ - display: flex; - gap:70px; - justify-content: space-around; - } - #navbar{ +} + +ul { + display: flex; + gap: 70px; + justify-content: space-around; +} + +#navbar { transition: all 300ms ease; - } - - #navbar li{ - list-style: none; - } - - #navbar a{ - font-weight: 600; - font-size: 1.5rem; - font-family: 'Poppins'; - color: black; - text-decoration: none; - transition: all 400ms ease; +} + +#navbar li { + list-style: none; +} + +#navbar a { + font-weight: 600; + font-size: 1.5rem; + font-family: 'Poppins'; + color: black; + text-decoration: none; + transition: all 400ms ease; border-radius: 15px; - } - #navbar a:hover { +} + +#navbar a:hover { background-color: white; padding: 0.86rem 1.51rem; - - } - #con{ - background-color: #ffe55b; - padding: 10px 20px; - border-radius: 13px; - } - /*==================================================================*/ - .circle { - height: 12px; - width: 12px; - border-radius: 12px; - background-color: black; - position: fixed; - - top: 0; - left: 0; - pointer-events: none; - z-index: 99999999; /* so that it stays on top of all other elements */ - } +} - a{ - text-decoration: none; - color: black; - } +#con { + background-color: #ffe55b; + padding: 10px 20px; + border-radius: 13px; +} - .image-container { - position: relative; - display: inline-block; - } - - .overlay-text { - position: absolute; - top: 0; - left: 0; - width: 94%; - height: 94%; - background-color: rgba(255, 255, 255, 0.2); /* Almost transparent white background */ - color: #ffffff; - text-decoration: solid; - padding: 10px; - opacity: 0; - transition: opacity 0.3s ease-in-out; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - } - .image-container:hover img { - opacity: 0.7; /* Change the opacity of the image when hovered */ - } - - .image-container:hover .overlay-text { - opacity: 1; /* Display the text when the container is hovered */ - } - - .moving-text { - overflow: hidden; - } - - .moving-text span { - display: inline-block; - white-space: nowrap; - animation: marquee 10s linear infinite; - } - - @keyframes marquee { - 0% { +/*==================================================================*/ +.circle { + height: 12px; + width: 12px; + border-radius: 12px; + background-color: black; + position: fixed; + top: 0; + left: 0; + pointer-events: none; + z-index: 99999999; /* so that it stays on top of all other elements */ +} + +a { + text-decoration: none; + color: black; +} + +.image-container { + position: relative; + display: inline-block; +} + +.overlay-text { + position: absolute; + top: 0; + left: 0; + width: 94%; + height: 94%; + background-color: rgba(255, 255, 255, 0.2); /* Almost transparent white background */ + color: #ffffff; + text-decoration: solid; + padding: 10px; + opacity: 0; + transition: opacity 0.3s ease-in-out; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.image-container:hover img { + opacity: 0.7; /* Change the opacity of the image when hovered */ +} + +.image-container:hover .overlay-text { + opacity: 1; /* Display the text when the container is hovered */ +} + +.moving-text { + overflow: hidden; +} + +.moving-text span { + display: inline-block; + white-space: nowrap; + animation: marquee 10s linear infinite; +} + +@keyframes marquee { + 0% { transform: translateX(100%); - } - - 100% { - transform: translateX(-100%); - } } - - - footer{ - background-color: black; - padding: 30px; - text-align: center; - color: white; - } - .footer{ - padding: auto 30px; - justify-content: center; - justify-items: center; - padding:30px; - display: flex; - gap:200px; - } - - .logos{ - display: flex; - } - .logos img{ - width:40px; - height:40px; - } - - footer h2{ - font-size: 1rem; - color:white; - font-family: "Poppins"; - font-weight: 200; - margin: 0; - text-align: center; + + 100% { + transform: translateX(-100%); } - html, body { - height: 100%; - margin: 0; - padding: 0; +} + +footer { + background-color: black; + padding: 30px; + text-align: center; + color: white; +} + +.footer { + padding: auto 30px; + justify-content: center; + justify-items: center; + padding: 30px; + display: flex; + gap: 200px; +} + +.logos { + display: flex; +} + +.logos img { + width: 40px; + height: 40px; +} + +footer h2 { + font-size: 1rem; + color: white; + font-family: "Poppins"; + font-weight: 200; + margin: 0; + text-align: center; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; +} + +.content { + flex: 1; +} + +/* Media Queries for Responsive Design */ +@media (max-width: 1200px) { + #product1 .pro { + width: 30%; } - - body { - display: flex; - flex-direction: column; +} + +@media (max-width: 992px) { + #product1 .pro { + width: 45%; } - - .content { - flex: 1; +} + +@media (max-width: 768px) { + #product1 .pro { + width: 100%; } +} From f4910176b6f36fae0388957ddb54b5d8516aff80 Mon Sep 17 00:00:00 2001 From: "Keerthivasan (Keerthivasan S V) Venkitajalam" Date: Mon, 23 Dec 2024 13:41:11 +0530 Subject: [PATCH 4/6] Updated catalog.css with Heart icon instead of Basket and decreased space between cards --- CSS files/catalog.css | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/CSS files/catalog.css b/CSS files/catalog.css index d50c7cd..65e43af 100644 --- a/CSS files/catalog.css +++ b/CSS files/catalog.css @@ -26,12 +26,14 @@ body { border-radius: 25px; cursor: pointer; box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.02); - margin: 15px 0; + margin: 20px 0; transition: 0.2s ease; position: relative; + padding: 45px 45px; background-color: #f3e7ae; } + #product1 .pro:hover { box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.06); } @@ -84,17 +86,18 @@ body { } #product1 .pro .basket { - width: 40px; - height: 40px; - line-height: 40px; - border-radius: 50px; - background-color: #e8f6ea; - font-weight: 500; - color: #088178; - border: 1px solid #cce7d0; + font-size: 36px; + color: #ff4d4d; position: absolute; right: 10px; bottom: 20px; + cursor: pointer; + transition: color 0.3s ease, transform 0.3s ease; +} + +#product1 .pro .basket:hover { + color: #ff1a1a; + transform: scale(1.1); } * { From ebc92c5c8f9b57a32b2d05ae61f5c00941722e17 Mon Sep 17 00:00:00 2001 From: "Keerthivasan (Keerthivasan S V) Venkitajalam" Date: Mon, 23 Dec 2024 13:42:03 +0530 Subject: [PATCH 5/6] Updated catalog.js with space between rating stars --- JS files/catalog.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/JS files/catalog.js b/JS files/catalog.js index 01a011d..282fbb5 100644 --- a/JS files/catalog.js +++ b/JS files/catalog.js @@ -33,7 +33,7 @@ document.addEventListener("DOMContentLoaded", function () { - + `; @@ -56,10 +56,10 @@ function generateStars(reviews) { let stars = ""; for (let i = 0; i < 5; i++) { if (i < averageRating) { - stars += ''; + stars += ' '; } else { - stars += ''; + stars += ' '; } } - return stars; + return stars.trim(); } From d181dc65d1613294dbeabf1e0db5e834c80d5e26 Mon Sep 17 00:00:00 2001 From: "Keerthivasan (Keerthivasan S V) Venkitajalam" Date: Mon, 23 Dec 2024 13:43:06 +0530 Subject: [PATCH 6/6] A typo fix in "id": "2" --- recipes.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes.json b/recipes.json index ae877e5..53f3d7a 100644 --- a/recipes.json +++ b/recipes.json @@ -59,7 +59,7 @@ "name": "Indonesian Chicken Noodles", "image": "images/recipiepage/noodles.jpg", "description": "This soup is brimming with a rich symphony of flavours from aromatic ingredients like ginger, garlic, shallots, and turmeric, lending it a unique colour and flavour profile. Mixed with noodles, potatoes, and a variety of veggies, this combination results in a delicious, filling soup that everyone can enjoy.", - "time": "40 minutes", + "time": "40 mins", "servings": "1 serving", "difficulty": "Easy", "ingredients": [