/todo-list-project

Colt Steel's Todo List Project

Primary LanguageCSS

todo-list-project

Colt Steel's Todo List Project

Requirements

  • It can display current todos
    • All current todos are display in a container box centered in the middle of the screen
  • It can add new todos
    • Input for adding new todos can be toggled on and off
  • It can mark todos as completed
    • Completed todo has a strikethrough line
  • It can delete todos
    • When hovering on each todo, a trash icon appears on the left
    • Clicking on the trask icon will remove the todo item
  • The app is responsive

v1 - Basic setup

  • Basic HTML setup

v2 - Marking a todo as completed

  • There should be a way to listen to click on each todo
  • Clicking on todo should mark it as completed
  • It should add a strikethrough line to each completed todo

v3 - Adding new todo

  • There should be a place for new todo input
  • When user hits enter, new todo should be added to the bottom of the todo list
  • New todo input should be cleared afterwards

v4 - Deleting todo

  • There should be a way to delete todo
  • When a todo is deleted, it should fade away and be removed from the list