From 5f8813b9ba750604d9f40bd43f1c3f1c9d8bf593 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 7 Apr 2024 11:12:23 +0200
Subject: [PATCH] added title & description input

---
 .../add-task/add-task.component.html          | 57 ++++++++++++++-
 .../add-task/add-task.component.scss          | 71 +++++++++++++++++++
 .../components/add-task/add-task.component.ts | 14 +++-
 src/styles.scss                               |  1 +
 4 files changed, 140 insertions(+), 3 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index 1179209..0d5d506 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/src/app/components/add-task/add-task.component.html
@@ -1 +1,56 @@
-<p>add-task works!</p>
+<section>
+  <div class="headline">
+    <div class="title">Add Tasks</div>
+  </div>
+
+  <form
+    (ngSubmit)="onSubmit(taskForm)"
+    #taskForm="ngForm"
+    onsubmit="return false"
+    class="content"
+  >
+    <div class="left-side">
+      <div class="title">
+        <p>Title<span class="red-dot">*</span></p>
+        <input
+          type="text"
+          id="title"
+          name="title"
+          #title="ngModel"
+          placeholder="{{ taskData.title }}"
+          [(ngModel)]="taskData.title"
+          placeholder="Enter a title"
+          autocomplete="off"
+          required
+        />
+        <div class="error-msg">
+          @if (!title.valid && title.touched) {
+          <p>You must enter a title.</p>
+          }
+        </div>
+      </div>
+      <div class="description">
+        <p>Description<span class="red-dot">*</span></p>
+        <textarea
+          id="description"
+          rows="6"
+          name="description"
+          #description="ngModel"
+          minlength="10"
+          placeholder="{{ taskData.description }}"
+          [(ngModel)]="taskData.description"
+          placeholder="Enter a title"
+          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>
+    <div class="middle-spacer"><div class="line"></div></div>
+    <div class="right-side"></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 e69de29..99b9b0e 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/src/app/components/add-task/add-task.component.scss
@@ -0,0 +1,71 @@
+section {
+  margin: 0;
+  background-color: var(--very-light-gray);
+  padding-bottom: 32px;
+}
+
+.content {
+  display: flex;
+}
+
+input {
+  color: var(--light-gray);
+  font-size: 20px;
+  font-weight: 400;
+  border-radius: 10px;
+  border: 1px solid var(--light-gray);
+  padding: 12px 21px;
+}
+
+textarea {
+  color: var(--light-gray);
+  font-size: 20px;
+  font-weight: 400;
+  border-radius: 10px;
+  border: 1px solid var(--light-gray);
+  padding: 18px 16px;
+  resize: none;
+}
+
+p {
+  font-size: 20px;
+  font-weight: 400;
+  padding-bottom: 6px;
+}
+
+.red-dot {
+  color: var(--light-red);
+}
+
+.error-msg {
+  height: 24px;
+  padding: 6px;
+  p {
+    color: var(--red);
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
+
+/*------------- HEADER -------------*/
+
+.headline {
+  .title {
+    font-size: 61px;
+    font-weight: 700;
+  }
+  margin-bottom: 48px;
+}
+
+/*------------- LEFT SIDE -------------*/
+
+/*------------- MIDDLE -------------*/
+
+.line {
+  width: 1px;
+  height: 520px;
+  background-color: var(--light-gray);
+  margin: 0 48px;
+}
+
+/*------------- RIGHT SIDE -------------*/
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index 0fc271f..126ace6 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/src/app/components/add-task/add-task.component.ts
@@ -1,12 +1,22 @@
 import { Component } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-add-task',
   standalone: true,
-  imports: [],
+  imports: [FormsModule],
   templateUrl: './add-task.component.html',
-  styleUrl: './add-task.component.scss'
+  styleUrl: './add-task.component.scss',
 })
 export class AddTaskComponent {
+  taskData = {
+    title: '',
+    description: '',
+  };
 
+  onSubmit(ngForm: NgForm) {
+    if (ngForm.submitted && ngForm.form.valid) {
+      console.log('Send completed');
+    }
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index dab2f74..e253635 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -20,6 +20,7 @@ body {
   --dark-blue: #2b3647;
   --very-dark-blue: #091931;
   --very-light-gray: #f6f7f8;
+  --light-red: #ff8190;
 }
 
 .wrapping-wort {