design displayed subtasks

src/app/components/add-task/add-task.component.html

@@ -228,10 +228,20 @@
           </div>
           } @else {
           <img class="add" src="./../../../assets/img/add.svg" alt="" />
-          } @if (taskData.subtasks) { @for (task of taskData.subtasks; track
+          } @if (taskData.subtasks) {
-          task) {
+          <div class="subtasks">
-          <p>{{ task }}</p>
+            @for (task of taskData.subtasks; track task) {
-          } }
+            <div class="single-subtask">
+              <p>- {{ task }}</p>
+              <img
+                src="./../../../assets/img/close.svg"
+                alt=""
+                (click)="deleteSubtask(task)"
+              />
+            </div>
+            }
+          </div>
+          }
         </div>
       </div>
     </div>

src/app/components/add-task/add-task.component.scss

@@ -119,6 +119,30 @@ p {
   }
 }
 
+.subtasks {
+  padding: 12px 6px;
+  .single-subtask {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 6px;
+    width: 100%;
+    cursor: pointer;
+    &:hover {
+      border-radius: 12px;
+      background-color: var(--light-gray);
+    }
+    img {
+      width: 25px;
+      height: 25px;
+      &:hover {
+        filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
+          brightness(92%) contrast(92%);
+      }
+    }
+  }
+}
+
 .assigned-badget {
   display: flex;
   margin-top: 6px;
@@ -210,6 +234,7 @@ p {
 .form-buttons {
   display: flex;
   justify-content: end;
+  margin-top: 12px;
 }
 
 .btn-submit {

src/app/components/add-task/add-task.component.ts

@@ -47,6 +47,14 @@ export class AddTaskComponent {
     this.saveTaskData();
   }
 
+  deleteSubtask(subtaskName: string) {
+    this.taskData.subtasks.splice(
+      this.taskData.subtasks.indexOf(subtaskName),
+      1
+    );
+    this.saveTaskData();
+  }
+
   ngOnInit() {
     const storedTaskData = localStorage.getItem('taskData');
     if (storedTaskData) {