Todo App using HTML, SCSS and JS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi there, I think you're making life difficult for yourself the way you're doing the theme switching. That control could just toggle one class on the body in css and you then change everything else using the cascade in css. Either that one class could swap all your color variables / custom properties, or it could change the colors on all child items based on the presence of that parent class. This would be far simpler and give a nicer transition.

  Additionally, your theme switcher needs to be an interactive element with a label for assistive technology. I would probably make it into a checkbox, or use a button, but if you used a button you would need to change the aria-label on click to make clear what mode you are changing it to. It definitely needs to be an interactive element either way, so people like me can control it with keyboard.

  I haven't looked through all your code, but that's an important principle to remember when writing your html - interactive items need to be keyboard, mouse, touch and other assistive tech accessible. So it's best to use native html elements that have interactivity built into them if possible.

  Good luck with all that

  1

  ---

  

  Olaleye Blessing•355

  @Olaleye-BlessingPosted almost 4 years ago

  @grace-snow Thanks for your reply.

  Starting with changing theme, you meant I could just include dark class on my body and make everything else operates on .dark elem? I'm sorry for late reply.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @Olaleye-Blessing you can change all color variables by wrapping them in your theme class, something like

  // root variables
  :root {
    --bg-color: #fff;
  ... 
  } 
  
  // dark theme variables
  .dark-theme {
    --bg-color: #000;
  ... 
  } 
  
  // variables used on elements will switch automatically
  .container {
    background-color: var(--bg-color);
  } 
  

  That's with css custom properties, but works the same with sass.

  0

  

  Olaleye Blessing•355

  @Olaleye-BlessingPosted almost 4 years ago

  @grace-snow I don’t think I read about css variables when I was studying css( I used MDN doc ).

  Could you recommend a resource for me? I would love to use it in my next practice.

  I’ve restarted this project and tried to implement what you said about using a class to switch the modes.

  0
• 

  Aleksandr Aksenov•750

  @axevldkPosted almost 4 years ago

  Hi, Olaleye Blessing ~ I have studied your work, and found the reason about your issue.

  It seems you have made several lists and switched visibility on selecting state. I think making individual items visible/hidden would be better in this case.

  Because of ul li:last-child { justify-content: space-between; }, when there is no items left bar, the items on last list will be set apart.

  To maintain what you have done, I think giving above style to .moon__mode-status would be better.

  Hope my opinion would be helpful even a bit. Happy coding ~

  1

  ---

  

  Olaleye Blessing•355

  @Olaleye-BlessingPosted almost 4 years ago

  @axevldk Thanks for your reply. I applied the visible/hidden idea, it's quite easy. Thanks for your suggestion.

  I have one thing left tho :). Whenever a list is completed, the task requires the list radio button to be checked(the check arrow) with different background at each mode(light/dark mode). How do I go about this? You can maintain my code :) or give another method totally, both are appreciated.

  Thanks

  0