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

Samuel Palaciosโ€ข 615

@samuelpalaciosdev

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


Heyโœจ hope everyone is well!. Any feedback will be appreciated๐Ÿ’™

Community feedback

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

Hi, Samuel Palacios! ๐Ÿ‘‹

Nice to see you complete another challenge! ๐Ÿ˜€ Great job on this challenge! ๐Ÿ‘ Your solution looks good and the toggle-switch works well! ๐Ÿ‘

I only suggest adding some outlines to the toggle-switch and the buttons on the page so that keyboard users can easily tell when those elements are tabbed to. ๐Ÿ˜‰

Keep coding (and happy coding, too)! ๐Ÿ˜

2

Samuel Palaciosโ€ข 615

@samuelpalaciosdev

Posted

Hey there!

Thank you for your feedback, keep happy coding too๐Ÿ’›

0
P
Daveโ€ข 5,245

@dwhenson

Posted

This is a lovely solution! Great work. One other suggestion is to perhaps try and improve the experience for screenreaders?

I'm not 100% sure how, but it would be nice if the toggle announced what was being toggled so that people could tell the difference. At the minute I just hear "checked" and "unchecked". I'm going to re-do my solution over the next few days and see if I can get this sorted though!

But I really like the way you have structured your HTML and CSS on this challenge. I might copy some over to mine when I re-do it!!

Cheers!

1

Samuel Palaciosโ€ข 615

@samuelpalaciosdev

Posted

Hey there!

What a great compliment,I will be waiting for your solution ;). Thank you for your feedback๐Ÿ’™

0
P
Daveโ€ข 5,245

@dwhenson

Posted

@samuelpalaciosdev I tried to improve things with radio buttons rather than a checkbox. Not altogether successful though. My attempt is here:https://www.frontendmentor.io/solutions/updated-toggle-switch-EkMLoY-Bd

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