Dark/Light theme QR Code Challenge

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 11 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 helpful

  2

  ---

  

  Ritika Agrawal•170

  @Ritika-Agrawal811Posted 11 months ago

  Thank 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

  

  T

  Grace•31,090

  @grace-snowPosted 11 months ago

  Well 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
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 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

  ---

  

  Ritika Agrawal•170

  @Ritika-Agrawal811Posted 11 months ago

  Thanks so much @danielmrz-dev

  1
• 

  Yousef•90

  @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 Agrawal•170

  @Ritika-Agrawal811Posted 11 months ago

  Hey @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

  

  Yousef•90

  @ousey-ouseyPosted 11 months ago

  aha 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
• 

  Yousef•90

  @ousey-ouseyPosted 11 months ago

  Hello it's amazing ! do you use html , CSS , JavaScript (vanilla) only ?

  0

  ---

  

  Ritika Agrawal•170

  @Ritika-Agrawal811Posted 11 months ago

  Hey @ousey-ousey, for this challenge I used those only.

  I know ReactJS and Tailwind CSS too which I will practice with other challenges.

  0