ToDo App

You can see it live on Netlify Go TO SEE IT DEPLOYED!

Objective:

Your goal is to create a simple Angular application for managing a to-do list.

Features

• Display a list of tasks.
• Allow the user to add a new task.
• Allow the user to mark a task as completed.
• Allow the user to remove a task.
• Add a filter feature to show only completed tasks or only tasks that need to be done.
• Implement a counter that shows the total number of tasks and the number of completed tasks.

Guidelines

• Use Angular CLI to create a new project.
• Use separate components for the task list and the form to add new tasks.
• Use a service to handle task logic, such as retrieving, adding, removing, and counting tasks.
• Use two-way data binding to keep data synchronized between the task list component and the add task form.
• Use ngIf or ngFor to show or hide elements based on conditions.

Bonus (optional):

• Add the functionality to edit an existing task.
• Implement an attractive user interface using CSS or a styling framework like Bootstrap or Angular Material.
• Use routing to create a detail page for each task, with the ability to edit task details.

Purpose

The purpose of this test is to understand how you think, how you approach and solve problems, and, of course, your creative side. Impress us!

⏭️ NEXT TO BE DONE!

• [] Add a small tutorial at the beginning... (Hint: LocalStorage, user, one time only)
• Add Pop-Up on Clear Completed
• Add a counter inside each button correlated to each filter

🪲 BUGS!!!

• [] If Select all and unselect only one it stays checked...
• SOLVED: if clear all completed input becomes unusable had to close modal after delete

Colors

• dark => gray-600,
• darker => gray-800,
• white => sky-50,
• primary => sky-800