From 3b80c1d767760a316edbc5c98d6525686aed651c Mon Sep 17 00:00:00 2001 From: GarimaSingh0109 <130893914+GarimaSingh0109@users.noreply.github.com> Date: Tue, 28 May 2024 17:33:48 +0530 Subject: [PATCH 1/3] Update cart.html --- Html-files/cart.html | 55 +++++++++++++++++++++++++++----------------- 1 file changed, 34 insertions(+), 21 deletions(-) diff --git a/Html-files/cart.html b/Html-files/cart.html index e7fb9751..d245eaff 100644 --- a/Html-files/cart.html +++ b/Html-files/cart.html @@ -13,19 +13,33 @@ + +
-
@@ -33,18 +47,16 @@

C A R T

- -
-

Use coupon code qN6FVAn4 for 30% off!

- -
- +

Use coupon code qN6FVAn4 for 30% off!

+
+
+
- + @@ -59,13 +71,13 @@

C A R T

-
Item Name Price QuantityActionsActions
+ -
+ -
+
@@ -142,7 +154,8 @@

Follow Us

- + +

Stay connected with us on social media for the latest updates, recipes, and foodie adventures.

@@ -160,10 +173,10 @@

Follow Us

- + - \ No newline at end of file + From 7f8b6ce2cdee3edcac2d9939d03102c73b14164a Mon Sep 17 00:00:00 2001 From: GarimaSingh0109 <130893914+GarimaSingh0109@users.noreply.github.com> Date: Tue, 28 May 2024 17:34:19 +0530 Subject: [PATCH 2/3] Update cart.js --- Html-files/cart.js | 192 ++++++++++++++++++++++++++------------------- 1 file changed, 110 insertions(+), 82 deletions(-) diff --git a/Html-files/cart.js b/Html-files/cart.js index 9b5a78c0..791f482c 100644 --- a/Html-files/cart.js +++ b/Html-files/cart.js @@ -1,105 +1,133 @@ -//CODE FOR TABLE OF ADD TO CART -document.addEventListener('DOMContentLoaded', () => { - loadCartFromLocalStorage(); +document.addEventListener("DOMContentLoaded", () => { + loadCartFromLocalStorage(); - document.getElementById('cart-items').addEventListener('click', (event) => { - if (event.target.classList.contains('increase-quantity')) { - updateQuantity(event.target, 1); - } else if (event.target.classList.contains('decrease-quantity')) { - updateQuantity(event.target, -1); - } - }); + document.getElementById("cart-items").addEventListener("click", (event) => { + if (event.target.classList.contains("increase-quantity")) { + updateQuantity(event.target, 1); + } else if (event.target.classList.contains("decrease-quantity")) { + updateQuantity(event.target, -1); + } + }); + + document.getElementById("applyCouponButton").addEventListener("click", () => { + applyCoupon(); + }); }); function loadCartFromLocalStorage() { - const cartItems = JSON.parse(localStorage.getItem('cartItems')) || []; - const cartItemsContainer = document.getElementById('cart-items'); - cartItemsContainer.innerHTML = ''; // Clear existing items + const cartItems = JSON.parse(localStorage.getItem("cartItems")) || []; + const cartItemsContainer = document.getElementById("cart-items"); + cartItemsContainer.innerHTML = ""; // Clear existing items - cartItems.forEach(item => { - const cartItemRow = document.createElement('tr'); - cartItemRow.className = 'cart-item'; - cartItemRow.setAttribute('data-product-id', item.id); - cartItemRow.setAttribute('data-product-price', item.price); - cartItemRow.innerHTML = ` - ${item.name} - $${item.price.toFixed(2)} - ${item.quantity} - - - - - `; - cartItemsContainer.appendChild(cartItemRow); - }); + cartItems.forEach((item) => { + const cartItemRow = document.createElement("tr"); + cartItemRow.className = "cart-item"; + cartItemRow.setAttribute("data-product-id", item.id); + cartItemRow.setAttribute("data-product-price", item.price); + cartItemRow.innerHTML = ` + ${item.name} + $${item.price.toFixed(2)} + ${item.quantity} + + + + + `; + cartItemsContainer.appendChild(cartItemRow); + }); - updateTotal(); + updateTotal(); } function updateQuantity(button, change) { - const cartItemRow = button.parentElement.parentElement; - const quantityElement = cartItemRow.querySelector('.quantity'); - const newQuantity = parseInt(quantityElement.textContent) + change; - if (newQuantity > 0) { - quantityElement.textContent = newQuantity; - } else { - cartItemRow.remove(); - } - updateTotal(); - saveCartToLocalStorage(); + const cartItemRow = button.parentElement.parentElement; + const quantityElement = cartItemRow.querySelector(".quantity"); + const newQuantity = parseInt(quantityElement.textContent) + change; + if (newQuantity > 0) { + quantityElement.textContent = newQuantity; + } else { + cartItemRow.remove(); + } + updateTotal(); + saveCartToLocalStorage(); } function updateTotal() { - const cartItems = document.querySelectorAll('.cart-item'); - let total = 0; - cartItems.forEach(item => { - const price = parseFloat(item.getAttribute('data-product-price')); - const quantity = parseInt(item.querySelector('.quantity').textContent); - total += price * quantity; - }); - document.getElementById('cart-total').textContent = `Total: $${total.toFixed(2)}`; + const cartItems = document.querySelectorAll(".cart-item"); + let total = 0; + cartItems.forEach((item) => { + const price = parseFloat(item.getAttribute("data-product-price")); + const quantity = parseInt(item.querySelector(".quantity").textContent); + total += price * quantity; + }); + document.getElementById("cart-total").textContent = `Total: $${total.toFixed( + 2 + )}`; } function saveCartToLocalStorage() { - const cartItems = []; - document.querySelectorAll('.cart-item').forEach(item => { - cartItems.push({ - id: item.getAttribute('data-product-id'), - price: parseFloat(item.getAttribute('data-product-price')), - quantity: parseInt(item.querySelector('.quantity').textContent) - }); + const cartItems = []; + document.querySelectorAll(".cart-item").forEach((item) => { + cartItems.push({ + id: item.getAttribute("data-product-id"), + price: parseFloat(item.getAttribute("data-product-price")), + quantity: parseInt(item.querySelector(".quantity").textContent), }); - localStorage.setItem('cartItems', JSON.stringify(cartItems)); -} -//CODE FOR COUPON RECEIVED ON CLICKING ORDER NOW - // Function to generate a random coupon code - const generateCouponCode = () => { - const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - let couponCode = ''; - for (let i = 0; i < 8; i++) { - couponCode += characters.charAt(Math.floor(Math.random() * characters.length)); - } - return couponCode; + }); + localStorage.setItem("cartItems", JSON.stringify(cartItems)); } + +// Function to generate a random coupon code +const generateCouponCode = () => { + const characters = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + let couponCode = ""; + for (let i = 0; i < 8; i++) { + couponCode += characters.charAt( + Math.floor(Math.random() * characters.length) + ); + } + return couponCode; +}; + // Check if it's the user's first order and apply discount const applyFirstTimeDiscount = () => { - let couponCode = localStorage.getItem('couponCode'); - if (!couponCode) { - couponCode = generateCouponCode(); - localStorage.setItem('couponCode', couponCode); - } - document.getElementById('couponCode').innerHTML = `Use coupon code ${couponCode} for 30% off!`; - alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`); -} + let couponCode = localStorage.getItem("couponCode"); + if (!couponCode) { + couponCode = generateCouponCode(); + localStorage.setItem("couponCode", couponCode); + } + document.getElementById( + "couponCode" + ).innerHTML = `Use coupon code ${couponCode} for 30% off!`; + alert( + `Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.` + ); +}; window.onload = applyFirstTimeDiscount; +// Function to apply the coupon and display the discounted price +function applyCoupon() { + const couponCode = document.getElementById("inputCode").value; + const storedCouponCode = localStorage.getItem("couponCode"); -// Input for apply coupon code + if (!couponCode) { + alert("Please enter a Coupon Code."); + return; + } -document.getElementById('applyCouponButton').addEventListener('click', function() { - const couponCode = document.getElementById('inputCode').value; - if (!couponCode) { - alert('Please enter a Coupon Code.'); - return; - } -}); + if (couponCode === storedCouponCode) { + let total = parseFloat( + document.getElementById("cart-total").textContent.replace("Total: $", "") + ); + const discount = total * 0.3; + const discountedTotal = total - discount; + + document.getElementById( + "cart-total" + ).textContent = `Total: $${discountedTotal.toFixed(2)} (30% off applied)`; + alert("Coupon code applied successfully! You've received a 30% discount."); + } else { + alert("Invalid coupon code. Please try again."); + } +} From 1321e40a0b4da9c5b69facd9c2089e925815b2bf Mon Sep 17 00:00:00 2001 From: GarimaSingh0109 <130893914+GarimaSingh0109@users.noreply.github.com> Date: Tue, 28 May 2024 17:35:15 +0530 Subject: [PATCH 3/3] Update content.css --- Css-files/content.css | 328 +++++++++++++++++++++++++++++------------- 1 file changed, 228 insertions(+), 100 deletions(-) diff --git a/Css-files/content.css b/Css-files/content.css index b9b6a58f..485b3f1b 100644 --- a/Css-files/content.css +++ b/Css-files/content.css @@ -4,7 +4,7 @@ } body { - background-color:black; + background-color: black; } .head_container:before { @@ -15,11 +15,10 @@ body { width: 100%; opacity: 0.4; z-index: -1; - } -.head_container_service{ - height:500px; +.head_container_service { + height: 500px; } .head_container_service:before { background-image: url(https://cdn.tasteatlas.com//images/toplistarticles/d0e6a0a79d5f4197a51f4ca065393ffe.jpg?mw=1300); @@ -29,7 +28,6 @@ body { width: 100%; opacity: 0.4; z-index: -1; - } .navbar { @@ -87,15 +85,14 @@ body { opacity: 0.7; } - .menu_container { padding: 55px 70px 30px 70px; - background-color: rgb(224, 224, 252); + background-color: rgb(224, 224, 252); } .menu_container h2 { - font-family: 'Oswald', sans-serif; + font-family: "Oswald", sans-serif; font-size: 2rem; - color:rgb(138, 37, 37); + color: rgb(138, 37, 37); padding-left: 50px; } .mainhead { @@ -181,6 +178,11 @@ body { margin-bottom: 20px; } +.menu_items .items:hover { + cursor: pointer; + scale: 1.02; +} + .first_cont { display: flex; justify-content: center; @@ -203,12 +205,11 @@ body { justify-content: center; height: 160px; width: 200px; - } .first_cont .items h3 { font-size: 1.2rem; - margin: 10px ; + margin: 10px; } .first_cont .items p { @@ -218,105 +219,118 @@ body { /* service */ .service_container { /* padding: 55px 70px 30px 70px; */ - background-color: rgb(224, 224, 252); + background-color: rgb(224, 224, 252); } -.second_cont{ +.second_cont { display: flex; padding: 40px; justify-content: center; } -.second_cont1{ +.second_cont1 { display: flex; padding: 0px 20px 100px 20px; justify-content: center; } -.deals{ +.deals { display: flex; background-color: white; border: 2px solid rgb(138, 37, 37); /* box-shadow: 0 0 10px rgba(138, 37, 37, 0.5); */ border-radius: 10px; - padding:15px 30px; - margin:20px 50px; + padding: 15px 30px; + margin: 20px 50px; } -.deals p{ +.deals p { font-size: 1.1rem; /* font-weight: bold; */ padding-top: 2px; font-family: "Bree Serif", serif; } -.deals i{ +.deals i { margin: 0px 10px; padding: 0px 10px; font-size: 2rem; } /* testimonal */ -.testimonalsection{ +.testimonalsection { padding-top: 400px; } -.testimonal__container{ +.testimonal__container { display: flex; padding: 3rem; } -.testimonal__card{ +.testimonal__card { text-align: center; - padding:2rem 3rem 2.5rem; - border:2px solid rgba(224, 224, 252, 0.678); - transition:border .4s,background-color .4s; + padding: 2rem 3rem 2.5rem; + border: 2px solid rgba(224, 224, 252, 0.678); + transition: border 0.4s, background-color 0.4s; background-color: white; box-shadow: 0 0 10px rgba(224, 224, 252, 0.678); border: 1px solid rgb(186, 186, 201); - padding:40px 30px ; + padding: 40px 30px; margin: 5px; - color:rgb(107, 107, 122); + color: rgb(107, 107, 122); } -.testimonal__image{ - width:100px; - height:100px; - border-radius:50%; - margin:0 auto 1.5rem; +.testimonal__image { + width: 100px; + height: 100px; + border-radius: 50%; + margin: 0 auto 1.5rem; } -.testimonal__title{ - margin-bottom: .75rem; +.testimonal__title { + margin-bottom: 0.75rem; } -.testimonal__description{ +.testimonal__description { margin-bottom: 1.25rem; } -.section__title{ +.section__title { text-align: center; font-size: 2rem; - color:rgb(58, 58, 66); + color: rgb(58, 58, 66); } /* footer */ -.foot-panel2{ - background-color: rgb(138, 37, 37); - color:white; - height: 300px; - display: flex; - justify-content: space-evenly; - /* margin-top: 50px; */ +.foot-panel2 { + background-color: rgb(138, 37, 37); + color: white; + height: 300px; + display: flex; + justify-content: space-evenly; + /* margin-top: 50px; */ } -.footer-colums{ - margin-top: 20px; +.footer-colums { + margin-top: 20px; } -.footer-colums p{ - font-weight: 700; +.footer-colums p { + font-weight: 700; } -.footer-colums a{ - display: block; - font-size: 0.85rem; - margin-top: 10px; - color: #dddddd; +.footer-colums a { + display: block; + font-size: 0.85rem; + margin-top: 10px; + color: #dddddd; + text-decoration: none; +} + +.footer-colums a { + display: block; + font-size: 0.85rem; + margin-top: 10px; + color: #dddddd; + text-decoration: none; } +.foot-panel2 ul a:hover { + text-decoration: underline; + color: #dddddd; +} /* .foot-pannel3{ background-color:rgb(66, 16, 16); color: white; @@ -326,53 +340,53 @@ body { justify-content: center; } */ -.foot_panel4{ - background-color: rgb(66, 16, 16); - color: white; - height: 160px; - font-size: 0.9rem; - text-align: center; +.foot_panel4 { + background-color: rgb(66, 16, 16); + color: white; + height: 160px; + font-size: 0.9rem; + text-align: center; } -.pages{ - padding-top: 25px; +.pages { + padding-top: 25px; } -.copyright{ +.copyright { background-color: rgb(66, 16, 16); - padding-top: 10px; + padding-top: 10px; } form { - padding-top: 20px; - display: grid; - /* gap: 10px; */ - padding-bottom: 100px; + padding-top: 20px; + display: grid; + /* gap: 10px; */ + padding-bottom: 100px; } label { - font-weight: bold; + font-weight: bold; } input, textarea { - height:30px; - width: 120%; - padding: 2.5px; - box-sizing: border-box; - border-radius: 2px; + height: 30px; + width: 120%; + padding: 2.5px; + box-sizing: border-box; + border-radius: 2px; } -#butt{ - background-color:rgb(66, 16, 16); - color: white; - border: 1px solid white ; - border-radius: 2px; - cursor: pointer; +#butt { + background-color: rgb(66, 16, 16); + color: white; + border: 1px solid white; + border-radius: 2px; + cursor: pointer; } #butt :hover { - background-color:rgb(196, 89, 89); + background-color: rgb(196, 89, 89); } .social-icons a { @@ -383,21 +397,21 @@ textarea { color: black; background-color: white; border-radius: 50%; - transition: .2s; + transition: 0.2s; } .fa-facebook:hover { - background-color: #3B5998; + background-color: #3b5998; color: white; } .fa-instagram:hover { - background-color: #D62976; + background-color: #d62976; color: white; } .fa-twitter:hover { - background-color: #00B6F1; + background-color: #00b6f1; color: white; } @@ -405,36 +419,103 @@ textarea { background-color: #040204; color: white; } - -/* Cart page styling */ -.cart-section{ - padding: 55px 70px 30px 70px; - background-color: rgb(224, 224, 252); +.cart-container { display: flex; + justify-content: space-between; + margin: 0 auto; +} + +.cart-container table { + width: 100%; justify-content: center; + border-collapse: collapse; +} + +.cart-container table th, +.cart-container table td { + padding: 10px; +} + +.cart-container table img { + width: 50px; + height: 50px; + object-fit: cover; +} + +.cart-total { + width: 30%; + padding: 20px; + margin-top: 20px; +} + +.cart-total p { + margin-bottom: 10px; +} + +.promo-code { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.promo-code label { + margin-right: 10px; +} + +#applyPromo { + padding: 5px 10px; + background-color: #333; + color: white; + cursor: pointer; +} + +#checkout { + background-color: #333; + color: white; + padding: 10px; + cursor: pointer; +} +/*Cart page styling */ +.cart-section { + display: flex; + background-color: rgb(229, 195, 244); + background-image: url(""); + justify-content: space-evenly; flex-wrap: wrap; } -.cart{ - width: 80%; - background-color: #f2f2f2; +.cart { text-align: center; font-family: "Bree Serif", serif; font-size: 1.2rem; display: flex; justify-content: center; - padding: 5%; + padding: 20px; } -.cart table,th,td{ +.cart table, +th, +td { + padding: 10px; + color: #040204; text-align: center; - border: 2px solid black; - width: 75%; + width: 100%; } -#bill{ +.decrease-quantity, +.increase-quantity { + cursor: pointer; + width: 30px; + background-color: rgb(138, 37, 37); + border: none; + color: white; + padding: 1px; + border-radius: 3px; +} +#bill { color: rgb(196, 74, 74); } + .star-button { background: none; border: none; @@ -458,7 +539,6 @@ textarea { /* Ensure relative positioning for the parent container */ } - /* Cart -> Input Section for Coupon Code */ #haveCoupon { @@ -490,14 +570,14 @@ textarea { } #inputCode:hover { - border: 2px solid #A52A2A; + border: 2px solid #a52a2a; } #applyCouponButton { width: 5rem; border-radius: 0.3rem; padding: 10px 20px; - background-color: #A52A2A; + background-color: #a52a2a; color: white; font-weight: bold; border: none; @@ -507,3 +587,51 @@ textarea { #applyCouponButton:hover { background-color: #a52a2ad7; } + +/* updated nav bar */ +nav { + height: 3rem; + background: #0000007c; +} +.navigbar { + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: center; + height: 3rem; + width: 95%; + margin: 0 auto; +} +.logo { + color: rgba(255, 183, 0, 0.705); + font-size: 1.2rem; + font-weight: 700; + font-family: "Poppins", sans-serif; +} +.ul1, +.ul2 { + display: flex; + gap: 20px; + list-style-type: none; + align-items: center; + flex: 1; /* Distribute remaining space equally */ + justify-content: center; /* Center items horizontally */ + margin: 0; /* Remove default margin */ + padding: 0; /* Remove default padding */ +} +.ul1 li a, +.ul2 li a { + color: white; + font-size: 1rem; + text-decoration: none; + text-align: center; +} +.ul1 li a:hover { + color: #f13800e4; +} +.ul2 li a:hover { + color: rgba(255, 183, 0, 0.705); +} +.cart { + color: white; +}