TodoAppByVanillaJS

To do app was created by Vanilla Javascript

Features

• Vanilla Javascript
• Vanilla CSS
• Local Storage (HTML5)

How to do app works?

• App has two main pages:

  • Login page
  • To do list page

• Login page has a form to enter username

• Username is saved in local storage

• Current user is saved in local storage

• Also username and users todo list is saved in local storage

• Todo list page has three part

  • To do list
  • Add New Task button
  • Logout button

• User login first time, the app will show a welcome message and see empty to do list

• User can add new todo if he/she click Add New Task button

• User can not save without entering task name

• User should choose a date for todo

• Todo List can be sorted by date

• User can delete todo if he/she click delete button

• User can edit todo if he/she click edit button

• User can mark todo as done if he/she click checkbox

• User can logout if he/she click logout button

• User can see his/her todo list if he/she login again because the app will save the todo list in local storage

Login pages

Form to enter username

Form to enter username

Todo list pages

User login first time

Add new task (modal window)

User added todos

User edit todo

User hover delete button

User check todo

You see portakal's todo list (she is my cat:))

Thanks for watching my code!