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 component with toggle using HTML, CSS & JS

@aLe3ouLa

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

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

You've done an awesome job on this challenge, Alexandra! It's great to see that you've managed to complete the Bonus as well by not adding JavaScript! 🥳

I'd be interested in hearing why you've got your media queries in a separate file. I'd usually recommend keeping them inside your main styles file.

Keep up the great work!

1

@aLe3ouLa

Posted

I used a little Javascript =)

It helps me in development, no specific reason. I have used to keep my files separate from my SASS 7-1 architecture I guess.

0

P
Matt Studdert 13,611

@mattstuddert

Posted

@aLe3ouLa ah yes, I missed the JS at the bottom of the HTML file! Nice work. You're using the general sibling selector (~) in your CSS which is great. One nice extra challenge would be to refactor your HTML code so that the general sibling selector can be used to toggle the display of the prices based on whether or not the input is :checked. This would mean you would actually be able to remove the JS altogether! 🙂

1

@aLe3ouLa

Posted

Your feedback is welcome!

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