Design comparison
Solution retrospective
Hi!👋
There is my first Junior project. The project was quite nice. In JS I decided to use switch, maybe there is a better way but it was the fastest for me.
Would be great to hear some feedback from you! 😀
Community feedback
- @grace-snowPosted over 3 years ago
Hi,
This looks great but is not accessible at the moment. See if you can fix that by making sure labels and titles aren't empty. Do some research, try navigating by keyboard and run a screenreader over it if you can (NVDA is free on Windows, voiceover on mac, or all modern phones have screenreaders in accessibility settings). Trying this out with components like these (inputs, toggles) is absolutely the best way to learn. You'll realise the importance of good labelling and focus states really quickly
Theres a few ways to code a toggle component, but my preference for this would definitely be to use two radio inputs in a fieldset - there are two labels and one is always selected so it is a radio ui really even if it looks like a toggle.
Hope this helps!
1 - @pikapikamartPosted over 3 years ago
Hey, great work on this one, the slider functions well and the layout both in desktop and mobile is good. No issue when resizing.
I suggest adding a
padding-bottom
to yourbody
tag so that your component will not touched the flooring of the viewport which is doing right now. So adding that will be awesome.Also adding that background in the input slider will be awesome. You can check out mine to see how I did that color thing.
But still, you did a good job in here^^
1@fytrwPosted over 3 years agoThank you very much for your comments. I added padding-bottom to body(before padding-bottom was only in orientation portrait). I forgot to add background-image to slider in mozilla pseudo-element, now should works in all browsers.
0
Please log in to post a comment
Log in with GitHubJoin 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