Todo App Main using HTML, SASS and JS

Community feedback

• 

  Luis Colina•1,043

  @Comet466Posted about 3 years ago

  hi joel, one thing if you use the cross icon to delete an item, the counter doesnt update

  Marked as helpful

  0
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  Hey Joel, a few things I noticed:

  • Style-wise, the font is a little small going into desktop view, other than that the layout looks great!

  Some suggestions:

  • The theme doesn't seem to save when I refresh the page, you can use local storage to save the users theme. You can learn more about local storage here

  • Here's an example from my todo project of how I used local storage:

  • I used the onclick event attribute but you can also use addEventListener instead

  <button onclick="toggleDark()"></button>

  //--------------------------theme changer
  function toggleDark() {
     // if user toggles light-theme, remove dark theme and save light theme in local storage
    if (body.classList.contains('dark-theme')) {
      body.classList.remove('dark-theme')
      localStorage.setItem("theme", "")
    } else {
     // if user toggles dark-theme, add dark-theme class and save dark theme in local storage
      body.classList.add('dark-theme')
      localStorage.setItem("theme", "dark-theme")
    }
  }
  
  //if item is set to dark theme, add dark-theme to body
  if (localStorage.getItem("theme") === "dark-theme") {
    body.classList.add('dark-theme')
  }
  //----------------------------------------
  

  I also used local storage to also save my list-items div in a local storage item. I hope this helps and good luck coding!

  Marked as helpful

  0