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

Pricing items with JS toggle button

Marta 630

@martam90

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello,

I would appreciate if you leave any comment about my code. Thank you!

Community feedback

Abhik 4,840

@abhik-b

Posted

Hi Marta , your solution is amazing 🎉, it works great and it is responsive enough 🔥 , hover transitions work nicely !

** Just some opinions : **

  • please give max-width to the main__container so that it does not become too wide on large screens
  • instead of afor loop you can use forEach to reduce your code:
btnToggle.addEventListener('click', () => {
    btnToggle.classList.toggle('active');
    containers.forEach(container=>{
           container.classList.toggle('active-mode');
    }
});

Overall it works great , Happy coding 😇 & Keep contributing these amazing solutions 🚀

2

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