added date input & responsive

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

@@ -51,6 +51,26 @@
       </div>
     </div>
     <div class="middle-spacer"><div class="line"></div></div>
-    <div class="right-side"></div>
+    <div class="right-side">
+      <div class="date">
+        <p>Due date<span class="red-dot">*</span></p>
+        <input
+          type="date"
+          id="date"
+          name="date"
+          #date="ngModel"
+          placeholder="{{ taskData.date }}"
+          [(ngModel)]="taskData.date"
+          placeholder=""
+          autocomplete="off"
+          required
+        />
+        <div class="error-msg">
+          @if (!date.valid && date.touched) {
+          <p>You must enter a date.</p>
+          }
+        </div>
+      </div>
+    </div>
   </form>
 </section>

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

@@ -6,24 +6,19 @@ section {
 
 .content {
   display: flex;
+  margin-top: 48px;
+  width: 100%;
 }
 
-input {
-  color: var(--light-gray);
-  font-size: 20px;
-  font-weight: 400;
-  border-radius: 10px;
-  border: 1px solid var(--light-gray);
-  padding: 12px 21px;
-}
-
+input,
 textarea {
   color: var(--light-gray);
   font-size: 20px;
   font-weight: 400;
   border-radius: 10px;
   border: 1px solid var(--light-gray);
-  padding: 18px 16px;
+  padding: 12px 21px;
+  width: 80%;
   resize: none;
 }
 
@@ -54,18 +49,30 @@ p {
     font-size: 61px;
     font-weight: 700;
   }
-  margin-bottom: 48px;
 }
 
 /*------------- LEFT SIDE -------------*/
 
+.left-side {
+  width: 45%;
+}
+
 /*------------- MIDDLE -------------*/
 
+.middle-spacer {
+  display: flex;
+  justify-content: center;
+  width: 10%;
+  height: auto;
   .line {
     width: 1px;
-  height: 520px;
     background-color: var(--light-gray);
-  margin: 0 48px;
+    margin: 0 6px;
+  }
 }
 
 /*------------- RIGHT SIDE -------------*/
+
+.right-side {
+  width: 45%;
+}

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

@@ -12,6 +12,7 @@ export class AddTaskComponent {
   taskData = {
     title: '',
     description: '',
+    date: '',
   };
 
   onSubmit(ngForm: NgForm) {