FINALLY INPUT ECOMMERCE-PRODUCT-PAGE-MAIN

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"
})

});

``

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.

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