Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

Ping single column coming soon (React + TailwindCSS + Dark/Light mode)

#accessibility#react#tailwind-css#vite
Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there ๐Ÿ‘‹, Iโ€™m Melvin and this is my solution for this challenge. ๐Ÿš€

I added:

  • ๐ŸŒ” Light and Dark mode
  • ๐Ÿ”ง Using localStorage to save theme preferences
  • ๐Ÿ”’ Form validation with react-hook-form
  • ๐Ÿ”” Notifications with react-toastify
  • ๐ŸŽจ Custom scrollbar

Built With:

  • React-JS
  • TailwindCSS
  • react-hook-form
  • react-toastify
  • Yarn - Vite

Any feedback on how I can improve and reduce unnecessary code is welcome!

Thank you. ๐Ÿ˜ŠโœŒ๏ธ

Community feedback

P
Graceโ€ข 27,870

@grace-snow

Posted

Nice solution, looks good

Iโ€™m not convinced that theme toggle is accessible, as there is no communication of what is active or what the label might be for voice users. Iโ€™d need to test that to know for sure

With the form itโ€™s great. Only issues are thereโ€™s no label I can see on that input, and no persistent div with aria-live on it wrapping the errors

Marked as helpful

2

@MelvinAguilar

Posted

@grace-snow Hello!. My apologies for the delay. I really appreciate the review of my solution. I just updated the code with your suggestions. I ended up changing the theme by using an input tag, If you have any other suggestions, please let me know and I'll be happy to make the necessary changes. ๐Ÿ˜Š

1
LilithNixxโ€ข 190

@LilithNixx

Posted

This is really impresive to me, you don't have a CSS file, and the HTML is so small... all the rest I don't understand at all. :D

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