added description textarea

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html

@@ -9,7 +9,7 @@
     onsubmit="return false"
   >
     <div class="content">
-      <div class="title">
+      <div class="title headline">
         <p>Title<span class="red-dot">*</span></p>
         <input
           type="text"
@@ -17,6 +17,9 @@
           name="title"
           #title="ngModel"
           (input)="saveTaskData()"
+          placeholder="{{
+            taskDataEdit.title ? taskDataEdit.title : 'Enter a description'
+          }}"
           [(ngModel)]="taskDataEdit.title"
           autocomplete="off"
           required
@@ -27,6 +30,30 @@
           }
         </div>
       </div>
+      <div class="description headline">
+        <p>Description<span class="red-dot">*</span></p>
+        <textarea
+          id="description"
+          rows="5"
+          name="description"
+          #description="ngModel"
+          minlength="10"
+          (input)="saveTaskData()"
+          placeholder="{{
+            taskDataEdit.description
+              ? taskDataEdit.description
+              : 'Enter a description'
+          }}"
+          [(ngModel)]="taskDataEdit.description"
+          autocomplete="off"
+          required
+        ></textarea>
+        <div class="error-msg">
+          @if (!description.valid && description.touched) {
+          <p>You must enter a description. (min. 10 letters)</p>
+          }
+        </div>
+      </div>
     </div>
   </form>
 </section>

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss

@@ -41,6 +41,12 @@ select:valid {
   border: 1px solid black;
 }
 
+.headline {
+  p {
+    color: var(--very-dark-gray);
+  }
+}
+
 p {
   font-size: 20px;
   font-weight: 400;