added prio btns & save form in local storage

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

@@ -17,9 +17,9 @@
           id="title"
           name="title"
           #title="ngModel"
+          (input)="saveTaskData()"
           placeholder="{{ taskData.title }}"
           [(ngModel)]="taskData.title"
-          placeholder="Enter a title"
           autocomplete="off"
           required
         />
@@ -37,9 +37,9 @@
           name="description"
           #description="ngModel"
           minlength="10"
+          (input)="saveTaskData()"
           placeholder="{{ taskData.description }}"
           [(ngModel)]="taskData.description"
-          placeholder="Enter a title"
           autocomplete="off"
           required
         ></textarea>
@@ -59,9 +59,9 @@
           id="date"
           name="date"
           #date="ngModel"
+          (input)="saveTaskData()"
           placeholder="{{ taskData.date }}"
           [(ngModel)]="taskData.date"
-          placeholder=""
           autocomplete="off"
           required
         />
@@ -71,6 +71,61 @@
           }
         </div>
       </div>
+      <div class="priority">
+        <p>Prio<span class="red-dot">*</span></p>
+        <div class="btns">
+          <button
+            type="button"
+            class="btn"
+            [ngClass]="{
+              'btn-active': taskData.priority == 'urgent'
+            }"
+            [ngStyle]="{
+              'background-color':
+                taskData.priority == 'urgent' ? 'red' : 'white'
+            }"
+            (click)="tooglePriority('urgent')"
+          >
+            <div class="btn-text">
+              <span>Urgent</span>
+              <img src="./../../../assets/img/urgent.svg" alt="" />
+            </div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            [ngClass]="{
+              'btn-active': taskData.priority == 'medium'
+            }"
+            [ngStyle]="{
+              'background-color':
+                taskData.priority == 'medium' ? 'orange' : 'white'
+            }"
+            (click)="tooglePriority('medium')"
+          >
+            <div class="btn-text">
+              <span>Medium</span>
+              <img src="./../../../assets/img/medium.svg" alt="" />
+            </div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            [ngClass]="{
+              'btn-active': taskData.priority == 'low'
+            }"
+            [ngStyle]="{
+              'background-color': taskData.priority == 'low' ? 'green' : 'white'
+            }"
+            (click)="tooglePriority('low')"
+          >
+            <div class="btn-text">
+              <span>Low</span>
+              <img src="./../../../assets/img/low.svg" alt="" />
+            </div>
+          </button>
+        </div>
+      </div>
     </div>
   </form>
 </section>

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

@@ -12,13 +12,12 @@ section {
 
 input,
 textarea {
-  color: var(--light-gray);
   font-size: 20px;
   font-weight: 400;
   border-radius: 10px;
   border: 1px solid var(--light-gray);
   padding: 12px 21px;
-  width: 80%;
+  width: calc(100% - 42px);
   resize: none;
 }
 
@@ -67,7 +66,6 @@ p {
   .line {
     width: 1px;
     background-color: var(--light-gray);
-    margin: 0 6px;
   }
 }
 
@@ -76,3 +74,40 @@ p {
 .right-side {
   width: 45%;
 }
+
+.btns {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.btn-text {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.btn {
+  background-color: var(--white);
+  font-size: 20px;
+  font-weight: 400;
+  width: 136px;
+  margin-bottom: 16px;
+  border-radius: 10px;
+  border: 1px solid var(--light-gray);
+  padding: 10px 16px;
+  cursor: pointer;
+}
+
+.btn-active {
+  cursor: unset;
+  color: var(--white);
+  img {
+    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
+      hue-rotate(346deg) brightness(99%) contrast(103%);
+  }
+}
+
+.btn:hover {
+  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+}

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

@@ -1,20 +1,42 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-add-task',
   standalone: true,
-  imports: [FormsModule],
+  imports: [FormsModule, CommonModule],
   templateUrl: './add-task.component.html',
   styleUrl: './add-task.component.scss',
 })
 export class AddTaskComponent {
+  currentDate: string = new Date().toISOString().split('T')[0];
+
   taskData = {
     title: '',
     description: '',
-    date: '',
+    date: this.currentDate,
+    priority: 'medium',
   };
 
+  ngOnInit() {
+    const storedTaskData = localStorage.getItem('taskData');
+    if (storedTaskData) {
+      this.taskData = JSON.parse(storedTaskData);
+    }
+  }
+
+  tooglePriority(prio: string) {
+    this.taskData.priority !== prio
+      ? (this.taskData.priority = prio)
+      : this.taskData.priority;
+    this.saveTaskData();
+  }
+
+  saveTaskData() {
+    localStorage.setItem('taskData', JSON.stringify(this.taskData));
+  }
+
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
       console.log('Send completed');