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

Crowdfunding product page with scss and vanilla js

@bastiman85

Desktop design screenshot for the Crowdfunding product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is welcome. Especially the JS.

Community feedback

Karim• 590

@Galielo-App

Posted

Hello, Sebastian!

Awesome build, just a few things about your js:

  • For loops are ok, but in javascript we really like using forEach and map, look at this example:
//your for loop
  for (i = 0; i < radios.length; i++) {
     radios[i].addEventListener("change", openPledge);
  }
//with forEach
  radios.forEach(radio => radio.addEventListener("change", openPledge))

Trust me, this will make your code easier to write, read and maintain.

  • You don't need a openMenu() and a closeMenu(), u can use toggle and have a compacted, quality code. Look:
  function handleMenu() {
      document.querySelector(".nav-list").classList.**toggle**("open");
     document.body.classList.**toggle**("overlay");

     mobileMenu.childNodes[0].src = "./images/icon-close-menu.svg" ? "./images/icon-hamburger.svg"  :  "./images/icon-close-menu.svg";
  }

For any question or suggestion feel free to ask :)

Upvote my comment if I was helpful and happy coding :)

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