From 10925b2f10154b022012b8355eaade4d2631ac68 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 7 Apr 2024 11:24:46 +0200
Subject: [PATCH] added date input & responsive

---
 .../add-task/add-task.component.html          | 22 ++++++++++-
 .../add-task/add-task.component.scss          | 39 +++++++++++--------
 .../components/add-task/add-task.component.ts |  1 +
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index 0d5d506..8136a97 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/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>
diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss
index 99b9b0e..24dd8fd 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/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 -------------*/
 
-.line {
-  width: 1px;
-  height: 520px;
-  background-color: var(--light-gray);
-  margin: 0 48px;
+.middle-spacer {
+  display: flex;
+  justify-content: center;
+  width: 10%;
+  height: auto;
+  .line {
+    width: 1px;
+    background-color: var(--light-gray);
+    margin: 0 6px;
+  }
 }
 
 /*------------- RIGHT SIDE -------------*/
+
+.right-side {
+  width: 45%;
+}
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index 126ace6..db0a4e9 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/src/app/components/add-task/add-task.component.ts
@@ -12,6 +12,7 @@ export class AddTaskComponent {
   taskData = {
     title: '',
     description: '',
+    date: '',
   };
 
   onSubmit(ngForm: NgForm) {