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

flexbox, vanilla js

seruaJ 230

@FaideJaures

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

Solution retrospective


Cool challenge. I would like to know how to make the hidden menu and the cart disappear if you click outside. If you have something to say, tell me, the comments are here, thanks.

Community feedback

@isaac-svg

Posted

To close the modal when you click outside, add an event listener on the parent element and check if the element click contains the class class you gave to the parent. If it contains that class then you remove the class that shows the modal

EXAMPLE CODE

const removeModal = (e) => {

if (e.target.classList.contains("modal")) {

e.target.classList.remove("modal");

}

if (e.target.classList.contains("modal-close")) {

imagesContainer.classList.remove("modal");

}

};

END OF CODE

So you have to invoke this function anytime a user clicks on an element you desire that it closes a modal . You can keep on with the conditionals.

Marked as helpful

1

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