diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index 8136a97..b2d9504 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/src/app/components/add-task/add-task.component.html
@@ -17,9 +17,9 @@
id="title"
name="title"
#title="ngModel"
+ (input)="saveTaskData()"
placeholder="{{ taskData.title }}"
[(ngModel)]="taskData.title"
- placeholder="Enter a title"
autocomplete="off"
required
/>
@@ -37,9 +37,9 @@
name="description"
#description="ngModel"
minlength="10"
+ (input)="saveTaskData()"
placeholder="{{ taskData.description }}"
[(ngModel)]="taskData.description"
- placeholder="Enter a title"
autocomplete="off"
required
>
@@ -59,9 +59,9 @@
id="date"
name="date"
#date="ngModel"
+ (input)="saveTaskData()"
placeholder="{{ taskData.date }}"
[(ngModel)]="taskData.date"
- placeholder=""
autocomplete="off"
required
/>
@@ -71,6 +71,61 @@
}
+
+
Prio*
+
+
+
+
+
+
diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss
index 24dd8fd..f87eefe 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/src/app/components/add-task/add-task.component.scss
@@ -12,13 +12,12 @@ section {
input,
textarea {
- color: var(--light-gray);
font-size: 20px;
font-weight: 400;
border-radius: 10px;
border: 1px solid var(--light-gray);
padding: 12px 21px;
- width: 80%;
+ width: calc(100% - 42px);
resize: none;
}
@@ -67,7 +66,6 @@ p {
.line {
width: 1px;
background-color: var(--light-gray);
- margin: 0 6px;
}
}
@@ -76,3 +74,40 @@ p {
.right-side {
width: 45%;
}
+
+.btns {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.btn-text {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+}
+
+.btn {
+ background-color: var(--white);
+ font-size: 20px;
+ font-weight: 400;
+ width: 136px;
+ margin-bottom: 16px;
+ border-radius: 10px;
+ border: 1px solid var(--light-gray);
+ padding: 10px 16px;
+ cursor: pointer;
+}
+
+.btn-active {
+ cursor: unset;
+ color: var(--white);
+ img {
+ filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
+ hue-rotate(346deg) brightness(99%) contrast(103%);
+ }
+}
+
+.btn:hover {
+ box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+}
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index db0a4e9..0bb9d09 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/src/app/components/add-task/add-task.component.ts
@@ -1,20 +1,42 @@
+import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
@Component({
selector: 'app-add-task',
standalone: true,
- imports: [FormsModule],
+ imports: [FormsModule, CommonModule],
templateUrl: './add-task.component.html',
styleUrl: './add-task.component.scss',
})
export class AddTaskComponent {
+ currentDate: string = new Date().toISOString().split('T')[0];
+
taskData = {
title: '',
description: '',
- date: '',
+ date: this.currentDate,
+ priority: 'medium',
};
+ ngOnInit() {
+ const storedTaskData = localStorage.getItem('taskData');
+ if (storedTaskData) {
+ this.taskData = JSON.parse(storedTaskData);
+ }
+ }
+
+ tooglePriority(prio: string) {
+ this.taskData.priority !== prio
+ ? (this.taskData.priority = prio)
+ : this.taskData.priority;
+ this.saveTaskData();
+ }
+
+ saveTaskData() {
+ localStorage.setItem('taskData', JSON.stringify(this.taskData));
+ }
+
onSubmit(ngForm: NgForm) {
if (ngForm.submitted && ngForm.form.valid) {
console.log('Send completed');