added category selection

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

@@ -135,6 +135,28 @@
             </button>
           </div>
         </div>
+        <div class="category">
+          <p>Category<span class="red-dot">*</span></p>
+          <select
+            id="category"
+            name="category"
+            #category="ngModel"
+            (change)="saveTaskData()"
+            [(ngModel)]="taskData.category"
+            required
+          >
+            <option value="" disabled [selected]="!taskData.category">
+              Select task category
+            </option>
+            <option value="1">User Story</option>
+            <option value="2">Technical Task</option>
+          </select>
+          <div class="error-msg">
+            @if (!category.valid && category.touched) {
+            <p>You must select a category</p>
+            }
+          </div>
+        </div>
       </div>
     </div>
     <div class="form-buttons">
@@ -155,8 +177,10 @@
           !taskData.description ||
           date.invalid ||
           !taskData.date ||
+          dateInPast ||
           !taskData.priority ||
-          dateInPast
+          category.invalid ||
+          !taskData.category
         "
       />
     </div>

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

@@ -11,7 +11,8 @@ section {
 }
 
 input,
-textarea {
+textarea,
+select {
   font-size: 20px;
   font-weight: 400;
   border-radius: 10px;
@@ -79,6 +80,7 @@ p {
   display: flex;
   justify-content: space-between;
   gap: 12px;
+  margin-bottom: 36px;
 }
 
 .btn-text {
@@ -91,8 +93,7 @@ p {
   background-color: var(--white);
   font-size: 20px;
   font-weight: 400;
-  width: 136px;
+  min-width: 125px;
-  margin-bottom: 16px;
   border-radius: 10px;
   border: 1px solid var(--light-gray);
   padding: 10px 16px;
@@ -112,6 +113,12 @@ p {
   box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
 }
 
+.category {
+  select {
+    width: 100%;
+  }
+}
+
 /*------------- SUBMIT BUTTON -------------*/
 
 .form-buttons {

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

@@ -12,6 +12,7 @@ import { FormsModule, NgForm, NgModel } from '@angular/forms';
 export class AddTaskComponent {
   @ViewChild('title', { static: true }) titleField!: NgModel;
   @ViewChild('description', { static: true }) descriptionField!: NgModel;
+  @ViewChild('category', { static: true }) categoryField!: NgModel;
 
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;
@@ -21,6 +22,7 @@ export class AddTaskComponent {
     description: '',
     date: this.currentDate,
     priority: 'medium',
+    category: '',
   };
 
   ngOnInit() {
@@ -61,12 +63,14 @@ export class AddTaskComponent {
   untouchedFormFields() {
     this.titleField.control.markAsUntouched();
     this.descriptionField.control.markAsUntouched();
+    this.categoryField.control.markAsUntouched();
   }
 
   clearFormData() {
     this.taskData.title = '';
     this.taskData.description = '';
     this.taskData.date = this.currentDate;
+    this.taskData.category = '';
   }
 
   onSubmit(ngForm: NgForm) {