Angular Component to create the ToDo List

todolist.css

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
}

.todo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;

}

.todo-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 500px;
  text-align: center;
}

.input-section {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#taskInput {
  padding: 10px;
  width: 65%;
  border: 1px solid #ccc;
  border-radius: 6px 0 0 6px;
  font-size: 16px;
}

#addTaskBtn {
  padding: 10px 16px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 16px;
}

#addTaskBtn:hover {
  background-color: #1d4ed8;
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.task-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background-color: #e5e7eb;
  padding: 10px;
  border-radius: 8px;
}

.task-buttons {
  margin-right: 12px;
}

.task-buttons button {
  margin-right: 6px;
  padding: 6px 10px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.update-btn {
  background-color: #10b981;
  color: white;
}

.update-btn:hover {
  background-color: #059669;
}

.delete-btn {
  background-color: #ef4444;
  color: white;
}

.delete-btn:hover {
  background-color: #dc2626;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e7eb;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  gap: 10px;
}

.task-item span {
  font-size: 16px;
}

.update-btn, .delete-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

todolist.html

<div class="todo-wrapper">
  <div class="todo-container">
    <h2>ToDo List</h2>
    <div class="input-section">
      <input [(ngModel)]="task" type="text" id="taskInput" placeholder="Enter a task..." />
      <button (click)="addTask()" id="addTaskBtn">Add Task</button>
    </div>
    <ul id="taskList" class="task-list">
      <!-- Tasks will be added here -->

      @for(task of tasklist; track task.id)
      {
        <!--Task Number one-->
        @if(editBox && idToReturn === task.id)
        {
          <div class="task-item" style="background-color:#f6caca">

          <input type="text" [(ngModel)]="editedTask" value='{{task.task}}'>
          <button class="update-btn" style="background-color: #1d4ed8" (click)="updateTask(task.id)">Update</button>
          <button class="update-btn" style="background-color: #ef4444" (click)="cancelUpdate()">Cancel</button>
          </div>

        }
        @else
        {
          <div class="task-item">
          <span>{{ task.task }}</span>
          <button (click)="removeTask(task.id)" class="delete-btn">Delete</button>
          <button (click)="editTask(task.id)" class="update-btn">Edit</button>
          </div>
        }
        <!--Task one end here-->
      }
    </ul>
  </div>
</div>

todolist.ts

import { Component } from '@angular/core';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'app-todolist',
  imports: [
    FormsModule
  ],
  templateUrl: './todolist.html',
  styleUrl: './todolist.css'
})

export class Todolist {

  task: string = "";
  editedTask :string = "";
  tasklist: { id: number, task: string } [] = [];
  editBox : boolean = false;
  idToReturn : number = 0;

  //Creating a functions for list
  addTask() {
    this.tasklist.push({id: this.tasklist.length + 1, task: this.task});
    this.task = ""
    console.log(this.tasklist);
  }

  removeTask(taskId: number) {
    this.tasklist = this.tasklist.filter((task)=> task.id !== taskId);
  }

  editTask(taskId:number) {
    let task = this.tasklist[taskId-1];
    this.editBox = true;
    this.idToReturn = taskId;
    this.editedTask = task.task;
  }

  updateTask(taskId:number) {
    let TaskToUpdate = this.tasklist.find((task)=>task.id === taskId);
    if(TaskToUpdate){
      TaskToUpdate.task = this.editedTask;
      this.editedTask = ""
      this.editBox =false;
    }
  }

  cancelUpdate()
  {
    this.editedTask = "";
    this.editBox = false;
  }
}