FINALLY INPUT ECOMMERCE-PRODUCT-PAGE-MAIN

What are you most proud of, and what would you do differently next time?

It was to have made the functionality of adding the cart and deleting it.

const cartIcon = document.getElementById("cartIcon"); const cartCard = document.getElementById("cartCard"); const cartText = document.querySelector(".cart-text") const quantityInput = document.getElementById("quantity"); const btnBuy = document.querySelector(".btn-buy"); const cartItem = document.querySelector(".cart-item"); const cartPrice = document.querySelector(".cart-price") const cartNumbers = document.querySelector(".cart-numbers") const btnCheckout = document.querySelector(".btn-checkout") ``cartIcon.addEventListener("click", function () { if (cartCard.style.display === "none" || cartCard.style.display === "") { cartCard.style.display = "block"; } else { cartCard.style.display = "none"; } }); document.addEventListener("click", function (event) { if (!cartIcon.contains(event.target) && !cartCard.contains(event.target)) { cartCard.style.display = "none"; } }); productImage.addEventListener("click", function () { modal.style.display = "block"; });

closeModal.addEventListener("click", function () {
    modal.style.display = "none";
});

window.addEventListener("click", function (event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
});

window.increment = function () {
    var quantity = document.getElementById("quantity");
    quantity.value = parseInt(quantity.value) + 1;
};

window.decrement = function () {
    var quantity = document.getElementById("quantity");
    if (parseInt(quantity.value) > 0) {
        quantity.value = parseInt(quantity.value) - 1;
    }
};

window.addToCard = function () {
    const quantity = parseInt(quantityInput.value)
    if (quantity > 0) {
        const pricePerItem = 125.00;
        const totalPrice = pricePerItem * quantity;

        cartText.style.display = "none"

        cartItem.style.display = "block"
        btnCheckout.style.display = "block"

        cartNumbers.textContent = quantity
        cartPrice.textContent = `$${totalPrice.toFixed(2)}`

        circleResult.textContent = quantity
        circleResult.style.display = "block"
        circleResult.style.textAlign = "center"
        circleResult.style.fontSize = "10px"
        circleResult.style.fontWeight = "bold"
    }
}

btnBuy.addEventListener("click", addToCard)

deleteIcon.addEventListener("click", function () {
    cartItem.style.display = "none"
    btnCheckout.style.display = "none"
    cartText.style.display = "flex"
    circleResult.style.display = "none"
})

});

``

What challenges did you encounter, and how did you overcome them?

THE LIGHTBOX FEATURE I know perfectly well that the code is not clean. But I swear I tried everything to finish my last feature, which is when I click on the main image: image-product-1.jpg, the transparent window of the product appears. I'm dumb for using pure HTML CSS and JS, despite having used Bootstrap, I found it very difficult to do this last feature.

What specific areas of your project would you like help with?

PLEASE if someone can make the project working using JS, without a framework, send a suggestion message.