All solutions

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

I was definitely very happy finishing the project with only pure technologies, that is, pure JavaScript, HTML and CSS. Although if I had used frameworks like Bootstrap and JQuery, my life would have been much easier. 😅

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

It was creating the system logic. I can say that I struggled a lot to implement the logic to work, I had so many errors that I got to the point where I thought responsiveness was easier than creating this node system.

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

I don't have any idea to resolve my problem code. I searchet by Google, Chatgpt, and incredible Gemini. But all this not help my problem cause when i start my code in my homer desktop, the code runs perfectly but when i test it in Vercel nothing happens. If anyone knows how to resolve this, please comment!!!

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.

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

What I'm most proud of was having made this design using bootstrap, because I know that if I don't use it, it would take a month to finish this project. Surely if I were to do another project I will use ChatGPT to consult.

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

My biggest challenge was to put the content organized in the right and left panels, in addition to their responsiveness.

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

To begin with, one of the things I'm proud of was having put jQuery into play, because I know that if I use pure JavaScript, I would spend more than 2 days coding to put animation. I say with all my might that I spent the whole afternoon doing this disgrace of responsiveness. For sure next time I will research more about the topic.

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

Surely this responsiveness is the damn line underneath the h3. There were hundreds of ways to do this, but for me it worked to put them inside a div .subtitle-container

          What is Frontend Mentor, and how will it help me?
          
        
        
          Frontend Mentor offers realistic coding challenges to help developers improve their
          frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for
          all levels and ideal for portfolio building.
        
      

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

The main challenges I felt during the project were aligning the objects in the center of the screen. At the beginning of the project, I only applied pure HTML and CSS, but later I managed to implement the bootstrap language, which made the process easier.