Adding pop-up when user wants to create a task : new-task.component. Handle cancel pop-up action.

src/app/tasks/new-task/new-task.component.css

@@ -0,0 +1,85 @@
+.backdrop {
+  background-color: rgba(0, 0, 0, 0.9);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+}
+
+dialog {
+  width: 90%;
+  max-width: 30rem;
+  background-color: #433352;
+  border-radius: 6px;
+  border: none;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  padding: 1rem;
+  top: 5rem;
+}
+
+h2 {
+  margin: 0;
+  color: #d0c2e1;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: #ab9ac0;
+}
+
+input,
+textarea {
+  width: 100%;
+  font: inherit;
+  padding: 0.15rem 0.25rem;
+  border-radius: 4px;
+  border: 1px solid #ab9ac0;
+  background-color: #d0c2e1;
+}
+
+.actions {
+  margin: 1rem 0 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+button {
+  font: inherit;
+  cursor: pointer;
+  border: none;
+  padding: 0.35rem 1.25rem;
+  border-radius: 4px;
+  background-color: transparent;
+}
+
+button[type="button"] {
+  color: #bdadcf;
+}
+
+button[type="button"]:hover,
+button[type="button"]:active {
+  color: #d0c2e1;
+}
+
+button[type="submit"] {
+  background-color: #9c73ca;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+}
+
+button[type="submit"]:hover,
+button[type="submit"]:active {
+  background-color: #895cce;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+}
+
+@media (min-width: 768px) {
+  dialog {
+    padding: 2rem;
+  }
+}

src/app/tasks/new-task/new-task.component.html

@@ -0,0 +1,25 @@
+<div class="backdrop"></div>
+<dialog open>
+  <h2>Add Task</h2>
+  <form>
+    <p>
+      <label for="title">Title</label>
+      <input type="text" id="title" name="title" />
+    </p>
+
+    <p>
+      <label for="summary">Summary</label>
+      <textarea id="summary" rows="5" name="summary"></textarea>
+    </p>
+
+    <p>
+      <label for="due-date">Due Date</label>
+      <input type="date" id="due-date" name="due-date" />
+    </p>
+
+    <p class="actions">
+      <button type="button" (click)="onCloseTask()" >Cancel</button>
+      <button type="submit">Create</button>
+    </p>
+  </form>
+</dialog>

src/app/tasks/new-task/new-task.component.ts

@@ -0,0 +1,16 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Task} from '../../task/task.model';
+
+@Component({
+  selector: 'app-new-task',
+  imports: [],
+  templateUrl: './new-task.component.html',
+  styleUrl: './new-task.component.css'
+})
+export class NewTaskComponent {
+  @Output() close = new EventEmitter<null>();
+
+  onCloseTask() {
+    this.close.emit();
+  }
+}

src/app/tasks/tasks.component.html

@@ -1,8 +1,12 @@
+@if (isAddingTask) {
+  <app-new-task (close)="onStopAddTask()" />
+}
+
 <section id="tasks">
   <header>
     <h2>{{ user.name }}'s Tasks</h2>
     <menu>
-      <button (click)="onAddTask()">Add Task</button>
+      <button (click)="onStartAddTask()">Add Task</button>
     </menu>
   </header>
 

src/app/tasks/tasks.component.ts

@@ -1,17 +1,20 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {User} from '../user/user.model';
 import {Task} from '../task/task.model';
 import {TaskComponent} from '../task/task.component';
+import {NewTaskComponent} from './new-task/new-task.component';
 
 @Component({
   selector: 'app-tasks',
-  imports: [ TaskComponent ],
+  imports: [TaskComponent, NewTaskComponent],
   templateUrl: './tasks.component.html',
   styleUrl: './tasks.component.css'
 })
 export class TasksComponent {
   @Input({ required: true }) user!: User;
 
+  isAddingTask = false;
+
   tasks: Task[] = [
     {
       id: 't1',
@@ -40,19 +43,12 @@ export class TasksComponent {
     return this.tasks.filter((task) => task.userId === this.user.id);
   }
 
-  onAddTask() {
+  onStartAddTask() {
-    let taskNumber = this.tasks.length + 2;
+    this.isAddingTask = true;
-    let taskId = 't' + (taskNumber).toString();
+  }
 
-    let newTask: Task = {
+  onStopAddTask() {
-      id: taskId,
+    this.isAddingTask = false;
-      userId: this.user.id,
-      title: 'New task for ' + this.user.name,
-      summary: 'Summary',
-      dueDate: '2025-12-31',
-    };
-
-    this.tasks.push(newTask);
   }
 
   onCompleteTask(taskId: string) {