A todo app using HTML, CSS and JavaScript.

Community feedback

• 

  Mohammed Fakih•1,590

  @javascriptor1

  Posted over 1 year ago

  Hi Renz,

  Nice job. However, the logic of the application needs to be re-written as the app is not functioning as it's supposed to. Here are some notes about your solution:

  • You have placed the header in the wrong location. The header which contains the TODO word in addition to the image(for theme switching) should be on top of the upper BG photo, not on the BG plain color. This issue matters because when users visit your application website from desktop , then change to light Mode , the moon will not be seen as it has the same color of background in light Mode.

  • After adding 6 todos, the application stops displaying any additional entries. It's wrong to hard code the todos in the HTML ( from item1 to item6) as you did. This process should be completely dynamic.

  • Add one todo, then mark it as completed, then delete it. If you try to add other todos after this operation, it will be marked as completed by default.

  • Its wrong to listen o click event to add todos in this case. The add todo should work after pressing Enter key. This needs to be written from scratch.

  Wrap the input in a form so you catch the ENTR key without doing any extra coding and listen for submit event. You will have to prevent default behavior though.

  • When you check for todo as completed , you should be able to uncheck it again. This is not working in your application. Once a todo is checked completed , you can't undo this opreation.

  • Don't place the header under main tag.

  • Place todos in ul tag and use li to create each todo as part of a unordered list.

  • Use button tag for switching between light and dark mode.

  I hope these notes will help you to improve your code.

  Keep going and good luck.🚀

  MKF

  11

  Marked as helpful