Design comparison
Solution retrospective
Hey everyone! I completed another challenge - QR code component!
I tried to add dark/light mode and created a toggle to switch between the themes. I added local storage support also to not lose theme on page reload.
I found it very difficult to select colors on dark mode. Would love to know your inputs on it and any way I can improve my code!
Community feedback
- @grace-snowPosted 12 months ago
I'm afraid the theme toggle is completely inaccessible. It's fine to try and extend these challenges but not at the expense of essential accessibility. Look up how to fix it and have a go. The html needs to change the most but also the design.
Another critical accessibility issue is writing font size in px, which is an immediate WCAG failure, and especially bad when used on the html selector. By doing that you've made it impossible for people to adjust the text size. Why font-size must never be in px
Thirdly, media queries need to be defined in rem or em not px so that a site can reflow correctly no matter what text size or viewport size is used.
Marked as helpful2@Ritika-Agrawal811Posted 12 months agoThank you so much @grace-snow for going through my code and finding these errors!
I read the articles you linked and searched some more to write an accessible toggle button. I've corrected all the issues. Thanks again!
0@grace-snowPosted 11 months agoWell done, that looks nice @Ritika-Agrawal811
I'm not sure the button label is ideal but you've sparked me into going and researching that as I'm genuinely not sure what the best button label would be
1 - @danielmrz-devPosted 12 months ago
Hello @Ritika-Agrawal811!
Your project looks awesome!! I love it!
I think it's nice when people add their special touch to the projects!
Great job!
2 - @ousey-ouseyPosted 11 months ago
hello again so , I checked your site that give book and I noticed that the logo (your picture ) is draggable so try this
.element-class { user-drag: none; user-select: none; /* Optional: Disable text selection / } or .element-class { -webkit-user-drag: none; -webkit-user-select: none; / Optional: Disable text selection */ }
1@Ritika-Agrawal811Posted 11 months agoHey @ousey-ousey
Are your talking about Gumroad? That's not something I built. It's platform where you can sell digital products. I made an account there to publish ebooks.
But thanks for this tip! Learnt about "user-drag" from it.
0@ousey-ouseyPosted 11 months agoaha so it is like WordPress ? I thought you made it I liked the button style and your book is amazing make more for free of course! hahhahahh happy coding! @Ritika-Agrawal811
1 - @ousey-ouseyPosted 12 months ago
Hello it's amazing ! do you use html , CSS , JavaScript (vanilla) only ?
0@Ritika-Agrawal811Posted 12 months agoHey @ousey-ousey, for this challenge I used those only.
I know ReactJS and Tailwind CSS too which I will practice with other challenges.
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