Todo app solution

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Hey your solution is amazing! 🤩

  This was a bit of a long challenge and you handled it very well.

  📌 Some suggestions

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
  • In the future you could try to add persistence in the data, that is, when refreshing the page, the user continues to see the tasks they added and the topic they chose
  • On desktop screens, if the task text has more than 2 lines, passing the cursor over said task causes the checkbox to slide a little to the left and appear cut off
  • The mobile version looks poorly aligned because you applied a position: relative and left: 10px

  Marked as helpful

  0

  ---

  

  Mohammed Fakih•1,590

  @javascriptor1Posted 10 months ago

  Hi @Blackpachamame,

  Thanks for the valuable feedback you provided.

  • For the container , I guess it is better to use div as I used main for the todo list itself. The cotnainer includes the header which should not be part of main section.

  • I added localStorage already.

  • Yes - you are right. I will look into this issue in the future when I come back to improve this application and add more functionality to it.

  • I fixed the mobile version alignment. The reason for this problem was not relative position as you indicated but rather assigning a fixed width to the mobile style for the container.

  I moved the styling to the desktop and it should be fine.

  Thanks for your time and valuable contribution. Rgds, MKF

  1
• 

  Mohammed Fakih•1,590

  @javascriptor1Posted 10 months ago

  Update:

  The theme now loads from local storage. If a user switches to LightMode, It will persist after refreshing the page.

  1