Angular Todo List with Material UI CDK

This is a simple Todo List application built using Angular and styled with SCSS. It utilizes Material UI CDK components to provide a clean and intuitive user interface for managing your tasks. The application includes basic functionalities like adding, deleting, and categorizing tasks into three sections: Todo, Ongoing, and Done.

Features

• Add Tasks: Easily add new tasks to your list by entering a task description and selecting its category (Todo, Ongoing, or Done).

• Delete Tasks: Remove tasks from your list when they are no longer needed.

• Categorize Tasks: Organize your tasks into three categories: Todo, Ongoing, and Done, to help you stay organized and track your progress.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js: Make sure you have Node.js installed.

• Angular CLI: Install the Angular CLI globally using npm with the following command:

  npm install -g @angular/cli
  

Getting Started

To get this application up and running, follow these steps:

1. Clone the repository to your local machine:

   git clone https://github.com/your-username/angular-todo-list.git
   

2. Navigate to the project directory:

   cd angular-todo-list
   

3. Install the project dependencies:

   npm install
   

4. Start the development server:

   ng serve
   

5. Open your web browser and visit http://localhost:4200/ to use the Todo List application.

Usage

• Adding a Task:

  1. Enter a task description in the input field under "Add Task."
  2. Select the category for the task using the dropdown (Todo, Ongoing, or Done).
  3. Click the "Add" button to add the task to the list.

• Deleting a Task:

  1. Locate the task you want to delete in the respective category list.
  2. Click the trash icon (🗑️) next to the task to delete it.

• Categorizing Tasks:

  1. When adding a task, select the appropriate category (Todo, Ongoing, or Done) from the dropdown.

Customize Styling (SCSS)

This application uses SCSS for styling, making it easy to customize the look and feel. You can find the SCSS files in the src/styles directory. Modify these files to change the application's appearance to suit your preferences.

Acknowledgments

• Thanks to the Angular team for creating such a powerful and flexible framework.
• Material UI CDK for providing elegant UI components.
• And of course, thanks to the open-source community for their contributions and support.