Practical week 10: Challenge - ToDo App

Create a simple ToDo application

Requirement #1

Users should be able to add tasks to the list

NB: Adding of a new task should happen after enter key press

Hint: Use v-model on the input

Requirement #2

Users should be able to mark task as done/undone

NB: Notice how done items are moved to bottom

Hint: Use computed option for that.

Tasks

Make it

Hint: Proposed component structure

  • Green: Main App component
  • Blue: Header component
  • Orange: Component to display list items
  • Red: Footer component to hold "+" button and input