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

@pierre-pellegrino

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


It was fun to make the toggle button controllable with arrow keys.

Community feedback

P
j5 2,290

@jmnyarega

Posted

This is amazing work @PierreWagon.

The only issue is the lack of focus styles on the toggle - but you could easily fix that by adding styling to the labels when the focus is on radio input. You can easily do that with :focus-within

Nice work.

Marked as helpful

1

@pierre-pellegrino

Posted

@jmnyarega Oops you're right I forgot doing it ! I'll be working on it and updating it ASAP ! Thanks a lot for your comment and advice !

0

@Mattvp21

Posted

The arrow buttons are a cool touch! Good job! Lol no worries about the checkbox, I did the same kind of thing on mine :)

1

@pierre-pellegrino

Posted

@Mattvp21 Thank you ! Haha yes I had no idea how to do it by myself !

0
Roman Zvir 290

@rmzvr

Posted

oh good job, i like it)

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