https://github.com/morrismagic/html1

https://github.com/morrismagic/html1

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/morrismagic/html1
• Owner: MorrisMagic
• Created: 2024-09-18T13:35:22.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-18T13:36:48.000Z (about 2 months ago)
• Last Synced: 2024-10-06T19:08:59.288Z (about 1 month ago)
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    

    

    

    Shopping Cart

    


        


            
Item 1

            -

            1

            +

            ❤️

            Remove

            $20

        

        


            
Item 2

            -

            1

            +

            ❤️

            Remove

            $15

        

        
Total: $35

    

    


document.addEventListener('DOMContentLoaded', () => {

    const cartItems = document.querySelectorAll('.cart-item');

    cartItems.forEach(item => {

        const priceElement = item.querySelector('.price');

        const quantityElement = item.querySelector('.quantity');

        const increaseButton = item.querySelector('.increase');

        const decreaseButton = item.querySelector('.decrease');

        const removeButton = item.querySelector('.remove');

        const likeButton = item.querySelector('.like');

        increaseButton.addEventListener('click', () => {

            let quantity = parseInt(quantityElement.textContent);

            quantity++;

            quantityElement.textContent = quantity;

            updateTotal();

        });

        decreaseButton.addEventListener('click', () => {

            let quantity = parseInt(quantityElement.textContent);

            if (quantity > 1) {

                quantity--;

                quantityElement.textContent = quantity;

                updateTotal();

            }

        });

        removeButton.addEventListener('click', () => {

            item.remove();

            updateTotal();

        });

        likeButton.addEventListener('click', () => {

            likeButton.classList.toggle('liked');

            likeButton.textContent = likeButton.classList.contains('liked') ? '❤️' : '🤍';

        });

    });

    function updateTotal() {

        let total = 0;

        cartItems.forEach(item => {

            const price = parseFloat(item.dataset.price);

            const quantity = parseInt(item.querySelector('.quantity').textContent);

            total += price * quantity;

        });

        document.getElementById('total').textContent = `Total: $${total}`;

    }

});

body {

    font-family: Arial, sans-serif;

}

#cart {

    width: 300px;

    margin: auto;

}

.cart-item {

    border: 1px solid #ccc;

    padding: 10px;

    margin-bottom: 10px;

}

button {

    margin: 0 5px;

}

.liked {

    color: red;

}