Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Página de produto para Loja Virtual, com Bootstrap e Modal

@Edval6

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

David 120

@ASVN2

Posted

You can fix one problem between these I sow that one when you click on the small image of product it's active but the previous one it's still active to you can fix that by remove the active class from all when you click and add it on the clicked on the clicked on it

------------------------Code-----------

// array of small under in perview images

const smallImages = document.querySelectorAll(".image img");

// here you just for on the image and active the one that clicked smallImages.forEach((image) => { image.addEventListener("click", () => { image.classList.add("active"); }); });

// the same but here we will remove the active from the prev one smallImages.forEach((image) => { image.addEventListener("click", () => { smallImages.forEach((image) => { image.classList.remove("active"); }); image.classList.add("active"); }); });

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord