From 8ea4f58492f48f379289377ba9921150294d7bfa Mon Sep 17 00:00:00 2001 From: Avansh2006 Date: Wed, 2 Oct 2024 12:07:26 +0530 Subject: [PATCH] Issue#58 --- assets/css/style.css | 32 ++++++++++++++++++- assets/js/script.js | 74 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 32 ++++++++++++++----- 3 files changed, 129 insertions(+), 9 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..60f39bf 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -541,6 +541,17 @@ body.nav-active { overflow: hidden; } /*-----------------------------------*\ #HEADER \*-----------------------------------*/ +.cart-icon{ + display: flex; + gap: 10px; + cursor: pointer; +} +span#cart-count { + transform: translateY(8px); +} +i.fas.fa-shopping-cart { + transform: translateY(15px); +} .header .btn { display: none; } @@ -708,7 +719,26 @@ body.nav-active { overflow: hidden; } opacity: 1; pointer-events: all; } - +cart-icon{ + display: flex; + gap: 10px; + cursor: pointer; +} +span#cart-count { + transform: translateY(8px); +} +i.fas.fa-shopping-cart { + transform: translateY(15px); +} +.cart-btn{ + transform: translate(75rem,-13px); + } + button.cart-btn { + font-size: 2rem; + background-color: rgb(46, 41, 41); + color: rgb(182, 169, 169); + height: 0px; + } diff --git a/assets/js/script.js b/assets/js/script.js index 6403e32..e5ab787 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,4 +1,78 @@ +const cartCountElement = document.getElementById('cart-count'); +const cartButtons = document.querySelectorAll('.cart-btn'); +let cart = {}; + +function updateCartCount() { + const itemCount = Object.keys(cart).length; + cartCountElement.textContent = itemCount; +} + +cartButtons.forEach(button => { + button.addEventListener('click', () => { + const dishId = button.getAttribute('data-id'); + + if (cart[dishId]) { + delete cart[dishId]; + button.textContent = 'Add to Cart'; + } else { + cart[dishId] = true; + button.textContent = 'Remove from Cart'; + } + + updateCartCount(); + }); +}); +document.getElementsByClassName('cart-icon')[0].addEventListener('click',()=> { + // Open a new window + const newWindow = window.open('', '_blank', 'width=600,height=400'); + + // Add HTML content to the new window + newWindow.document.write(` + + + Your Cart + + + + +

Your Cart

+
  • +
    + +
    + Greek Salad +
    + +
    + +
    +

    + Greek Salad +

    + + Seasonal + + $25.50 +
    + +

    + Tomatoes, green bell pepper, sliced cucumber onion, olives, and feta cheese. +

    + +
    + +
    +
    • + + + `); + + newWindow.document.body.appendChild(newDiv); + // Focus on the new window + newWindow.focus(); +}); /** * PRELOAD * diff --git a/index.html b/index.html index e97ba51..f96f6e7 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ - custom css link --> +