added title & description input

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>

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 -------------*/

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');
+    }
+  }
 }

src/styles.scss

@@ -20,6 +20,7 @@ body {
   --dark-blue: #2b3647;
   --very-dark-blue: #091931;
   --very-light-gray: #f6f7f8;
+  --light-red: #ff8190;
 }
 
 .wrapping-wort {