From 10baf039df497b3b16e302894739c82aabd5146b Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Wed, 26 Jan 2022 12:23:24 -0300
Subject: [PATCH 01/18] fix(date-lib): hour display format.

Fixed how the readable hours are displayed, now something like 8:5 will be correctly displayed 08:05.
---
 src/libs/date.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/date.ts b/src/libs/date.ts
index 03b0151..bb01b6f 100644
--- a/src/libs/date.ts
+++ b/src/libs/date.ts
@@ -23,7 +23,7 @@ const date = {
 		const d = new Date();
 
 		return {
-			readable: `${d.getHours()}:${d.getMinutes()}`,
+			readable: `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`,
 			hours: d.getHours(),
 			minutes: d.getMinutes(),
 			seconds: d.getSeconds(),

From 468e0078f90fbddc66f2ad9a6443fd2a82c1e6f0 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Wed, 26 Jan 2022 12:28:22 -0300
Subject: [PATCH 02/18] feat(storageManagement): added easy local storage
 management.

Created a simple library/functions to handle the JSON file used as memory on the browser's local storage, can handle errors, and can be reused in other projects without problems probably.

Version changed to 0.2.0
---
 nuxt.config.js                 |   1 +
 package.json                   |   2 +-
 src/components/ThemePicker.vue |  14 +++-
 src/libs/storageManagement.ts  | 148 +++++++++++++++++++++++++++++++++
 src/pages/index.vue            |  11 +++
 5 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 src/libs/storageManagement.ts

diff --git a/nuxt.config.js b/nuxt.config.js
index 0082da7..e5d29e1 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -2,6 +2,7 @@ export default {
 	srcDir: 'src/',
 	buildDir: 'dist',
 	target: 'static',
+	ssr: false,
 
 	// Global page headers: https://go.nuxtjs.dev/config-head
 	head: {
diff --git a/package.json b/package.json
index 79362cc..5c24f69 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
diff --git a/src/components/ThemePicker.vue b/src/components/ThemePicker.vue
index 7415df2..f137ad0 100644
--- a/src/components/ThemePicker.vue
+++ b/src/components/ThemePicker.vue
@@ -3,7 +3,8 @@
 		<button
 			@click="
 				$colorMode.preference =
-					$colorMode.preference === 'dark' ? 'light' : 'dark'
+					$colorMode.preference === 'dark' ? 'light' : 'dark';
+				updateThemeInfo($colorMode.preference)
 			"
 		>
 			<IconMoon class="light-mode-element" />
@@ -12,6 +13,17 @@
 	</div>
 </template>
 
+<script>
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+export default Vue.extend({
+	methods: {
+		updateThemeInfo: (theme) => sm.set('theme', theme, false, true)
+	}
+});
+</script>
+
 <style lang="scss">
 @import '~assets/styles/_variables.scss';
 @import '~assets/styles/_mixins.scss';
diff --git a/src/libs/storageManagement.ts b/src/libs/storageManagement.ts
new file mode 100644
index 0000000..0e231af
--- /dev/null
+++ b/src/libs/storageManagement.ts
@@ -0,0 +1,148 @@
+import appInfo from '~~/package.json';
+import date from '~/libs/date';
+
+const storageIndex = 'ToToday-storage';
+
+/**
+ * (Local) Storage Management of the application.
+ */
+const sm = {
+	/**
+	 * Adds new value on `data`. *Don't create or rewrite the value if it already exists.*
+	 * @param {string} key New key on `data`;
+	 * @param {any} value New value;
+	 */
+	add: (key: string, value: any) => {
+		const data = sm.getJSON().data;
+
+		if ( data[key] ) return window.alert('ERROR: Value already in storage');
+
+		data[key] = value;
+
+		sm.setJSON(data);
+
+	},
+
+	/**
+	 * Rewrite a value inside of `data` with a new *(creates a new key/value if it's doesn't exist before)*.
+	 * @param {string} key Value's key on `data`;
+	 * @param {any} value The new value to replace;
+	 * @param {boolean | undefined} getOld Return the old value of the key?
+	 * @param {boolean | undefined} meta Update a value on `meta`?
+	 *
+	 * @returns The old value of the key, if `getOld` is `true`.
+	 */
+	set: (key: string, value: any, getOld?: boolean, meta?: boolean): void | any => {
+
+		if( meta ) {
+			const metaData = sm.getJSON();
+			metaData.meta[key] = value;
+			sm.setJSON(metaData, true);
+			return;
+		}
+
+		const data = sm.getJSON().data;
+
+		const oldValue = data[key];
+
+		if ( !data[key] ) return sm.add(key, value);
+
+		data[key] = value;
+
+		sm.setJSON(data);
+
+		if ( getOld ) return oldValue;
+	},
+
+	get: (meta?: boolean) => {
+		const storage = sm.getJSON()
+
+		if (meta) {
+			return storage.meta;
+		}
+
+		if (storage.data) return storage.data;
+
+		return undefined;
+	},
+
+	/**
+	 * Gets and parses the local storage JSON file.
+	 *
+	 * **Used internally by the storage management.**
+	 */
+	getJSON: (): any => {
+		sm.checkJSON();
+		return JSON.parse(localStorage.getItem(storageIndex) + '');
+	},
+
+	/**
+	 * Sets a new `data` on the local storage JSON file *(also updates the `date.updated` meta-information)*.
+	 * @param {object} newData New data object to be updated/set;
+	 * @param {boolean} meta Do new data parameters contain `meta` information?
+	 *
+	 * **Used internally by the storage management.**
+	 */
+	setJSON: (newData: object, meta?: boolean) => {
+		if (meta)
+			localStorage.setItem(storageIndex, JSON.stringify(newData));
+		else {
+			const newJSON = { meta: sm.getJSON().meta, data: newData }
+
+			localStorage.setItem(storageIndex, JSON.stringify(newJSON));
+		}
+
+		const data = sm.getJSON();
+
+		data.meta.date.updated = date.full();
+
+		localStorage.setItem(storageIndex, JSON.stringify(newData));
+	},
+
+	/**
+	 * Check if there's already an app's local storage file exists or if it's valid and creates a new one if there's isn't.
+	 *
+	 * **Used internally by the storage management.**
+	 */
+	checkJSON: () => {
+		try {
+			JSON.parse(localStorage.getItem(storageIndex)+'')
+		} catch (error) {
+			sm.createJSON(true);
+		}
+		if (!localStorage.getItem(storageIndex) || !JSON.parse(localStorage.getItem(storageIndex)+'').meta)
+			sm.createJSON(true);
+	},
+
+	/**
+	 * Creates and sets an entire new JSON file on the local storage with meta-information about the app and file itself.
+	 * @param {boolean} reset Force creation of a file even if it's already created?
+	 *
+	 * **Used internally by the storage management.**
+	 */
+	createJSON: (reset?: boolean) => {
+		if (localStorage.getItem(storageIndex) && !reset)
+			return window.alert('ERROR: Local storage already exists');
+
+		const colorTheme = localStorage.getItem('nuxt-color-mode');
+
+		const storage = {
+			meta: {
+				index: storageIndex,
+				name: appInfo.name,
+				version: appInfo.version,
+				theme: colorTheme,
+
+				date: {
+					created: date.full(),
+					updated: date.full(),
+				},
+			},
+			data: {},
+		};
+
+		sm.setJSON(storage, true);
+	},
+};
+
+export default sm;
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 94f8e60..0d04173 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -4,6 +4,10 @@
 			<ToTodayLogo />
 			<p>A single page web app to help yours day-to-day tasks</p>
 			<ThemePicker />
+			<button @click="addItem()">Add storage</button>
+			<button @click="setItem()">Set storage</button>
+			<button @click="resetStorage()">Reset</button>
+			<button @click="invalidate()">Invalidate</button>
 		</div>
 		<PageFooter />
 	</main>
@@ -11,8 +15,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import sm from '~/libs/storageManagement';
 
 export default Vue.extend({
 	name: 'IndexPage',
+	methods:{
+		addItem: () => { sm.add('test1', 3); },
+		setItem: () => { sm.set('test1', sm.get().test1+1); },
+		resetStorage: () => { sm.createJSON(true) },
+		invalidate: () => { localStorage.setItem('ToToday-storage', '{"aaa": "aaa"}') },
+	}
 });
 </script>

From d1e966a7cca8a48458eaf97b37276c530fe091e4 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Wed, 26 Jan 2022 12:31:16 -0300
Subject: [PATCH 03/18] feat(dev, footer): added info about the storage file

Added when the memory/storage file was last updated to the footer and changed copyright from Project Lored to simply Lored.
---
 LICENSE                       |  2 +-
 src/components/PageFooter.vue | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/LICENSE b/LICENSE
index eb6029e..9c2f8be 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Project Lored
+Copyright (c) 2022 Lored
 Copyright (c) 2022 Gustavo "Guz" L. de Mello
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index 9d9306f..9ee7245 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="footer">
 		<p>
-			Version: {{ version }}
+			Version: {{ version }} {{ storage_updated }}
 			<br />
 			<a href="http://github.com/ProjectLored/ToToday.app" target="_blank">
-				(c) 2022 Project Lored &bull; MIT License
+				(c) 2022 Lored &bull; MIT License
 			</a>
 			<br />
 			Icons provided by
@@ -16,12 +16,18 @@
 <script lang="ts">
 import Vue from 'vue';
 import appInfo from '~~/package.json';
+import sm from '~/libs/storageManagement';
+
+const storageUpdated = sm.get(true)?.date ? `- Storage Updated: ${sm.get(true).date.updated.day.readable} ${sm.get(true).date.updated.hour.readable}` : '';
 
 export default Vue.extend({
 	name: 'PageFooter',
 	data() {
-		return {version: appInfo.version};
-	}
+		return {
+			version: appInfo.version,
+			storage_updated: storageUpdated,
+		};
+	},
 });
 </script>
 

From 6f5ff36aac7585d85e444360fde2d8625c00b828 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Wed, 26 Jan 2022 13:01:45 -0300
Subject: [PATCH 04/18] fix(storage and linting): hot-fix on storageManagemtn
 `set` function and formated code.

Simple fix on the `set` function on the storage management that caused the JSON file to be an invalid schema. Formated the code to follow the code style.
---
 nuxt.config.js                 |  7 +++--
 src/components/PageFooter.vue  |  6 ++++-
 src/components/ThemePicker.vue |  6 ++---
 src/libs/date.ts               | 31 ++++++++++++++++------
 src/libs/storageManagement.ts  | 48 ++++++++++++++++++++--------------
 src/pages/index.vue            | 20 +++++++++-----
 6 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index e5d29e1..e05f2c8 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -35,13 +35,12 @@ export default {
 		'@nuxt/image',
 
 		'@nuxtjs/color-mode',
-		
-		'@nuxtjs/pwa'
+
+		'@nuxtjs/pwa',
 	],
 
 	// Modules: https://go.nuxtjs.dev/config-modules
-	modules: [
-	],
+	modules: [],
 
 	// PWA module configuration: https://go.nuxtjs.dev/pwa
 	pwa: {
diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index 9ee7245..5d587d5 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -18,7 +18,11 @@ import Vue from 'vue';
 import appInfo from '~~/package.json';
 import sm from '~/libs/storageManagement';
 
-const storageUpdated = sm.get(true)?.date ? `- Storage Updated: ${sm.get(true).date.updated.day.readable} ${sm.get(true).date.updated.hour.readable}` : '';
+const storageUpdated = sm.get(true)?.date
+	? `- Storage Updated: ${sm.get(true).date.updated.day.readable} ${
+			sm.get(true).date.updated.hour.readable
+	  }`
+	: '';
 
 export default Vue.extend({
 	name: 'PageFooter',
diff --git a/src/components/ThemePicker.vue b/src/components/ThemePicker.vue
index f137ad0..f910d80 100644
--- a/src/components/ThemePicker.vue
+++ b/src/components/ThemePicker.vue
@@ -4,7 +4,7 @@
 			@click="
 				$colorMode.preference =
 					$colorMode.preference === 'dark' ? 'light' : 'dark';
-				updateThemeInfo($colorMode.preference)
+				updateThemeInfo($colorMode.preference);
 			"
 		>
 			<IconMoon class="light-mode-element" />
@@ -19,8 +19,8 @@ import sm from '~/libs/storageManagement';
 
 export default Vue.extend({
 	methods: {
-		updateThemeInfo: (theme) => sm.set('theme', theme, false, true)
-	}
+		updateThemeInfo: (theme) => sm.set('theme', theme, false, true),
+	},
 });
 </script>
 
diff --git a/src/libs/date.ts b/src/libs/date.ts
index bb01b6f..e6f4446 100644
--- a/src/libs/date.ts
+++ b/src/libs/date.ts
@@ -1,7 +1,19 @@
-const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+const months = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December',
+];
 
 const date = {
-
 	dayNumber: () => new Date().getDate(),
 
 	month: () => new Date().getMonth(),
@@ -12,23 +24,27 @@ const date = {
 
 	day: (): any => {
 		return {
-			readable: `${String(date.dayNumber()).padStart(2, '0')} ${date.monthName(Number(date.month()))} ${date.year()}`,
+			readable: `${String(date.dayNumber()).padStart(2, '0')} ${date.monthName(
+				Number(date.month())
+			)} ${date.year()}`,
 			number: date.dayNumber(),
 			month: date.month(),
 			year: date.year(),
-		}
+		};
 	},
 
 	hours: () => {
 		const d = new Date();
 
 		return {
-			readable: `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`,
+			readable: `${String(d.getHours()).padStart(2, '0')}:${String(
+				d.getMinutes()
+			).padStart(2, '0')}`,
 			hours: d.getHours(),
 			minutes: d.getMinutes(),
 			seconds: d.getSeconds(),
 			milliseconds: d.getMilliseconds(),
-		}
+		};
 	},
 
 	timeZone: () => String(new Date().getTimezoneOffset()),
@@ -38,9 +54,8 @@ const date = {
 			day: date.day(),
 			hour: date.hours(),
 			timeZone: date.timeZone(),
-		}
+		};
 	},
-
 };
 
 export default date;
diff --git a/src/libs/storageManagement.ts b/src/libs/storageManagement.ts
index 0e231af..98c1f8b 100644
--- a/src/libs/storageManagement.ts
+++ b/src/libs/storageManagement.ts
@@ -15,12 +15,11 @@ const sm = {
 	add: (key: string, value: any) => {
 		const data = sm.getJSON().data;
 
-		if ( data[key] ) return window.alert('ERROR: Value already in storage');
+		if (data[key]) return window.alert('ERROR: Value already in storage');
 
 		data[key] = value;
 
 		sm.setJSON(data);
-
 	},
 
 	/**
@@ -32,9 +31,13 @@ const sm = {
 	 *
 	 * @returns The old value of the key, if `getOld` is `true`.
 	 */
-	set: (key: string, value: any, getOld?: boolean, meta?: boolean): void | any => {
-
-		if( meta ) {
+	set: (
+		key: string,
+		value: any,
+		getOld?: boolean,
+		meta?: boolean
+	): void | any => {
+		if (meta) {
 			const metaData = sm.getJSON();
 			metaData.meta[key] = value;
 			sm.setJSON(metaData, true);
@@ -45,17 +48,17 @@ const sm = {
 
 		const oldValue = data[key];
 
-		if ( !data[key] ) return sm.add(key, value);
+		if (!data[key]) return sm.add(key, value);
 
 		data[key] = value;
 
 		sm.setJSON(data);
 
-		if ( getOld ) return oldValue;
+		if (getOld) return oldValue;
 	},
 
 	get: (meta?: boolean) => {
-		const storage = sm.getJSON()
+		const storage = sm.getJSON();
 
 		if (meta) {
 			return storage.meta;
@@ -84,19 +87,23 @@ const sm = {
 	 * **Used internally by the storage management.**
 	 */
 	setJSON: (newData: object, meta?: boolean) => {
-		if (meta)
-			localStorage.setItem(storageIndex, JSON.stringify(newData));
+		if (meta) localStorage.setItem(storageIndex, JSON.stringify(newData));
 		else {
-			const newJSON = { meta: sm.getJSON().meta, data: newData }
+			const newJSON = { meta: sm.getJSON().meta, data: newData };
 
 			localStorage.setItem(storageIndex, JSON.stringify(newJSON));
+
+			const updatedMeta = sm.getJSON().meta;
+
+			updatedMeta.date.updated = date.full();
+
+			const updatedJSON = {
+				meta: updatedMeta,
+				data: newData,
+			};
+
+			localStorage.setItem(storageIndex, JSON.stringify(updatedJSON));
 		}
-
-		const data = sm.getJSON();
-
-		data.meta.date.updated = date.full();
-
-		localStorage.setItem(storageIndex, JSON.stringify(newData));
 	},
 
 	/**
@@ -106,11 +113,14 @@ const sm = {
 	 */
 	checkJSON: () => {
 		try {
-			JSON.parse(localStorage.getItem(storageIndex)+'')
+			JSON.parse(localStorage.getItem(storageIndex) + '');
 		} catch (error) {
 			sm.createJSON(true);
 		}
-		if (!localStorage.getItem(storageIndex) || !JSON.parse(localStorage.getItem(storageIndex)+'').meta)
+		if (
+			!localStorage.getItem(storageIndex) ||
+			!JSON.parse(localStorage.getItem(storageIndex) + '').meta
+		)
 			sm.createJSON(true);
 	},
 
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0d04173..9cc5ee8 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -19,11 +19,19 @@ import sm from '~/libs/storageManagement';
 
 export default Vue.extend({
 	name: 'IndexPage',
-	methods:{
-		addItem: () => { sm.add('test1', 3); },
-		setItem: () => { sm.set('test1', sm.get().test1+1); },
-		resetStorage: () => { sm.createJSON(true) },
-		invalidate: () => { localStorage.setItem('ToToday-storage', '{"aaa": "aaa"}') },
-	}
+	methods: {
+		addItem: () => {
+			sm.add('test1', 3);
+		},
+		setItem: () => {
+			sm.set('test1', sm.get().test1 + 1);
+		},
+		resetStorage: () => {
+			sm.createJSON(true);
+		},
+		invalidate: () => {
+			localStorage.setItem('ToToday-storage', '{"aaa": "aaa"}');
+		},
+	},
 });
 </script>

From f78a89d81b33f8ad42d40dd6c6bc925961ea71f5 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Fri, 28 Jan 2022 11:07:41 -0300
Subject: [PATCH 05/18] fix(theme): changed and added colors

Updated the page's colors to follow the CatCupp pastel theme.
---
 package.json                      |  2 +-
 src/assets/styles/_colors.scss    | 39 +++++++++++++++++++++++++++++++
 src/assets/styles/_variables.scss | 13 ++++++-----
 3 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/styles/_colors.scss

diff --git a/package.json b/package.json
index 5c24f69..2d5fe27 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
new file mode 100644
index 0000000..b4cbdd3
--- /dev/null
+++ b/src/assets/styles/_colors.scss
@@ -0,0 +1,39 @@
+$eerie-black0: #161320;
+$eerie-black1: #1a1826;
+$eerie-black2: #1e1e2e;
+$eerie-black3: #302d41;
+
+$independence-gray0: #575268;
+$independence-gray1: #6e6c7e;
+$independence-gray2: #988ba2;
+$independence-gray3: #c3bac6;
+
+$azure-white: #d9e0ee;
+
+$lavender0: #c9cbff;
+
+$sky0: #8fe8f7;
+$sky1: #89dceb;
+$sky2: #79c4d1;
+$sky3: #63a0ab;
+$sky4: #3e646b;
+
+$blue0: #96cdfb;
+$blue1: #8fcdef;
+$blue2: #7099ba;
+$blue3: #49647a;
+$blue4: #23303b;
+
+$green0: #b3f5bc;
+$green1: #abe9b3;
+$green2: #97cf9e;
+$green3: #7ba881;
+$green4: #4c6950;
+
+$begonia-red0: #fc6d6d;
+$begonia-red1: #e36262;
+$begonia-red2: #bd5151;
+$begonia-red3: #7d3636;
+$begonia-red4: #3d1a1a;
+
+$pale2: #b5a6a3;
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 1a85447..b538f21 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -1,12 +1,13 @@
 @import '~assets/styles/fonts.css';
+@import '~assets/styles/_colors.scss';
 
-$light-background: #fff;
-$light-primary: #000;
-$light-secondary: #afafaf;
+$light-background: $azure-white;
+$light-primary: $eerie-black0;
+$light-secondary: $independence-gray1;
 
-$dark-background: #181b23;
-$dark-primary: #eaf3f2;
-$dark-secondary: #697699;
+$dark-background: $eerie-black1;
+$dark-primary: $azure-white;
+$dark-secondary: $eerie-black3;
 
 $main-font: 'Red Display', arial, helvetica, sans-serif;
 $secondary-font: 'Fira Code', monospace, sans-serif;

From 191dcad134fe4fe2745fe109fd7ea9a520faf85b Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Fri, 28 Jan 2022 11:15:07 -0300
Subject: [PATCH 06/18] feat(tasks): Created the base of the Task Component

---
 package.json                        |   2 +-
 src/assets/styles/_mixins.scss      |  12 ++
 src/components/TaskComp.vue         | 202 ++++++++++++++++++++++++++++
 src/components/icon/Checked.vue     |  30 +++++
 src/components/icon/Unchecked.vue   |  30 +++++
 src/static/icons/completed-icon.svg |   4 +
 src/static/icons/pending-icon.svg   |   4 +
 7 files changed, 283 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TaskComp.vue
 create mode 100644 src/components/icon/Checked.vue
 create mode 100644 src/components/icon/Unchecked.vue
 create mode 100644 src/static/icons/completed-icon.svg
 create mode 100644 src/static/icons/pending-icon.svg

diff --git a/package.json b/package.json
index 2d5fe27..68e55f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss
index 40b29f9..6546e05 100644
--- a/src/assets/styles/_mixins.scss
+++ b/src/assets/styles/_mixins.scss
@@ -31,3 +31,15 @@
 	justify-content: center;
 	text-align: center;
 }
+
+@mixin colorFadeAnim($fromColor, $toColor, $duration, $id) {
+	@keyframes colorFadeAnim-#{$id} {
+		from {
+			stroke: $fromColor;
+		}
+		to {
+			stroke: $toColor;
+		}
+	}
+	animation: colorFadeAnim-#{$id} $duration;
+}
diff --git a/src/components/TaskComp.vue b/src/components/TaskComp.vue
new file mode 100644
index 0000000..efdad2c
--- /dev/null
+++ b/src/components/TaskComp.vue
@@ -0,0 +1,202 @@
+<template>
+	<li :id="id" class="task">
+		<label class="checkbox" :for="`checkboxInput${id}`">
+			<input :id="`checkboxInput${id}`" type="checkbox" />
+			<div class="icons animate">
+				<IconChecked class="checkedIcon" />
+				<IconUnchecked class="uncheckedIcon" />
+			</div>
+		</label>
+		<div class="info">
+			<h1>{{ title }}</h1>
+			<p>{{ description }}</p>
+		</div>
+	</li>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'TaskComp',
+	props: {
+		id: {
+			type: Number,
+			required: true,
+		},
+		title: {
+			type: String,
+			default: 'Task Title',
+		},
+		description: {
+			type: String,
+			default: 'Task short description',
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+$checked-color: $green0;
+$unchecked-color: $begonia-red0;
+
+.task {
+	.light-mode & {
+		background-color: $blue0;
+		color: $independence-gray0;
+	}
+	.dark-mode & {
+		background-color: $eerie-black0;
+		color: $dark-primary;
+	}
+
+	display: flex;
+	text-align: left;
+	align-items: center;
+
+	border-radius: 20px;
+	margin-top: 5%;
+	padding: 10px;
+
+	.checkbox {
+		padding: 1%;
+		padding-right: 2%;
+
+		input {
+			display: none;
+		}
+		input[type='checkbox']:checked + .icons {
+			animation: iconAnim 1s;
+			.checkedIcon {
+				display: inline-block;
+			}
+			.uncheckedIcon {
+				display: none;
+			}
+
+			.checkedIcon *,
+			.uncheckedIcon * {
+				.light-mode & {
+					@include colorFadeAnim(
+						$unchecked-color,
+						$checked-color,
+						1s,
+						'checkLight'
+					);
+					stroke: $checked-color;
+				}
+				.dark-mode & {
+					@include colorFadeAnim(
+						$unchecked-color,
+						$checked-color,
+						1s,
+						'checkDark'
+					);
+					stroke: $checked-color;
+				}
+			}
+		}
+		input[type='checkbox']:not(:checked) + .icons {
+			animation: iconAnimReverse 1s;
+			.checkedIcon {
+				display: none;
+			}
+			.uncheckedIcon {
+				display: inline-block;
+			}
+
+			.checkedIcon *,
+			.uncheckedIcon * {
+				.light-mode & {
+					@include colorFadeAnim(
+						$checked-color,
+						$unchecked-color,
+						1s,
+						'uncheckLight'
+					);
+					stroke: $unchecked-color;
+				}
+				.dark-mode & {
+					@include colorFadeAnim(
+						$checked-color,
+						$unchecked-color,
+						1s,
+						'uncheckDark'
+					);
+					stroke: $unchecked-color;
+				}
+			}
+		}
+		.icons {
+			@include center;
+			$bg-color: #00000080;
+
+			background-color: $bg-color;
+
+			margin: 2px;
+			padding: 2px;
+			border-radius: 50%;
+
+			.checkedIcon *,
+			.uncheckedIcon * {
+				.light-mode & {
+					stroke: $unchecked-color;
+				}
+				.dark-mode & {
+					stroke: $unchecked-color;
+				}
+			}
+		}
+
+		@keyframes iconAnim {
+			from {
+				transform: rotate(0) scale(1);
+			}
+			5% {
+				transform: rotate(0) scale(0.7);
+			}
+			50% {
+				transform: rotate(360deg) scale(1.2);
+			}
+			90% {
+				transform: scale(1.2);
+			}
+			to {
+				transform: scale(1);
+			}
+		}
+
+		@keyframes iconAnimReverse {
+			from {
+				transform: rotate(0) scale(1);
+			}
+			5% {
+				transform: rotate(0) scale(0.7);
+			}
+			50% {
+				transform: rotate(-360deg) scale(1);
+			}
+			to {
+				transform: rotate(-360deg) scale(1);
+			}
+		}
+	}
+
+	.info {
+		display: inline-block;
+
+		h1 {
+			font-size: 1.2em;
+			margin: 0;
+		}
+
+		p {
+			font-family: $secondary-font;
+			font-size: 0.8em;
+			margin: 0;
+		}
+	}
+}
+</style>
diff --git a/src/components/icon/Checked.vue b/src/components/icon/Checked.vue
new file mode 100644
index 0000000..868361a
--- /dev/null
+++ b/src/components/icon/Checked.vue
@@ -0,0 +1,30 @@
+<template>
+	<svg
+		width="24"
+		height="24"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M7 12.5L10 15.5L17 8.5"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'IconChecked',
+});
+</script>
diff --git a/src/components/icon/Unchecked.vue b/src/components/icon/Unchecked.vue
new file mode 100644
index 0000000..885ba48
--- /dev/null
+++ b/src/components/icon/Unchecked.vue
@@ -0,0 +1,30 @@
+<template>
+	<svg
+		width="24"
+		height="24"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M8 12H16"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'IconUnchecked',
+});
+</script>
diff --git a/src/static/icons/completed-icon.svg b/src/static/icons/completed-icon.svg
new file mode 100644
index 0000000..cca4d83
--- /dev/null
+++ b/src/static/icons/completed-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 12.5L10 15.5L17 8.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/static/icons/pending-icon.svg b/src/static/icons/pending-icon.svg
new file mode 100644
index 0000000..d6b4e80
--- /dev/null
+++ b/src/static/icons/pending-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12H16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From cfdab5b7a487bfb21afee11f1443feefb67701a8 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sat, 29 Jan 2022 11:37:56 -0300
Subject: [PATCH 07/18] feat(storageManagement): added `sm.remove()`, function
 now find the value's nested path, created `utils.ts`.

Created the `sm.remove()` function that, as its name implies, removes a value inside of LocalStorage's data;

Functions on StorageManagement now uses the nested path to locate a value on the LocalStorage;

Added description to `sm.get()`;

Created `utils.ts` for common functions/utilities;
---
 src/components/PageFooter.vue | 21 ++++++----
 src/libs/storageManagement.ts | 79 +++++++++++++++++++++++++----------
 src/libs/utils.ts             | 34 +++++++++++++++
 3 files changed, 106 insertions(+), 28 deletions(-)
 create mode 100644 src/libs/utils.ts

diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index 5d587d5..8db8ddd 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -18,20 +18,27 @@ import Vue from 'vue';
 import appInfo from '~~/package.json';
 import sm from '~/libs/storageManagement';
 
-const storageUpdated = sm.get(true)?.date
-	? `- Storage Updated: ${sm.get(true).date.updated.day.readable} ${
-			sm.get(true).date.updated.hour.readable
-	  }`
-	: '';
-
 export default Vue.extend({
 	name: 'PageFooter',
 	data() {
 		return {
 			version: appInfo.version,
-			storage_updated: storageUpdated,
+			storage_updated: sm.get('date.updated', true)
+				? `- Storage Updated: ${sm.get('date.updated', true).day.readable} ${
+						sm.get('date.updated', true).hour.readable
+				  }`
+				: '',
 		};
 	},
+	mounted() {
+		window.addEventListener('localStorage-changed', () => {
+			this.storage_updated = sm.get('date.updated', true)
+				? `- Storage Updated: ${sm.get('date.updated', true).day.readable} ${
+						sm.get('date.updated', true).hour.readable
+				  }`
+				: '';
+		});
+	},
 });
 </script>
 
diff --git a/src/libs/storageManagement.ts b/src/libs/storageManagement.ts
index 98c1f8b..17a0034 100644
--- a/src/libs/storageManagement.ts
+++ b/src/libs/storageManagement.ts
@@ -1,5 +1,6 @@
 import appInfo from '~~/package.json';
 import date from '~/libs/date';
+import obj from '~/libs/utils';
 
 const storageIndex = 'ToToday-storage';
 
@@ -9,66 +10,95 @@ const storageIndex = 'ToToday-storage';
 const sm = {
 	/**
 	 * Adds new value on `data`. *Don't create or rewrite the value if it already exists.*
-	 * @param {string} key New key on `data`;
+	 * @param {string} path New value's path on `data`;
 	 * @param {any} value New value;
 	 */
-	add: (key: string, value: any) => {
-		const data = sm.getJSON().data;
+	add: (path: string, value: any) => {
 
-		if (data[key]) return window.alert('ERROR: Value already in storage');
+		let data = sm.getJSON().data;
 
-		data[key] = value;
+
+		if (obj.getByString(data, `data.${path}`))
+			return window.alert('ERROR: Value already in storage');
+
+		data = obj.setByString(data, value, path);
 
 		sm.setJSON(data);
 	},
 
 	/**
-	 * Rewrite a value inside of `data` with a new *(creates a new key/value if it's doesn't exist before)*.
-	 * @param {string} key Value's key on `data`;
+	 * Rewrite a value inside of `data` with a new *(creates a new path/value if it's doesn't exist before)*.
+	 * @param {string} path Value's path on `data`;
 	 * @param {any} value The new value to replace;
-	 * @param {boolean | undefined} getOld Return the old value of the key?
+	 * @param {boolean | undefined} getOld Return the old value of the path?
 	 * @param {boolean | undefined} meta Update a value on `meta`?
 	 *
-	 * @returns The old value of the key, if `getOld` is `true`.
+	 * @returns The old value of the path, if `getOld` is `true`.
 	 */
 	set: (
-		key: string,
+		path: string,
 		value: any,
 		getOld?: boolean,
 		meta?: boolean
 	): void | any => {
 		if (meta) {
-			const metaData = sm.getJSON();
-			metaData.meta[key] = value;
+			let metaData = sm.getJSON();
+			metaData = obj.setByString(metaData, undefined, path);
 			sm.setJSON(metaData, true);
 			return;
 		}
 
-		const data = sm.getJSON().data;
+		let data = sm.getJSON().data;
 
-		const oldValue = data[key];
+		if (obj.getByString(data, path)) return sm.add(path, value);
 
-		if (!data[key]) return sm.add(key, value);
+		const oldValue = obj.getByString(data, path);
 
-		data[key] = value;
+		data = obj.setByString(data, value, path);
 
 		sm.setJSON(data);
 
 		if (getOld) return oldValue;
 	},
 
-	get: (meta?: boolean) => {
+	/**
+	 * Gets a value from localStorage*.
+	 * @param {string} path Value's path on `data`;
+	 * @param {boolean | undefined} meta Update a value on `meta`?
+	 *
+	 * @returns {any | undefined} Value on localStorage (or undefined if no value wasn't found).
+	 */
+	get: (path: string, meta?: boolean): any | undefined => {
 		const storage = sm.getJSON();
 
-		if (meta) {
-			return storage.meta;
-		}
+		if (meta && path) return obj.getByString(storage, `meta.${path}`);
+		else if (meta) return storage.meta;
 
-		if (storage.data) return storage.data;
+		if (path && obj.getByString(storage, `data.${path}`) !== undefined)
+			return obj.getByString(storage, `data.${path}`);
 
 		return undefined;
 	},
 
+	/**
+	 * Removes a value from localStorage's data
+	 * @param {string} path Value's path on `data`;
+	 * @param {boolean | undefined} getOld Return the old value of the path?
+	 *
+	 * @returns The old value of the path, if `getOld` is `true`.
+	 */
+	remove: (path: string, getOld?: boolean): void | any => {
+		let data = sm.getJSON().data;
+
+		const oldValue = obj.getByString(data, path);
+
+		data = obj.setByString(data, undefined, path);
+
+		sm.setJSON(data);
+
+		if (getOld) return oldValue;
+	},
+
 	/**
 	 * Gets and parses the local storage JSON file.
 	 *
@@ -104,6 +134,7 @@ const sm = {
 
 			localStorage.setItem(storageIndex, JSON.stringify(updatedJSON));
 		}
+		window.dispatchEvent(new CustomEvent('localStorage-changed'));
 	},
 
 	/**
@@ -122,6 +153,12 @@ const sm = {
 			!JSON.parse(localStorage.getItem(storageIndex) + '').meta
 		)
 			sm.createJSON(true);
+
+		if (
+			!localStorage.getItem(storageIndex) ||
+			!JSON.parse(localStorage.getItem(storageIndex) + '').data
+		)
+			sm.createJSON(true);
 	},
 
 	/**
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
new file mode 100644
index 0000000..6c6e327
--- /dev/null
+++ b/src/libs/utils.ts
@@ -0,0 +1,34 @@
+// * Thanks Alnitak for the original code https://stackoverflow.com/a/6491621
+
+const resolvePath = (path: string) => {
+	path = path.replace(/\[(\w+)\]/g, '.$1');
+	path = path.replace(/^\./, '');
+	return path.split('.');
+}
+
+const obj = {
+	setByString: (object: object | any, newValue: any, path: string) => {
+		const a = resolvePath(path);
+
+		for (let i = 0; i < a.length; i++) {
+			const k = a[i];
+			object[k] = newValue;
+		}
+
+		return object;
+	},
+	getByString: (object: object | any, path: string) => {
+		const a = resolvePath(path);
+		for (let i = 0; i < a.length; i++) {
+			const k = a[i];
+			if (k in object) {
+				object = object[k];
+			} else {
+				return undefined;
+			}
+		}
+		return object;
+	},
+};
+
+export default obj;

From b2e4b822e8e3540c1798c129fb5135736a194291 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sat, 29 Jan 2022 11:39:50 -0300
Subject: [PATCH 08/18] debug: removed buttons used for debugging the task
 component

---
 src/pages/index.vue | 23 +++--------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9cc5ee8..38d92e1 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -4,10 +4,9 @@
 			<ToTodayLogo />
 			<p>A single page web app to help yours day-to-day tasks</p>
 			<ThemePicker />
-			<button @click="addItem()">Add storage</button>
-			<button @click="setItem()">Set storage</button>
-			<button @click="resetStorage()">Reset</button>
-			<button @click="invalidate()">Invalidate</button>
+		</div>
+		<div>
+			<TaskList/>
 		</div>
 		<PageFooter />
 	</main>
@@ -15,23 +14,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import sm from '~/libs/storageManagement';
-
 export default Vue.extend({
 	name: 'IndexPage',
-	methods: {
-		addItem: () => {
-			sm.add('test1', 3);
-		},
-		setItem: () => {
-			sm.set('test1', sm.get().test1 + 1);
-		},
-		resetStorage: () => {
-			sm.createJSON(true);
-		},
-		invalidate: () => {
-			localStorage.setItem('ToToday-storage', '{"aaa": "aaa"}');
-		},
-	},
 });
 </script>

From e6d036784f47f1c424a4f5c277c88edbad5e2f76 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sat, 29 Jan 2022 11:46:57 -0300
Subject: [PATCH 09/18] feat(taskList): created task list and improved task
 component

Created the Task List component to handle and render the Task components dynamically;

Improved Task component to now be able to delete itself from the list / added task controls;

Task's state now are saved in LocalStorage;

Added animations to Task Components;
---
 package.json                  |   2 +-
 src/assets/styles/global.scss |   6 +
 src/components/TaskComp.vue   | 344 ++++++++++++++++++++++------------
 src/components/TaskList.vue   |  73 ++++++++
 src/components/icon/Trash.vue |  42 +++++
 src/static/icons/trash.svg    |   6 +
 6 files changed, 348 insertions(+), 125 deletions(-)
 create mode 100644 src/components/TaskList.vue
 create mode 100644 src/components/icon/Trash.vue
 create mode 100644 src/static/icons/trash.svg

diff --git a/package.json b/package.json
index 68e55f7..bd80041 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 597b70c..2e87fd5 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -21,11 +21,17 @@ body {
 .light-mode body {
 	background-color: $light-background;
 	color: $light-primary;
+	* {
+		stroke: $light-secondary;
+	}
 }
 
 .dark-mode body {
 	background-color: $dark-background;
 	color: $dark-primary;
+	* {
+		stroke: $dark-secondary;
+	}
 }
 
 /*
diff --git a/src/components/TaskComp.vue b/src/components/TaskComp.vue
index efdad2c..56eec78 100644
--- a/src/components/TaskComp.vue
+++ b/src/components/TaskComp.vue
@@ -1,21 +1,34 @@
 <template>
-	<li :id="id" class="task">
-		<label class="checkbox" :for="`checkboxInput${id}`">
-			<input :id="`checkboxInput${id}`" type="checkbox" />
-			<div class="icons animate">
-				<IconChecked class="checkedIcon" />
-				<IconUnchecked class="uncheckedIcon" />
+	<li :id="`task${id}`" :class="`${newTask ? 'newTask ' : ''}task`">
+		<div class="taskInfo">
+			<label
+				class="checkbox"
+				:for="`checkboxInput${id}`"
+				@click="changeState()"
+			>
+				<input :id="`checkboxInput${id}`" type="checkbox" :checked="checked" />
+				<div class="icons animate">
+					<IconChecked class="checkedIcon" />
+					<IconUnchecked class="uncheckedIcon" />
+				</div>
+			</label>
+			<div class="info">
+				<h1>{{ title }}</h1>
+				<p>{{ description }}</p>
 			</div>
-		</label>
-		<div class="info">
-			<h1>{{ title }}</h1>
-			<p>{{ description }}</p>
 		</div>
+		<nav class="controls">
+			<button class="deleteButton" @click="deleteTask()">
+				<IconTrash class="trashIcon" />
+			</button>
+		</nav>
 	</li>
 </template>
 
-<script lang="ts">
+<script lang="js">
 import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
 export default Vue.extend({
 	name: 'TaskComp',
 	props: {
@@ -31,7 +44,28 @@ export default Vue.extend({
 			type: String,
 			default: 'Task short description',
 		},
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		newTask: {
+			type: Boolean,
+			default: false,
+		}
 	},
+	methods: {
+		changeState() {
+			const state = document.querySelector(`input#checkboxInput${this.id}`)?.checked;
+			const tasks = sm.get('tasks');
+			tasks[this.id].checked = state;
+			sm.set('tasks', tasks);
+		},
+		deleteTask() {
+			const localTasks = sm.get('tasks');
+			localTasks.splice(this.id, 1);
+			sm.set('tasks', localTasks);
+		}
+	}
 });
 </script>
 
@@ -42,6 +76,16 @@ export default Vue.extend({
 $checked-color: $green0;
 $unchecked-color: $begonia-red0;
 
+.newTask {
+	animation-delay: 0s !important;
+}
+
+@for $i from 1 through 100 {
+	.task#task#{$i} {
+		animation-delay: #{$i * 0.2}s;
+	}
+}
+
 .task {
 	.light-mode & {
 		background-color: $blue0;
@@ -52,151 +96,203 @@ $unchecked-color: $begonia-red0;
 		color: $dark-primary;
 	}
 
-	display: flex;
-	text-align: left;
-	align-items: center;
-
 	border-radius: 20px;
 	margin-top: 5%;
 	padding: 10px;
 
-	.checkbox {
-		padding: 1%;
-		padding-right: 2%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-right: 5%;
 
-		input {
-			display: none;
+	opacity: 0;
+	transform: translateY(50%);
+
+	animation: enter 0.5s ease-out;
+	animation-fill-mode: forwards;
+
+	@keyframes enter {
+		from {
+			opacity: 0;
+			transform: translateY(50%);
 		}
-		input[type='checkbox']:checked + .icons {
-			animation: iconAnim 1s;
-			.checkedIcon {
-				display: inline-block;
-			}
-			.uncheckedIcon {
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.taskInfo {
+		display: flex;
+		text-align: left;
+		align-items: center;
+		width: 100%;
+
+		.checkbox {
+			padding: 1%;
+			padding-right: 2%;
+
+			input {
 				display: none;
 			}
-
-			.checkedIcon *,
-			.uncheckedIcon * {
-				.light-mode & {
-					@include colorFadeAnim(
-						$unchecked-color,
-						$checked-color,
-						1s,
-						'checkLight'
-					);
-					stroke: $checked-color;
+			input[type='checkbox']:checked + .icons {
+				animation: iconAnim 1s;
+				.checkedIcon {
+					display: inline-block;
 				}
-				.dark-mode & {
-					@include colorFadeAnim(
-						$unchecked-color,
-						$checked-color,
-						1s,
-						'checkDark'
-					);
-					stroke: $checked-color;
+				.uncheckedIcon {
+					display: none;
+				}
+
+				.checkedIcon *,
+				.uncheckedIcon * {
+					.light-mode & {
+						@include colorFadeAnim(
+							$unchecked-color,
+							$checked-color,
+							1s,
+							'checkLight'
+						);
+						stroke: $checked-color;
+					}
+					.dark-mode & {
+						@include colorFadeAnim(
+							$unchecked-color,
+							$checked-color,
+							1s,
+							'checkDark'
+						);
+						stroke: $checked-color;
+					}
 				}
 			}
-		}
-		input[type='checkbox']:not(:checked) + .icons {
-			animation: iconAnimReverse 1s;
-			.checkedIcon {
-				display: none;
-			}
-			.uncheckedIcon {
-				display: inline-block;
-			}
-
-			.checkedIcon *,
-			.uncheckedIcon * {
-				.light-mode & {
-					@include colorFadeAnim(
-						$checked-color,
-						$unchecked-color,
-						1s,
-						'uncheckLight'
-					);
-					stroke: $unchecked-color;
+			input[type='checkbox']:not(:checked) + .icons {
+				animation: iconAnimReverse 1s;
+				.checkedIcon {
+					display: none;
 				}
-				.dark-mode & {
-					@include colorFadeAnim(
-						$checked-color,
-						$unchecked-color,
-						1s,
-						'uncheckDark'
-					);
-					stroke: $unchecked-color;
+				.uncheckedIcon {
+					display: inline-block;
+				}
+
+				.checkedIcon *,
+				.uncheckedIcon * {
+					.light-mode & {
+						@include colorFadeAnim(
+							$checked-color,
+							$unchecked-color,
+							1s,
+							'uncheckLight'
+						);
+						stroke: $unchecked-color;
+					}
+					.dark-mode & {
+						@include colorFadeAnim(
+							$checked-color,
+							$unchecked-color,
+							1s,
+							'uncheckDark'
+						);
+						stroke: $unchecked-color;
+					}
 				}
 			}
-		}
-		.icons {
-			@include center;
-			$bg-color: #00000080;
+			.icons {
+				@include center;
+				$bg-color: #00000080;
 
-			background-color: $bg-color;
+				background-color: $bg-color;
 
-			margin: 2px;
-			padding: 2px;
-			border-radius: 50%;
+				margin: 2px;
+				padding: 2px;
+				border-radius: 50%;
 
-			.checkedIcon *,
-			.uncheckedIcon * {
-				.light-mode & {
-					stroke: $unchecked-color;
+				.checkedIcon *,
+				.uncheckedIcon * {
+					.light-mode & {
+						stroke: $unchecked-color;
+					}
+					.dark-mode & {
+						stroke: $unchecked-color;
+					}
 				}
-				.dark-mode & {
-					stroke: $unchecked-color;
+			}
+
+			@keyframes iconAnim {
+				from {
+					transform: rotate(0) scale(1);
+				}
+				5% {
+					transform: rotate(0) scale(0.7);
+				}
+				50% {
+					transform: rotate(360deg) scale(1.2);
+				}
+				90% {
+					transform: scale(1.2);
+				}
+				to {
+					transform: scale(1);
+				}
+			}
+
+			@keyframes iconAnimReverse {
+				from {
+					transform: rotate(0) scale(1);
+				}
+				5% {
+					transform: rotate(0) scale(0.7);
+				}
+				50% {
+					transform: rotate(-360deg) scale(1);
+				}
+				to {
+					transform: rotate(-360deg) scale(1);
 				}
 			}
 		}
 
-		@keyframes iconAnim {
-			from {
-				transform: rotate(0) scale(1);
-			}
-			5% {
-				transform: rotate(0) scale(0.7);
-			}
-			50% {
-				transform: rotate(360deg) scale(1.2);
-			}
-			90% {
-				transform: scale(1.2);
-			}
-			to {
-				transform: scale(1);
-			}
-		}
+		.info {
+			display: inline-block;
 
-		@keyframes iconAnimReverse {
-			from {
-				transform: rotate(0) scale(1);
+			h1 {
+				font-size: 1.2em;
+				margin: 0;
 			}
-			5% {
-				transform: rotate(0) scale(0.7);
-			}
-			50% {
-				transform: rotate(-360deg) scale(1);
-			}
-			to {
-				transform: rotate(-360deg) scale(1);
+
+			p {
+				font-family: $secondary-font;
+				font-size: 0.8em;
+				margin: 0;
 			}
 		}
 	}
 
-	.info {
-		display: inline-block;
+	.controls {
+		opacity: 0;
+		@media (pointer: none), (pointer: coarse) {
+			opacity: 0.5;
+		}
+		transition: opacity 0.2s;
 
-		h1 {
-			font-size: 1.2em;
-			margin: 0;
+		button {
+			background-color: transparent;
+			padding: 1px;
+			border: 0;
+			cursor: pointer;
 		}
 
-		p {
-			font-family: $secondary-font;
-			font-size: 0.8em;
-			margin: 0;
+		.trashIcon {
+			* {
+				transition: stroke 0.2s;
+			}
+			&:hover * {
+				stroke: $unchecked-color;
+			}
 		}
 	}
+	&:hover .controls {
+		opacity: 1;
+	}
 }
 </style>
diff --git a/src/components/TaskList.vue b/src/components/TaskList.vue
new file mode 100644
index 0000000..92c385e
--- /dev/null
+++ b/src/components/TaskList.vue
@@ -0,0 +1,73 @@
+<template>
+	<div>
+		<ul class="taskList">
+			<TaskComp
+				v-for="task in list"
+				:id="list.indexOf(task)"
+				:key="`task-comp-${list.indexOf(task)}`"
+				:new-task="task.newTask"
+				:title="task.title"
+				:description="task.description"
+				:checked="task.checked"
+			/>
+		</ul>
+		<button @click="addTask()">Add tasks</button>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+const taskItem = {
+	title: 'Task 00',
+	description: 'Task',
+	checked: false,
+	newTask: true,
+};
+
+export default Vue.extend({
+	data() {
+		return {
+			list: sm.get('tasks') ? sm.get('tasks') : [],
+		};
+	},
+	beforeCreate() {
+		if (sm.get('tasks') === undefined) sm.add('tasks', []);
+
+		const localTasks = sm.get('tasks');
+
+		for(const task of localTasks) task.newTask = undefined;
+
+		sm.set('tasks', localTasks);
+	},
+	mounted() {
+		window.addEventListener('localStorage-changed', () => {
+			this.list = sm.get('tasks') ? sm.get('tasks') : [];
+		});
+	},
+	methods: {
+		addTask: () => {
+			if (sm.get('tasks') === undefined) sm.add('tasks', []);
+
+			const localTasks = sm.get('tasks');
+			taskItem.title = `Title Task ${localTasks.length}`;
+			taskItem.description = `Description Task ${localTasks.length}`;
+
+			localTasks.push(taskItem);
+
+			sm.set('tasks', localTasks);
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+.taskList {
+	list-style: none;
+	padding: 0;
+}
+</style>
diff --git a/src/components/icon/Trash.vue b/src/components/icon/Trash.vue
new file mode 100644
index 0000000..7ba7575
--- /dev/null
+++ b/src/components/icon/Trash.vue
@@ -0,0 +1,42 @@
+<template>
+	<svg
+		width="24"
+		height="24"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M19 11V20.4C19 20.7314 18.7314 21 18.4 21H5.6C5.26863 21 5 20.7314 5 20.4V11"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M10 17V11"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M14 17V11"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M21 7L16 7M3 7L8 7M8 7V3.6C8 3.26863 8.26863 3 8.6 3L15.4 3C15.7314 3 16 3.26863 16 3.6V7M8 7L16 7"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'IconTrash',
+});
+</script>
diff --git a/src/static/icons/trash.svg b/src/static/icons/trash.svg
new file mode 100644
index 0000000..a76989c
--- /dev/null
+++ b/src/static/icons/trash.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 11V20.4C19 20.7314 18.7314 21 18.4 21H5.6C5.26863 21 5 20.7314 5 20.4V11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 17V11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 17V11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 7L16 7M3 7L8 7M8 7V3.6C8 3.26863 8.26863 3 8.6 3L15.4 3C15.7314 3 16 3.26863 16 3.6V7M8 7L16 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 6a5cf5edda09ccd368e79c0ee774eeca3ae539fa Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sun, 30 Jan 2022 17:41:25 -0300
Subject: [PATCH 10/18] style: code style in some files

---
 src/libs/storageManagement.ts | 2 --
 src/libs/utils.ts             | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/libs/storageManagement.ts b/src/libs/storageManagement.ts
index 17a0034..dcf0598 100644
--- a/src/libs/storageManagement.ts
+++ b/src/libs/storageManagement.ts
@@ -14,10 +14,8 @@ const sm = {
 	 * @param {any} value New value;
 	 */
 	add: (path: string, value: any) => {
-
 		let data = sm.getJSON().data;
 
-
 		if (obj.getByString(data, `data.${path}`))
 			return window.alert('ERROR: Value already in storage');
 
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 6c6e327..8d4e3ae 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -4,7 +4,7 @@ const resolvePath = (path: string) => {
 	path = path.replace(/\[(\w+)\]/g, '.$1');
 	path = path.replace(/^\./, '');
 	return path.split('.');
-}
+};
 
 const obj = {
 	setByString: (object: object | any, newValue: any, path: string) => {

From 51c4618d9c6283f43c90587628906968603f417b Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sun, 30 Jan 2022 17:50:27 -0300
Subject: [PATCH 11/18] fix(animations): animations played before necessary /
 on page load, files location;

Fixed animation being played right after pages load, created `.preventAnimLoad` (used on a parent element that's being loaded), and `.preventAnim` classes (used on the element with the animation to be prevented) to this;

Moved `TaskList.vue` and `TaskComp.vue` to Task (`components/Task`) for better organization.
---
 src/assets/styles/_variables.scss      |   3 +
 src/assets/styles/global.scss          |   4 +
 src/components/Task/TaskComp.vue       | 346 +++++++++++++++++++++++++
 src/components/{ => Task}/TaskList.vue |   4 +-
 src/components/TaskComp.vue            | 298 ---------------------
 src/pages/index.vue                    |  14 +-
 6 files changed, 368 insertions(+), 301 deletions(-)
 create mode 100644 src/components/Task/TaskComp.vue
 rename src/components/{ => Task}/TaskList.vue (93%)
 delete mode 100644 src/components/TaskComp.vue

diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index b538f21..761e3ad 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -11,3 +11,6 @@ $dark-secondary: $eerie-black3;
 
 $main-font: 'Red Display', arial, helvetica, sans-serif;
 $secondary-font: 'Fira Code', monospace, sans-serif;
+
+$checked-color: $green0;
+$unchecked-color: $begonia-red0;
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 2e87fd5..f4e472b 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -34,6 +34,10 @@ body {
 	}
 }
 
+.preventAnimLoad * .preventAnim {
+	animation-duration: 0s !important;
+}
+
 /*
 ? Workaround with changing elements depending on the page's theme,
 ? probably there is a better way, using `v-if` and `v-else`, but apparently,
diff --git a/src/components/Task/TaskComp.vue b/src/components/Task/TaskComp.vue
new file mode 100644
index 0000000..fd7c6ae
--- /dev/null
+++ b/src/components/Task/TaskComp.vue
@@ -0,0 +1,346 @@
+<template>
+	<li
+		:id="`task${id}`"
+		:class="`${preventAnim ? 'preventAnimLoad ' : ''}${
+			newTask ? 'newTask ' : ''
+		}taskContainer`"
+	>
+		<div class="taskControl">
+			<div :class="`task`">
+				<div class="taskInfo">
+					<label
+						class="checkbox"
+						:for="`checkboxInput${id}`"
+						@click="changeState()"
+					>
+						<input
+							:id="`checkboxInput${id}`"
+							type="checkbox"
+							:checked="checked"
+						/>
+						<div class="icons animate preventAnim">
+							<IconChecked class="checkedIcon" />
+							<IconUnchecked class="uncheckedIcon" />
+						</div>
+					</label>
+					<div class="info">
+						<h1>{{ title }}</h1>
+						<p>{{ description }}</p>
+					</div>
+				</div>
+			</div>
+			<nav class="controls">
+				<button class="deleteButton" @click="deleteTask()">
+					<IconTrash class="trashIcon" />
+				</button>
+			</nav>
+		</div>
+	</li>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+export default Vue.extend({
+	name: 'TaskComp',
+	props: {
+		id: {
+			type: Number,
+			required: true,
+		},
+		title: {
+			type: String,
+			default: 'Task Title',
+		},
+		description: {
+			type: String,
+			default: 'Task short description',
+		},
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		newTask: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			openSubTasks: false,
+			preventAnim: true,
+		};
+	},
+	mounted() {
+		setTimeout(() => {
+			this.preventAnim = false;
+		}, 1000);
+	},
+	methods: {
+		changeState() {
+			const element = document.querySelector(
+				`input#checkboxInput${this.id}`
+			) as HTMLInputElement;
+			const tasks = sm.get('tasks');
+
+			tasks[this.id].checked = element?.checked;
+
+			this.openSubTasks = false;
+
+			sm.set('tasks', tasks);
+		},
+		deleteTask() {
+			const localTasks = sm.get('tasks');
+			localTasks.splice(this.id, 1);
+			sm.set('tasks', localTasks);
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+.newTask {
+	animation-delay: 0s !important;
+}
+
+.taskContainer {
+	@for $i from 1 through 100 {
+		&#task#{$i} {
+			animation-delay: #{$i * 0.2}s;
+		}
+	}
+
+	opacity: 0;
+	transform: translateY(50%);
+
+	animation: enter 0.5s ease-out;
+	animation-fill-mode: forwards;
+
+	@keyframes enter {
+		from {
+			opacity: 0;
+			transform: translateY(50%);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.taskControl {
+		display: flex;
+
+		margin-top: 5%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.controls {
+			position: absolute;
+			right: -6%;
+
+			opacity: 0;
+			@media (pointer: none), (pointer: coarse) {
+				opacity: 0.5;
+			}
+			transition: opacity 0.2s;
+			transition: right 0.3s;
+
+			button {
+				background-color: transparent;
+				padding: 1px;
+				border: 0;
+				cursor: pointer;
+			}
+
+			.deleteButton {
+				.trashIcon * {
+					transition: stroke 0.2s;
+				}
+				&:hover .trashIcon * {
+					stroke: $begonia-red0;
+				}
+			}
+		}
+		&:hover .controls {
+			transition: 0.2s 0.5s;
+			opacity: 1;
+			right: -7%;
+		}
+
+		.task {
+			.light-mode & {
+				background-color: $blue0;
+				color: $independence-gray0;
+			}
+			.dark-mode & {
+				background-color: $eerie-black0;
+				color: $dark-primary;
+			}
+
+			position: relative;
+			width: 100%;
+			z-index: 4;
+
+			border-radius: 20px;
+			padding: 10px;
+
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-right: 5%;
+
+			.taskInfo {
+				display: flex;
+				text-align: left;
+				align-items: center;
+				width: 100%;
+
+				.checkbox {
+					padding: 1%;
+					padding-right: 2%;
+
+					input {
+						display: none;
+					}
+					input[type='checkbox']:checked + .icons {
+						animation: iconAnim 1s;
+						.checkedIcon {
+							display: inline-block;
+						}
+						.uncheckedIcon {
+							display: none;
+						}
+
+						.checkedIcon *,
+						.uncheckedIcon * {
+							.light-mode & {
+								@include colorFadeAnim(
+									$unchecked-color,
+									$checked-color,
+									1s,
+									'checkLight'
+								);
+								stroke: $checked-color;
+							}
+							.dark-mode & {
+								@include colorFadeAnim(
+									$unchecked-color,
+									$checked-color,
+									1s,
+									'checkDark'
+								);
+								stroke: $checked-color;
+							}
+						}
+					}
+					input[type='checkbox']:not(:checked) + .icons {
+						animation: iconAnimReverse 1s;
+						.checkedIcon {
+							display: none;
+						}
+						.uncheckedIcon {
+							display: inline-block;
+						}
+
+						.checkedIcon *,
+						.uncheckedIcon * {
+							.light-mode & {
+								@include colorFadeAnim(
+									$checked-color,
+									$unchecked-color,
+									1s,
+									'uncheckLight'
+								);
+								stroke: $unchecked-color;
+							}
+							.dark-mode & {
+								@include colorFadeAnim(
+									$checked-color,
+									$unchecked-color,
+									1s,
+									'uncheckDark'
+								);
+								stroke: $unchecked-color;
+							}
+						}
+					}
+					.icons {
+						@include center;
+						$bg-color: #00000080;
+
+						background-color: $bg-color;
+
+						margin: 2px;
+						padding: 2px;
+						border-radius: 50%;
+
+						.checkedIcon *,
+						.uncheckedIcon * {
+							.light-mode & {
+								stroke: $unchecked-color;
+							}
+							.dark-mode & {
+								stroke: $unchecked-color;
+							}
+						}
+					}
+
+					@keyframes iconAnim {
+						from {
+							transform: rotate(0) scale(1);
+						}
+						5% {
+							transform: rotate(0) scale(0.7);
+						}
+						50% {
+							transform: rotate(360deg) scale(1.2);
+						}
+						90% {
+							transform: scale(1.2);
+						}
+						to {
+							transform: scale(1);
+						}
+					}
+
+					@keyframes iconAnimReverse {
+						from {
+							transform: rotate(0) scale(1);
+						}
+						5% {
+							transform: rotate(0) scale(0.7);
+						}
+						50% {
+							transform: rotate(-360deg) scale(1);
+						}
+						to {
+							transform: rotate(-360deg) scale(1);
+						}
+					}
+				}
+
+				.info {
+					display: inline-block;
+
+					h1 {
+						font-size: 1.2em;
+						margin: 0;
+					}
+
+					p {
+						font-family: $secondary-font;
+						font-size: 0.8em;
+						margin: 0;
+					}
+				}
+			}
+
+		}
+	}
+}
+</style>
diff --git a/src/components/TaskList.vue b/src/components/Task/TaskList.vue
similarity index 93%
rename from src/components/TaskList.vue
rename to src/components/Task/TaskList.vue
index 92c385e..f40ef80 100644
--- a/src/components/TaskList.vue
+++ b/src/components/Task/TaskList.vue
@@ -24,6 +24,8 @@ const taskItem = {
 	description: 'Task',
 	checked: false,
 	newTask: true,
+	autoCheck: true,
+	subTasks: [],
 };
 
 export default Vue.extend({
@@ -37,7 +39,7 @@ export default Vue.extend({
 
 		const localTasks = sm.get('tasks');
 
-		for(const task of localTasks) task.newTask = undefined;
+		for (const task of localTasks) task.newTask = undefined;
 
 		sm.set('tasks', localTasks);
 	},
diff --git a/src/components/TaskComp.vue b/src/components/TaskComp.vue
deleted file mode 100644
index 56eec78..0000000
--- a/src/components/TaskComp.vue
+++ /dev/null
@@ -1,298 +0,0 @@
-<template>
-	<li :id="`task${id}`" :class="`${newTask ? 'newTask ' : ''}task`">
-		<div class="taskInfo">
-			<label
-				class="checkbox"
-				:for="`checkboxInput${id}`"
-				@click="changeState()"
-			>
-				<input :id="`checkboxInput${id}`" type="checkbox" :checked="checked" />
-				<div class="icons animate">
-					<IconChecked class="checkedIcon" />
-					<IconUnchecked class="uncheckedIcon" />
-				</div>
-			</label>
-			<div class="info">
-				<h1>{{ title }}</h1>
-				<p>{{ description }}</p>
-			</div>
-		</div>
-		<nav class="controls">
-			<button class="deleteButton" @click="deleteTask()">
-				<IconTrash class="trashIcon" />
-			</button>
-		</nav>
-	</li>
-</template>
-
-<script lang="js">
-import Vue from 'vue';
-import sm from '~/libs/storageManagement';
-
-export default Vue.extend({
-	name: 'TaskComp',
-	props: {
-		id: {
-			type: Number,
-			required: true,
-		},
-		title: {
-			type: String,
-			default: 'Task Title',
-		},
-		description: {
-			type: String,
-			default: 'Task short description',
-		},
-		checked: {
-			type: Boolean,
-			default: false,
-		},
-		newTask: {
-			type: Boolean,
-			default: false,
-		}
-	},
-	methods: {
-		changeState() {
-			const state = document.querySelector(`input#checkboxInput${this.id}`)?.checked;
-			const tasks = sm.get('tasks');
-			tasks[this.id].checked = state;
-			sm.set('tasks', tasks);
-		},
-		deleteTask() {
-			const localTasks = sm.get('tasks');
-			localTasks.splice(this.id, 1);
-			sm.set('tasks', localTasks);
-		}
-	}
-});
-</script>
-
-<style lang="scss">
-@import '~assets/styles/_variables.scss';
-@import '~assets/styles/_mixins.scss';
-
-$checked-color: $green0;
-$unchecked-color: $begonia-red0;
-
-.newTask {
-	animation-delay: 0s !important;
-}
-
-@for $i from 1 through 100 {
-	.task#task#{$i} {
-		animation-delay: #{$i * 0.2}s;
-	}
-}
-
-.task {
-	.light-mode & {
-		background-color: $blue0;
-		color: $independence-gray0;
-	}
-	.dark-mode & {
-		background-color: $eerie-black0;
-		color: $dark-primary;
-	}
-
-	border-radius: 20px;
-	margin-top: 5%;
-	padding: 10px;
-
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding-right: 5%;
-
-	opacity: 0;
-	transform: translateY(50%);
-
-	animation: enter 0.5s ease-out;
-	animation-fill-mode: forwards;
-
-	@keyframes enter {
-		from {
-			opacity: 0;
-			transform: translateY(50%);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.taskInfo {
-		display: flex;
-		text-align: left;
-		align-items: center;
-		width: 100%;
-
-		.checkbox {
-			padding: 1%;
-			padding-right: 2%;
-
-			input {
-				display: none;
-			}
-			input[type='checkbox']:checked + .icons {
-				animation: iconAnim 1s;
-				.checkedIcon {
-					display: inline-block;
-				}
-				.uncheckedIcon {
-					display: none;
-				}
-
-				.checkedIcon *,
-				.uncheckedIcon * {
-					.light-mode & {
-						@include colorFadeAnim(
-							$unchecked-color,
-							$checked-color,
-							1s,
-							'checkLight'
-						);
-						stroke: $checked-color;
-					}
-					.dark-mode & {
-						@include colorFadeAnim(
-							$unchecked-color,
-							$checked-color,
-							1s,
-							'checkDark'
-						);
-						stroke: $checked-color;
-					}
-				}
-			}
-			input[type='checkbox']:not(:checked) + .icons {
-				animation: iconAnimReverse 1s;
-				.checkedIcon {
-					display: none;
-				}
-				.uncheckedIcon {
-					display: inline-block;
-				}
-
-				.checkedIcon *,
-				.uncheckedIcon * {
-					.light-mode & {
-						@include colorFadeAnim(
-							$checked-color,
-							$unchecked-color,
-							1s,
-							'uncheckLight'
-						);
-						stroke: $unchecked-color;
-					}
-					.dark-mode & {
-						@include colorFadeAnim(
-							$checked-color,
-							$unchecked-color,
-							1s,
-							'uncheckDark'
-						);
-						stroke: $unchecked-color;
-					}
-				}
-			}
-			.icons {
-				@include center;
-				$bg-color: #00000080;
-
-				background-color: $bg-color;
-
-				margin: 2px;
-				padding: 2px;
-				border-radius: 50%;
-
-				.checkedIcon *,
-				.uncheckedIcon * {
-					.light-mode & {
-						stroke: $unchecked-color;
-					}
-					.dark-mode & {
-						stroke: $unchecked-color;
-					}
-				}
-			}
-
-			@keyframes iconAnim {
-				from {
-					transform: rotate(0) scale(1);
-				}
-				5% {
-					transform: rotate(0) scale(0.7);
-				}
-				50% {
-					transform: rotate(360deg) scale(1.2);
-				}
-				90% {
-					transform: scale(1.2);
-				}
-				to {
-					transform: scale(1);
-				}
-			}
-
-			@keyframes iconAnimReverse {
-				from {
-					transform: rotate(0) scale(1);
-				}
-				5% {
-					transform: rotate(0) scale(0.7);
-				}
-				50% {
-					transform: rotate(-360deg) scale(1);
-				}
-				to {
-					transform: rotate(-360deg) scale(1);
-				}
-			}
-		}
-
-		.info {
-			display: inline-block;
-
-			h1 {
-				font-size: 1.2em;
-				margin: 0;
-			}
-
-			p {
-				font-family: $secondary-font;
-				font-size: 0.8em;
-				margin: 0;
-			}
-		}
-	}
-
-	.controls {
-		opacity: 0;
-		@media (pointer: none), (pointer: coarse) {
-			opacity: 0.5;
-		}
-		transition: opacity 0.2s;
-
-		button {
-			background-color: transparent;
-			padding: 1px;
-			border: 0;
-			cursor: pointer;
-		}
-
-		.trashIcon {
-			* {
-				transition: stroke 0.2s;
-			}
-			&:hover * {
-				stroke: $unchecked-color;
-			}
-		}
-	}
-	&:hover .controls {
-		opacity: 1;
-	}
-}
-</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 38d92e1..5b303a4 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,12 +1,12 @@
 <template>
-	<main class="container">
+	<main :class="`${preventAnim ? 'preventAnimLoad ' : ''}container`">
 		<div>
 			<ToTodayLogo />
 			<p>A single page web app to help yours day-to-day tasks</p>
 			<ThemePicker />
 		</div>
 		<div>
-			<TaskList/>
+			<TaskList />
 		</div>
 		<PageFooter />
 	</main>
@@ -16,5 +16,15 @@
 import Vue from 'vue';
 export default Vue.extend({
 	name: 'IndexPage',
+	data() {
+		return {
+			preventAnim: true,
+		};
+	},
+	mounted() {
+		setTimeout(() => {
+			this.preventAnim = false;
+		}, 1000);
+	},
 });
 </script>

From 7bd0e46f2401c1f6a82b4aebc82cc3034493e2b0 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sun, 30 Jan 2022 17:53:48 -0300
Subject: [PATCH 12/18] feat(subTasks): created SubTask and SubTaskList
 components.

Created the sub-tasks feature, now each Task component also has its sub-tasks and sub-task list, stored on LocalStorage parent object;
---
 src/components/SubTask/SubTaskComp.vue        | 141 +++++++++++++++++
 src/components/SubTask/SubTaskList.vue        | 143 ++++++++++++++++++
 src/components/Task/TaskComp.vue              |  52 +++++++
 src/components/icon/Dropdown.vue              |  30 ++++
 .../icons/source_icons_down-round-arrow.svg   |   4 +
 5 files changed, 370 insertions(+)
 create mode 100644 src/components/SubTask/SubTaskComp.vue
 create mode 100644 src/components/SubTask/SubTaskList.vue
 create mode 100644 src/components/icon/Dropdown.vue
 create mode 100644 src/static/icons/source_icons_down-round-arrow.svg

diff --git a/src/components/SubTask/SubTaskComp.vue b/src/components/SubTask/SubTaskComp.vue
new file mode 100644
index 0000000..0d25653
--- /dev/null
+++ b/src/components/SubTask/SubTaskComp.vue
@@ -0,0 +1,141 @@
+<template>
+	<li :id="`subTask${id}`" class="subTask">
+		<div class="subTaskInfo">
+			<input
+				:id="`subTaskCheckboxInput${id}`"
+				type="checkbox"
+				name=""
+				class="checkbox"
+				:checked="checked"
+				@click="changeState(parent)"
+			/>
+			<p class="description">{{ description }}</p>
+		</div>
+		<nav class="subTaskControls">
+			<button class="deleteSubtaskButton" @click="deleteSubTask(parent)">
+				<IconTrash class="trashIcon" />
+			</button>
+		</nav>
+	</li>
+</template>
+
+<script lang="js">
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+export default Vue.extend({
+	name: 'SubTaskComp',
+	props: {
+		id: {
+			type: Number,
+			required: true,
+		},
+		parent: {
+			type: Number,
+			required: true,
+		},
+		description: {
+			type: String,
+			default: 'Task short description',
+		},
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		changeState(parentId) {
+			const state = document.querySelector(`input#subTaskCheckboxInput${this.id}`)?.checked;
+
+			const localTasks = sm.get('tasks');
+
+			localTasks[parentId].subTasks[this.id].checked = state;
+
+			sm.set('tasks', localTasks);
+		},
+		deleteSubTask(parentId) {
+			const localTasks = sm.get('tasks');
+
+			localTasks[parentId].subTasks.splice(this.id, 1);
+
+			sm.set('tasks', localTasks);
+		}
+	}
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+.subTask {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	.subTaskInfo {
+		display: flex;
+		align-items: center;
+
+		.checkbox {
+			appearance: none;
+			background-color: transparent;
+			margin: 0;
+
+			margin-right: 10px;
+
+			.light-mode & {
+				color: $blue3;
+				background-color: transparent;
+			}
+			.dark-mode & {
+				color: $dark-background;
+				background-color: transparent;
+			}
+
+			font: inherit;
+			width: 20px;
+			height: 20px;
+			border: 5px solid currentColor;
+			border-radius: 50%;
+
+			&:checked {
+				background-color: $checked-color;
+			}
+		}
+
+		.description {
+			margin: 1px 0;
+		}
+	}
+
+	.subTaskControls {
+		opacity: 0;
+		@media (pointer: none), (pointer: coarse) {
+			opacity: 0.5;
+		}
+		transition: opacity 0.2s;
+
+		button {
+			background-color: transparent;
+			padding: 1px;
+			border: 0;
+			cursor: pointer;
+		}
+
+		.deleteSubtaskButton {
+			.trashIcon * {
+				transition: stroke 0.2s;
+			}
+			&:hover .trashIcon * {
+				stroke: $begonia-red0;
+			}
+		}
+	}
+	&:hover .subTaskControls {
+		transition: 1s 0.2s;
+		opacity: 1;
+		right: -7%;
+	}
+}
+</style>
diff --git a/src/components/SubTask/SubTaskList.vue b/src/components/SubTask/SubTaskList.vue
new file mode 100644
index 0000000..a4911b3
--- /dev/null
+++ b/src/components/SubTask/SubTaskList.vue
@@ -0,0 +1,143 @@
+<template>
+	<span :class="`${preventAnim ? 'preventAnimLoad ' : ''}`">
+		<div :class="`${opened ? 'opened' : 'closed'} subTasks preventAnim`">
+			<ul :id="`subTaskList${parent}`" class="list">
+				<SubTaskComp
+					v-for="subTask in subTaskList"
+					:id="subTaskList.indexOf(subTask)"
+					:key="`subtask-comp-${subTaskList.indexOf(subTask)}`"
+					:parent="parent"
+					:description="subTask.description"
+					:checked="subTask.checked"
+				/>
+			</ul>
+			<button @click="addSubTask(parent)">Add subtask</button>
+		</div>
+	</span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+const subTaskItem = {
+	description: 'Task',
+	checked: false,
+};
+
+export default Vue.extend({
+	name: 'SubTasks',
+	props: {
+		parent: {
+			type: Number,
+			required: true,
+		},
+		opened: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			subTaskList: sm.get('tasks')[this.parent].subTasks
+				? sm.get('tasks')[this.parent].subTasks
+				: [],
+			preventAnim: true,
+		};
+	},
+	mounted() {
+		window.addEventListener('localStorage-changed', () => {
+			this.subTaskList = sm.get('tasks')[this.parent].subTasks
+				? sm.get('tasks')[this.parent].subTasks
+				: [];
+		});
+		setTimeout(() => {
+			this.preventAnim = false;
+		}, 1000);
+	},
+	methods: {
+		addSubTask: (parentId: number) => {
+			if (sm.get('tasks') === undefined) sm.add('tasks', []);
+
+			const localTasks: any[] = sm.get('tasks');
+			const parentTask = localTasks[parentId];
+
+			if (!parentTask.subTasks) parentTask.subTasks = [];
+
+			subTaskItem.description = `Description sub task ${parentTask.subTasks.length}`;
+
+			parentTask.subTasks.push(subTaskItem);
+			localTasks[parentId] = parentTask;
+
+			sm.set('tasks', localTasks);
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+.opened {
+	transform: translateY(-80px) scaleY(0.1);
+	animation: open 0.5s forwards;
+	@keyframes open {
+		from {
+			transform: translateY(-80px) scaleY(0.1);
+			opacity: 0;
+			position: absolute;
+		}
+		to {
+			transform: translateY(-20px) scaleY(1);
+			opacity: 1;
+			position: relative;
+		}
+	}
+}
+
+.closed {
+	transform: translateY(-20px) scaleY(1);
+	animation: close 0.5s forwards;
+	@keyframes close {
+		from {
+			transform: translateY(-20px) scaleY(1);
+			opacity: 1;
+			position: relative;
+		}
+		to {
+			transform: translateY(-80px) scaleY(0.1);
+			display: none;
+			opacity: 0;
+			position: absolute;
+		}
+	}
+}
+
+.subTasks {
+	.light-mode & {
+		background-color: $blue2;
+		color: $independence-gray0;
+	}
+	.dark-mode & {
+		background-color: $eerie-black2;
+		color: $dark-primary;
+	}
+
+	font-family: $secondary-font;
+
+	width: 90%;
+	z-index: 2;
+
+	padding: 20px 5% 10px 5%;
+
+	border-radius: 0 0 20px 20px;
+
+	text-align: left;
+
+	.list {
+		padding: 1% 0;
+		list-style: none;
+	}
+}
+</style>
diff --git a/src/components/Task/TaskComp.vue b/src/components/Task/TaskComp.vue
index fd7c6ae..84db6b1 100644
--- a/src/components/Task/TaskComp.vue
+++ b/src/components/Task/TaskComp.vue
@@ -28,6 +28,14 @@
 						<p>{{ description }}</p>
 					</div>
 				</div>
+				<button
+					:class="`${
+						openSubTasks ? 'openedSubtasksButton' : 'closedSubtasksButton'
+					} subtasksButton`"
+					@click="openSubTasks = !openSubTasks"
+				>
+					<IconDropdown class="dropdownIcon" />
+				</button>
 			</div>
 			<nav class="controls">
 				<button class="deleteButton" @click="deleteTask()">
@@ -35,6 +43,7 @@
 				</button>
 			</nav>
 		</div>
+		<SubTaskList :parent="id" :opened="openSubTasks" />
 	</li>
 </template>
 
@@ -340,6 +349,49 @@ export default Vue.extend({
 				}
 			}
 
+			.subtasksButton {
+				display: flex;
+				align-items: center;
+
+				opacity: 0;
+				@media (pointer: none), (pointer: coarse) {
+					opacity: 0.5;
+				}
+				transition: opacity 0.2s;
+
+				background-color: transparent;
+				padding: 1px;
+				border: 0;
+				cursor: pointer;
+
+				.dropdownIcon {
+					* {
+						transition: stroke 0.2s;
+					}
+					&:hover * {
+						.light-mode & {
+							stroke: $independence-gray0;
+						}
+						.dark-mode & {
+							stroke: $dark-primary;
+						}
+					}
+				}
+
+				&.openedSubtasksButton {
+					.dropdownIcon {
+						transform: rotate(180deg);
+					}
+				}
+				&.closedSubtasksButton {
+					.dropdownIcon {
+						transform: rotate(0deg);
+					}
+				}
+			}
+			&:hover .subtasksButton {
+				opacity: 1;
+			}
 		}
 	}
 }
diff --git a/src/components/icon/Dropdown.vue b/src/components/icon/Dropdown.vue
new file mode 100644
index 0000000..e66d2b6
--- /dev/null
+++ b/src/components/icon/Dropdown.vue
@@ -0,0 +1,30 @@
+<template>
+	<svg
+		width="24"
+		height="24"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M6 5H18C20.2091 5 22 6.79086 22 9V15C22 17.2091 20.2091 19 18 19H6C3.79086 19 2 17.2091 2 15V9C2 6.79086 3.79086 5 6 5Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M14.5 10.75L12 13.25L9.5 10.75"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'IconDropdown',
+});
+</script>
diff --git a/src/static/icons/source_icons_down-round-arrow.svg b/src/static/icons/source_icons_down-round-arrow.svg
new file mode 100644
index 0000000..4a67454
--- /dev/null
+++ b/src/static/icons/source_icons_down-round-arrow.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 5H18C20.2091 5 22 6.79086 22 9V15C22 17.2091 20.2091 19 18 19H6C3.79086 19 2 17.2091 2 15V9C2 6.79086 3.79086 5 6 5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 10.75L12 13.25L9.5 10.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 03c21d3523ecef0ae27136b779227527ffe0320a Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sun, 30 Jan 2022 18:55:26 -0300
Subject: [PATCH 13/18] fix(version): fixed app's version in correlation with
 the last commit/feature

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bd80041..13b8f65 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",

From 6ea20001e229d9495b2bdad74dcfc5799c1e9cce Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sun, 30 Jan 2022 20:07:13 -0300
Subject: [PATCH 14/18] chore(types): added custom types for common
 objects/values.

---
 src/components/SubTask/SubTaskComp.vue | 20 +++++++-------
 src/components/SubTask/SubTaskList.vue |  4 +--
 src/components/Task/TaskComp.vue       |  4 +--
 src/components/Task/TaskList.vue       |  8 +++---
 src/libs/date.ts                       |  4 +--
 src/libs/storageManagement.ts          | 17 ++++++------
 src/types/Storage.d.ts                 | 37 ++++++++++++++++++++++++++
 src/types/Tasks.d.ts                   | 13 +++++++++
 tsconfig.json                          |  1 +
 9 files changed, 81 insertions(+), 27 deletions(-)
 create mode 100644 src/types/Storage.d.ts
 create mode 100644 src/types/Tasks.d.ts

diff --git a/src/components/SubTask/SubTaskComp.vue b/src/components/SubTask/SubTaskComp.vue
index 0d25653..4877d85 100644
--- a/src/components/SubTask/SubTaskComp.vue
+++ b/src/components/SubTask/SubTaskComp.vue
@@ -19,7 +19,7 @@
 	</li>
 </template>
 
-<script lang="js">
+<script lang="ts">
 import Vue from 'vue';
 import sm from '~/libs/storageManagement';
 
@@ -44,23 +44,25 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		changeState(parentId) {
-			const state = document.querySelector(`input#subTaskCheckboxInput${this.id}`)?.checked;
+		changeState(parentId: number) {
+			const element = document.querySelector(
+				`input#checkboxInput${this.id}`
+			) as HTMLInputElement;
 
-			const localTasks = sm.get('tasks');
+			const localTasks: Task[] = sm.get('tasks');
 
-			localTasks[parentId].subTasks[this.id].checked = state;
+			localTasks[parentId].subTasks[this.id].checked = element?.checked;
 
 			sm.set('tasks', localTasks);
 		},
-		deleteSubTask(parentId) {
-			const localTasks = sm.get('tasks');
+		deleteSubTask(parentId: number) {
+			const localTasks: Task[] = sm.get('tasks');
 
 			localTasks[parentId].subTasks.splice(this.id, 1);
 
 			sm.set('tasks', localTasks);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/src/components/SubTask/SubTaskList.vue b/src/components/SubTask/SubTaskList.vue
index a4911b3..35e0b09 100644
--- a/src/components/SubTask/SubTaskList.vue
+++ b/src/components/SubTask/SubTaskList.vue
@@ -20,7 +20,7 @@
 import Vue from 'vue';
 import sm from '~/libs/storageManagement';
 
-const subTaskItem = {
+const subTaskItem: SubTask = {
 	description: 'Task',
 	checked: false,
 };
@@ -59,7 +59,7 @@ export default Vue.extend({
 		addSubTask: (parentId: number) => {
 			if (sm.get('tasks') === undefined) sm.add('tasks', []);
 
-			const localTasks: any[] = sm.get('tasks');
+			const localTasks: Task[] = sm.get('tasks');
 			const parentTask = localTasks[parentId];
 
 			if (!parentTask.subTasks) parentTask.subTasks = [];
diff --git a/src/components/Task/TaskComp.vue b/src/components/Task/TaskComp.vue
index 84db6b1..b7a994f 100644
--- a/src/components/Task/TaskComp.vue
+++ b/src/components/Task/TaskComp.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 			const element = document.querySelector(
 				`input#checkboxInput${this.id}`
 			) as HTMLInputElement;
-			const tasks = sm.get('tasks');
+			const tasks: Task[] = sm.get('tasks');
 
 			tasks[this.id].checked = element?.checked;
 
@@ -100,7 +100,7 @@ export default Vue.extend({
 			sm.set('tasks', tasks);
 		},
 		deleteTask() {
-			const localTasks = sm.get('tasks');
+			const localTasks: Task[] = sm.get('tasks');
 			localTasks.splice(this.id, 1);
 			sm.set('tasks', localTasks);
 		},
diff --git a/src/components/Task/TaskList.vue b/src/components/Task/TaskList.vue
index f40ef80..2062c41 100644
--- a/src/components/Task/TaskList.vue
+++ b/src/components/Task/TaskList.vue
@@ -19,7 +19,7 @@
 import Vue from 'vue';
 import sm from '~/libs/storageManagement';
 
-const taskItem = {
+const taskItem: Task = {
 	title: 'Task 00',
 	description: 'Task',
 	checked: false,
@@ -37,9 +37,9 @@ export default Vue.extend({
 	beforeCreate() {
 		if (sm.get('tasks') === undefined) sm.add('tasks', []);
 
-		const localTasks = sm.get('tasks');
+		const localTasks: Task[] = sm.get('tasks');
 
-		for (const task of localTasks) task.newTask = undefined;
+		for (const task of localTasks) task.newTask = false;
 
 		sm.set('tasks', localTasks);
 	},
@@ -52,7 +52,7 @@ export default Vue.extend({
 		addTask: () => {
 			if (sm.get('tasks') === undefined) sm.add('tasks', []);
 
-			const localTasks = sm.get('tasks');
+			const localTasks: Task[] = sm.get('tasks');
 			taskItem.title = `Title Task ${localTasks.length}`;
 			taskItem.description = `Description Task ${localTasks.length}`;
 
diff --git a/src/libs/date.ts b/src/libs/date.ts
index e6f4446..e2822fd 100644
--- a/src/libs/date.ts
+++ b/src/libs/date.ts
@@ -22,7 +22,7 @@ const date = {
 
 	year: () => new Date().getFullYear(),
 
-	day: (): any => {
+	day: () => {
 		return {
 			readable: `${String(date.dayNumber()).padStart(2, '0')} ${date.monthName(
 				Number(date.month())
@@ -49,7 +49,7 @@ const date = {
 
 	timeZone: () => String(new Date().getTimezoneOffset()),
 
-	full: () => {
+	full: (): DateInfo => {
 		return {
 			day: date.day(),
 			hour: date.hours(),
diff --git a/src/libs/storageManagement.ts b/src/libs/storageManagement.ts
index dcf0598..b37a657 100644
--- a/src/libs/storageManagement.ts
+++ b/src/libs/storageManagement.ts
@@ -13,7 +13,7 @@ const sm = {
 	 * @param {string} path New value's path on `data`;
 	 * @param {any} value New value;
 	 */
-	add: (path: string, value: any) => {
+	add: (path: string, value: any): void => {
 		let data = sm.getJSON().data;
 
 		if (obj.getByString(data, `data.${path}`))
@@ -102,22 +102,22 @@ const sm = {
 	 *
 	 * **Used internally by the storage management.**
 	 */
-	getJSON: (): any => {
+	getJSON: (): StorageSchema => {
 		sm.checkJSON();
 		return JSON.parse(localStorage.getItem(storageIndex) + '');
 	},
 
 	/**
 	 * Sets a new `data` on the local storage JSON file *(also updates the `date.updated` meta-information)*.
-	 * @param {object} newData New data object to be updated/set;
+	 * @param {DataInfo | object} newData New data object to be updated/set;
 	 * @param {boolean} meta Do new data parameters contain `meta` information?
 	 *
 	 * **Used internally by the storage management.**
 	 */
-	setJSON: (newData: object, meta?: boolean) => {
+	setJSON: (newData: DataInfo | object, meta?: boolean) => {
 		if (meta) localStorage.setItem(storageIndex, JSON.stringify(newData));
 		else {
-			const newJSON = { meta: sm.getJSON().meta, data: newData };
+			const newJSON: StorageSchema = { meta: sm.getJSON().meta, data: newData };
 
 			localStorage.setItem(storageIndex, JSON.stringify(newJSON));
 
@@ -125,7 +125,7 @@ const sm = {
 
 			updatedMeta.date.updated = date.full();
 
-			const updatedJSON = {
+			const updatedJSON: StorageSchema = {
 				meta: updatedMeta,
 				data: newData,
 			};
@@ -169,9 +169,10 @@ const sm = {
 		if (localStorage.getItem(storageIndex) && !reset)
 			return window.alert('ERROR: Local storage already exists');
 
-		const colorTheme = localStorage.getItem('nuxt-color-mode');
+		const colorTheme: 'light' | 'dark' | string =
+			localStorage.getItem('nuxt-color-mode') || 'light';
 
-		const storage = {
+		const storage: StorageSchema = {
 			meta: {
 				index: storageIndex,
 				name: appInfo.name,
diff --git a/src/types/Storage.d.ts b/src/types/Storage.d.ts
new file mode 100644
index 0000000..c34b7c3
--- /dev/null
+++ b/src/types/Storage.d.ts
@@ -0,0 +1,37 @@
+type DateInfo = {
+	day: {
+		year: number;
+		month: number;
+		number: number;
+		readable: string;
+	};
+	hour: {
+		hours: number;
+		minutes: number;
+		seconds: number;
+		milliseconds: number;
+		readable: string;
+	};
+	timeZone: string | number;
+};
+
+type MetaInfo = {
+	index: string;
+	name: string;
+	theme: 'dark' | 'light' | string;
+	version: `${number}.${number}.${number}` | string;
+	date: {
+		created: DateInfo;
+		updated: DateInfo;
+	};
+};
+
+type DataInfo = {
+	tasks?: Task[];
+	[name: string | number]: any;
+};
+
+type StorageSchema = {
+	meta: MetaInfo;
+	data: DataInfo;
+};
diff --git a/src/types/Tasks.d.ts b/src/types/Tasks.d.ts
new file mode 100644
index 0000000..5ac20c1
--- /dev/null
+++ b/src/types/Tasks.d.ts
@@ -0,0 +1,13 @@
+type SubTask = {
+	description: string;
+	checked: boolean;
+};
+
+type Task = {
+	title: string;
+	description: string;
+	checked: boolean;
+	newTask: boolean;
+	autoCheck: boolean;
+	subTasks: SubTask[];
+};
diff --git a/tsconfig.json b/tsconfig.json
index 078d120..910328b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+		"typeRoots": ["node_modules/@types", "./src/types"],
 		"target": "ES2018",
 		"module": "ESNext",
 		"moduleResolution": "Node",

From 3091f636777cf0ae393913fcfa3f1f725a2eea6a Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Sun, 30 Jan 2022 20:59:44 -0300
Subject: [PATCH 15/18] fix(subTaskState): subTask checking parent's state and
 not subTask's state

---
 src/components/SubTask/SubTaskComp.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SubTask/SubTaskComp.vue b/src/components/SubTask/SubTaskComp.vue
index 4877d85..168b4ce 100644
--- a/src/components/SubTask/SubTaskComp.vue
+++ b/src/components/SubTask/SubTaskComp.vue
@@ -2,7 +2,7 @@
 	<li :id="`subTask${id}`" class="subTask">
 		<div class="subTaskInfo">
 			<input
-				:id="`subTaskCheckboxInput${id}`"
+				:id="`subTaskCheckboxInput${id}-p${parent}`"
 				type="checkbox"
 				name=""
 				class="checkbox"
@@ -46,12 +46,12 @@ export default Vue.extend({
 	methods: {
 		changeState(parentId: number) {
 			const element = document.querySelector(
-				`input#checkboxInput${this.id}`
+				`input#subTaskCheckboxInput${this.id}-p${this.parent}`
 			) as HTMLInputElement;
 
 			const localTasks: Task[] = sm.get('tasks');
 
-			localTasks[parentId].subTasks[this.id].checked = element?.checked;
+			localTasks[parentId].subTasks[this.id].checked = element.checked;
 
 			sm.set('tasks', localTasks);
 		},

From 9f6d6d186db7845c21175d6457267a98fd1cbff1 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Mon, 31 Jan 2022 12:20:08 -0300
Subject: [PATCH 16/18] feat(progressBar): added progress bar

Created a progress bar component `ProgressBar.vue` that independently tracks how many tasks and sub-tasks have been completed.
---
 package.json                     |   2 +-
 src/components/ProgressBar.vue   | 114 +++++++++++++++++++++++++++++++
 src/components/Task/TaskList.vue |   1 +
 3 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ProgressBar.vue

diff --git a/package.json b/package.json
index 13b8f65..2328d46 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
new file mode 100644
index 0000000..c1bf5e7
--- /dev/null
+++ b/src/components/ProgressBar.vue
@@ -0,0 +1,114 @@
+<template>
+	<div class="progressBar">
+		<div class="barContainer">
+			<div class="bar">
+				<div
+					class="progress"
+					:style="`width: ${progress - 4 <= 0 ? 0 : progress - 4}%`"
+				></div>
+			</div>
+		</div>
+		<p class="progressInfo">{{ Math.round(progress) }}%</p>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+export default Vue.extend({
+	name: 'ProgressBar',
+	data() {
+		return {
+			progress: 0,
+		};
+	},
+	created() {
+		this.progress = this.getProgress().percentage;
+	},
+	mounted() {
+		window.addEventListener('localStorage-changed', () => {
+			this.progress = this.getProgress().percentage;
+		});
+	},
+	methods: {
+		getProgress() {
+			const tasks: Task[] = sm.get('tasks');
+
+			const totalTasks =
+				tasks.length +
+				tasks
+					.map((task) => task.subTasks)
+					.map((st) => st.length)
+					.reduce((a, b) => a + b, 0);
+
+			const checkedTasks =
+				tasks.filter((t) => t.checked).length +
+				tasks
+					.map((task) => task.subTasks)
+					.flat()
+					.filter((sb) => sb.checked).length;
+
+			return {
+				total: totalTasks,
+				checked: checkedTasks,
+				percentage: isNaN((100 * checkedTasks) / totalTasks)
+					? 0
+					: (100 * checkedTasks) / totalTasks,
+			};
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+.progressInfo {
+	margin-top: 0;
+	.light-mode & {
+		color: $light-secondary;
+	}
+	.dark-mode & {
+		color: $dark-secondary;
+	}
+}
+
+.barContainer {
+	width: 100%;
+
+	@include center;
+
+	animation: enter 0.5s ease-out;
+	animation-fill-mode: forwards;
+
+	.bar {
+		$bar-height: 15px;
+
+		@include center;
+		justify-content: left;
+
+		.light-mode & {
+			background-color: $blue2;
+		}
+		.dark-mode & {
+			background-color: $eerie-black0;
+		}
+
+		width: 60%;
+		height: $bar-height;
+		border-radius: $bar-height;
+
+		.progress {
+			transition: width 0.5s;
+
+			background-color: $checked-color;
+			border-radius: $bar-height;
+			height: 49%;
+			// width: 100%-4%;
+			margin-left: 2%;
+		}
+	}
+}
+</style>
diff --git a/src/components/Task/TaskList.vue b/src/components/Task/TaskList.vue
index 2062c41..74b24f4 100644
--- a/src/components/Task/TaskList.vue
+++ b/src/components/Task/TaskList.vue
@@ -11,6 +11,7 @@
 				:checked="task.checked"
 			/>
 		</ul>
+		<ProgressBar />
 		<button @click="addTask()">Add tasks</button>
 	</div>
 </template>

From e522c42a8d089f0bb92136f7b700cef9c4ca23ce Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Mon, 31 Jan 2022 17:42:32 -0300
Subject: [PATCH 17/18] fix(cursorTaskComp): checkbox now sets the cursor to
 pointer

---
 src/components/Task/TaskComp.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Task/TaskComp.vue b/src/components/Task/TaskComp.vue
index b7a994f..d3bad5f 100644
--- a/src/components/Task/TaskComp.vue
+++ b/src/components/Task/TaskComp.vue
@@ -213,6 +213,8 @@ export default Vue.extend({
 					padding: 1%;
 					padding-right: 2%;
 
+					cursor: pointer;
+
 					input {
 						display: none;
 					}

From 35c85fd3dea2649e0e33e6451a72d7f4c847ccb5 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Tue, 1 Feb 2022 11:44:04 -0300
Subject: [PATCH 18/18] feat(inputs): Created inputs to the user create custom
 tasks.

Created inputs for task and sub-tasks (`Task/TaskInput.vue`, `SubTask/SubTaskInput.vue`), enabling the creation of custom tasks and sub-tasks;

Removed debug buttons.
---
 package.json                            |   2 +-
 src/components/SubTask/SubTaskComp.vue  |   2 +-
 src/components/SubTask/SubTaskInput.vue | 171 ++++++++++++
 src/components/SubTask/SubTaskList.vue  |  24 +-
 src/components/Task/TaskComp.vue        |   2 +
 src/components/Task/TaskInput.vue       | 329 ++++++++++++++++++++++++
 src/components/Task/TaskList.vue        |  23 --
 src/components/icon/Add.vue             |  30 +++
 src/pages/index.vue                     |   1 +
 src/static/icons/add-icon.svg           |   4 +
 10 files changed, 540 insertions(+), 48 deletions(-)
 create mode 100644 src/components/SubTask/SubTaskInput.vue
 create mode 100644 src/components/Task/TaskInput.vue
 create mode 100644 src/components/icon/Add.vue
 create mode 100644 src/static/icons/add-icon.svg

diff --git a/package.json b/package.json
index 2328d46..1537400 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
diff --git a/src/components/SubTask/SubTaskComp.vue b/src/components/SubTask/SubTaskComp.vue
index 168b4ce..fa6c08f 100644
--- a/src/components/SubTask/SubTaskComp.vue
+++ b/src/components/SubTask/SubTaskComp.vue
@@ -95,7 +95,6 @@ export default Vue.extend({
 				background-color: transparent;
 			}
 
-			font: inherit;
 			width: 20px;
 			height: 20px;
 			border: 5px solid currentColor;
@@ -107,6 +106,7 @@ export default Vue.extend({
 		}
 
 		.description {
+			font-family: $secondary-font;
 			margin: 1px 0;
 		}
 	}
diff --git a/src/components/SubTask/SubTaskInput.vue b/src/components/SubTask/SubTaskInput.vue
new file mode 100644
index 0000000..09d2834
--- /dev/null
+++ b/src/components/SubTask/SubTaskInput.vue
@@ -0,0 +1,171 @@
+<template>
+	<div class="alignInputContainerSubTask">
+		<div class="subTaskInputContainer">
+			<button class="addTask" @click="addSubTask(parent)">
+				<IconAdd class="addIcon" />
+			</button>
+			<form class="subTaskInput">
+				<input
+					id="newSubTaskInputName"
+					class="subTaskNameInput"
+					type="text"
+					name="subTaskNameInput"
+					placeholder="Sub-Task Title..."
+					maxlength="50"
+					@keypress.enter="addSubTask(parent)"
+				/>
+			</form>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+export default Vue.extend({
+	name: 'SubTaskInput',
+	props: {
+		parent: {
+			type: Number,
+			required: true,
+		},
+	},
+	methods: {
+		addSubTask: (parentId: number) => {
+			if (sm.get('tasks') === undefined) sm.add('tasks', []);
+
+			const titleInput = document.querySelector(
+				'input#newSubTaskInputName'
+			) as HTMLInputElement;
+
+			const newTitle = titleInput.value;
+
+			if (!newTitle || newTitle === '') {
+				if (!titleInput.className.includes(' warnTitle'))
+					titleInput.className += ' warnTitle';
+
+				(
+					document.querySelector(
+						'input#newSubTaskInputName'
+					) as HTMLInputElement
+				).className = titleInput.className;
+
+				setTimeout(() => {
+					(
+						document.querySelector(
+							'input#newSubTaskInputName'
+						) as HTMLInputElement
+					).className = titleInput.className.replace(' warnTitle', '');
+				}, 1500);
+
+				return;
+			}
+
+			const subTaskItem: SubTask = {
+				description: newTitle,
+				checked: false,
+			};
+
+			const localTasks: Task[] = sm.get('tasks');
+			const parentTask = localTasks[parentId];
+
+			if (!parentTask.subTasks) parentTask.subTasks = [];
+
+			parentTask.subTasks.push(subTaskItem);
+			localTasks[parentId] = parentTask;
+
+			sm.set('tasks', localTasks);
+
+			(
+				document.querySelector('input#newSubTaskInputName') as HTMLInputElement
+			).value = '';
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+.alignInputContainerSubTask {
+	@include center;
+	justify-content: left;
+	&,
+	* {
+		transition: all 0.2s;
+	}
+	*::placeholder {
+		transition: all 0.2s;
+	}
+	.subTaskInputContainer {
+		@include center;
+		width: 100%;
+
+		.addTask {
+			$bg-color: #00000080;
+
+			background-color: $bg-color;
+
+			margin: 2px;
+			margin-right: 2%;
+			padding: 1px;
+			border-radius: 50%;
+			border: 0px;
+
+			@include center;
+
+			.addIcon {
+				padding: 2px;
+			}
+
+			&:active {
+				transform: scale(0.5);
+			}
+
+			.light-mode & * {
+				stroke: $sky3;
+			}
+
+			&:hover * {
+				stroke: $sky0;
+			}
+		}
+
+		.subTaskInput {
+			text-align: left;
+			width: 100%;
+			.subTaskNameInput {
+				font-family: $secondary-font;
+				height: 1.5em;
+				width: 90%;
+				border: 0;
+				border-radius: 10px;
+				padding: 5px 10px;
+
+				.light-mode & {
+					background-color: $blue0;
+					color: $independence-gray0;
+					&::placeholder {
+						color: $independence-gray1;
+					}
+				}
+				.dark-mode & {
+					background-color: $eerie-black0;
+					color: $dark-primary;
+					&::placeholder {
+						color: $dark-secondary;
+					}
+				}
+
+				.warnTitle {
+					&::placeholder {
+						color: $unchecked-color !important;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/components/SubTask/SubTaskList.vue b/src/components/SubTask/SubTaskList.vue
index 35e0b09..2483f2d 100644
--- a/src/components/SubTask/SubTaskList.vue
+++ b/src/components/SubTask/SubTaskList.vue
@@ -11,7 +11,7 @@
 					:checked="subTask.checked"
 				/>
 			</ul>
-			<button @click="addSubTask(parent)">Add subtask</button>
+			<SubTaskInput :parent="parent" />
 		</div>
 	</span>
 </template>
@@ -20,11 +20,6 @@
 import Vue from 'vue';
 import sm from '~/libs/storageManagement';
 
-const subTaskItem: SubTask = {
-	description: 'Task',
-	checked: false,
-};
-
 export default Vue.extend({
 	name: 'SubTasks',
 	props: {
@@ -55,23 +50,6 @@ export default Vue.extend({
 			this.preventAnim = false;
 		}, 1000);
 	},
-	methods: {
-		addSubTask: (parentId: number) => {
-			if (sm.get('tasks') === undefined) sm.add('tasks', []);
-
-			const localTasks: Task[] = sm.get('tasks');
-			const parentTask = localTasks[parentId];
-
-			if (!parentTask.subTasks) parentTask.subTasks = [];
-
-			subTaskItem.description = `Description sub task ${parentTask.subTasks.length}`;
-
-			parentTask.subTasks.push(subTaskItem);
-			localTasks[parentId] = parentTask;
-
-			sm.set('tasks', localTasks);
-		},
-	},
 });
 </script>
 
diff --git a/src/components/Task/TaskComp.vue b/src/components/Task/TaskComp.vue
index d3bad5f..ab980c6 100644
--- a/src/components/Task/TaskComp.vue
+++ b/src/components/Task/TaskComp.vue
@@ -337,6 +337,7 @@ export default Vue.extend({
 
 				.info {
 					display: inline-block;
+					text-overflow: ellipsis;
 
 					h1 {
 						font-size: 1.2em;
@@ -347,6 +348,7 @@ export default Vue.extend({
 						font-family: $secondary-font;
 						font-size: 0.8em;
 						margin: 0;
+						white-space: pre-wrap;
 					}
 				}
 			}
diff --git a/src/components/Task/TaskInput.vue b/src/components/Task/TaskInput.vue
new file mode 100644
index 0000000..7385567
--- /dev/null
+++ b/src/components/Task/TaskInput.vue
@@ -0,0 +1,329 @@
+<template>
+	<div class="alignInputContainer">
+		<div class="taskInputContainer">
+			<button class="addTask" @click="addTask()">
+				<IconAdd class="addIcon" />
+			</button>
+			<form class="taskInputs">
+				<div class="taskNameInputContainer">
+					<input
+						id="newTaskInputName"
+						class="taskNameInput"
+						type="text"
+						name="TaskNameInput"
+						placeholder="Task Title..."
+						maxlength="28"
+						@keypress.enter="addTask()"
+					/>
+				</div>
+				<div class="taskDescriptionInputContainer">
+					<textarea
+						id="newTaskInputDescription"
+						class="taskDescriptionInput"
+						name="TaskDescriptionInput"
+						placeholder="Task Description..."
+						maxlength="150"
+					></textarea>
+				</div>
+			</form>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import sm from '~/libs/storageManagement';
+
+export default Vue.extend({
+	name: 'TaskInput',
+	methods: {
+		addTask: () => {
+			if (sm.get('tasks') === undefined) sm.add('tasks', []);
+
+			const titleInput = document.querySelector(
+				'input#newTaskInputName'
+			) as HTMLInputElement;
+
+			const newTitle = titleInput.value;
+
+			const newDescription = (
+				document.querySelector(
+					'textarea#newTaskInputDescription'
+				) as HTMLTextAreaElement
+			).value;
+
+			if (!newTitle || newTitle === '') {
+				if (!titleInput.className.includes(' warnTitle'))
+					titleInput.className += ' warnTitle';
+
+				(
+					document.querySelector('input#newTaskInputName') as HTMLInputElement
+				).className = titleInput.className;
+
+				setTimeout(() => {
+					(
+						document.querySelector('input#newTaskInputName') as HTMLInputElement
+					).className = titleInput.className.replace(' warnTitle', '');
+				}, 1500);
+
+				return;
+			}
+
+			const taskItem: Task = {
+				title: newTitle,
+				description: newDescription || '',
+				checked: false,
+				newTask: true,
+				autoCheck: true,
+				subTasks: [],
+			};
+
+			const localTasks: Task[] = sm.get('tasks');
+
+			localTasks.push(taskItem);
+
+			sm.set('tasks', localTasks);
+
+			(
+				document.querySelector('input#newTaskInputName') as HTMLInputElement
+			).value = '';
+
+			(
+				document.querySelector(
+					'textarea#newTaskInputDescription'
+				) as HTMLInputElement
+			).value = '';
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+@import '~assets/styles/_variables.scss';
+@import '~assets/styles/_mixins.scss';
+
+.alignInputContainer {
+	@include center;
+	@media not screen and (pointer: none), (pointer: coarse) {
+		&:not(:hover),
+		.taskInputContainer *:not(:focus-within) {
+			.taskInputContainer {
+				animation: shrink 0.5s forwards;
+				@keyframes shrink {
+					from {
+						padding: 5px 10px;
+						margin: 10px 0;
+						transform: scale(100%);
+						width: 100%;
+					}
+					to {
+						padding: 0px 25%;
+						margin: 0px 0;
+						transform: scale(60%);
+						width: 0%;
+					}
+				}
+				.taskInputs {
+					animation: hideInputs 0.5s forwards;
+					@keyframes hideInputs {
+						from {
+							transform: translateX(0%);
+							opacity: 1;
+							width: 100%;
+						}
+						to {
+							transform: translateX(25%);
+							opacity: 0;
+							width: 0%;
+						}
+					}
+				}
+			}
+		}
+
+		&:hover {
+			.taskInputContainer {
+				animation: expand 0.5s forwards;
+				@keyframes expand {
+					from {
+						padding: 0px 25%;
+						margin: 0px 0;
+						transform: scale(60%);
+						width: 0%;
+					}
+					to {
+						padding: 5px 10px;
+						margin: 10px 0;
+						transform: scale(100%);
+						width: 100%;
+					}
+				}
+				.taskInputs {
+					animation: showInputs 0.5s forwards;
+					@keyframes showInputs {
+						from {
+							transform: translateX(25%);
+							opacity: 0;
+							width: 0%;
+						}
+						to {
+							transform: translateX(0%);
+							opacity: 1;
+							width: 100%;
+						}
+					}
+				}
+			}
+		}
+	}
+	.taskInputContainer {
+		&,
+		* {
+			transition: all 0.2s;
+		}
+		*::placeholder {
+			transition: all 0.2s;
+		}
+
+		.light-mode & {
+			background-color: $blue0;
+			color: $independence-gray0;
+		}
+		.dark-mode & {
+			background-color: $eerie-black0;
+			color: $dark-primary;
+		}
+
+		border-radius: 20px;
+		@include center;
+
+		@media (pointer: none), (pointer: coarse) {
+			padding: 5px 10px;
+			margin: 10px 0;
+			width: 100%;
+		}
+
+		.addTask {
+			$bg-color: #00000080;
+
+			background-color: $bg-color;
+
+			margin: 2px;
+			margin-right: 2%;
+			padding: 1px;
+			border-radius: 50%;
+			border: 0px;
+
+			@include center;
+
+			.addIcon {
+				padding: 2px;
+			}
+
+			&:active {
+				transform: scale(0.5);
+			}
+
+			.light-mode & * {
+				stroke: $sky3;
+			}
+
+			&:hover * {
+				stroke: $sky0;
+			}
+		}
+
+		.taskInputs {
+			text-align: left;
+
+			.taskNameInputContainer,
+			.taskDescriptionInputContainer {
+				width: 100%;
+
+				input,
+				textarea {
+					width: 90%;
+					border: 0;
+					border-radius: 10px;
+
+					text-overflow: ellipsis;
+
+					.light-mode & {
+						color: $independence-gray0;
+						&::placeholder {
+							color: $independence-gray1;
+						}
+					}
+					.dark-mode & {
+						color: $dark-primary;
+						&::placeholder {
+							color: $dark-secondary;
+						}
+					}
+
+					background-color: transparent;
+
+					&:hover,
+					&:focus {
+						padding: 5px 10px;
+						.light-mode & {
+							background-color: $blue2;
+							&::placeholder {
+								color: $independence-gray0;
+							}
+						}
+						.dark-mode & {
+							background-color: $dark-background;
+							&::placeholder {
+								color: $dark-primary;
+							}
+						}
+					}
+				}
+			}
+
+			.taskNameInputContainer {
+				.taskNameInput {
+					font-family: $main-font;
+					font-size: 1.2em;
+				}
+				& .taskNameInput:focus,
+				& .taskNameInput:hover {
+					margin-bottom: 10px;
+				}
+				.warnTitle {
+					&::placeholder {
+						color: $unchecked-color !important;
+					}
+				}
+			}
+
+			.taskDescriptionInputContainer {
+				.taskDescriptionInput {
+					overflow: auto;
+
+					white-space: pre-wrap;
+
+					font-family: $secondary-font;
+					font-size: 0.85em;
+
+					&:focus {
+						height: 5em;
+						resize: vertical;
+					}
+
+					&:not(:focus) {
+						overflow: hidden;
+						height: 1em !important;
+						resize: none;
+					}
+				}
+				& .taskDescriptionInput:focus,
+				& .taskDescriptionInput:hover {
+					margin-top: 10px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/components/Task/TaskList.vue b/src/components/Task/TaskList.vue
index 74b24f4..1fcf4be 100644
--- a/src/components/Task/TaskList.vue
+++ b/src/components/Task/TaskList.vue
@@ -12,7 +12,6 @@
 			/>
 		</ul>
 		<ProgressBar />
-		<button @click="addTask()">Add tasks</button>
 	</div>
 </template>
 
@@ -20,15 +19,6 @@
 import Vue from 'vue';
 import sm from '~/libs/storageManagement';
 
-const taskItem: Task = {
-	title: 'Task 00',
-	description: 'Task',
-	checked: false,
-	newTask: true,
-	autoCheck: true,
-	subTasks: [],
-};
-
 export default Vue.extend({
 	data() {
 		return {
@@ -49,19 +39,6 @@ export default Vue.extend({
 			this.list = sm.get('tasks') ? sm.get('tasks') : [];
 		});
 	},
-	methods: {
-		addTask: () => {
-			if (sm.get('tasks') === undefined) sm.add('tasks', []);
-
-			const localTasks: Task[] = sm.get('tasks');
-			taskItem.title = `Title Task ${localTasks.length}`;
-			taskItem.description = `Description Task ${localTasks.length}`;
-
-			localTasks.push(taskItem);
-
-			sm.set('tasks', localTasks);
-		},
-	},
 });
 </script>
 
diff --git a/src/components/icon/Add.vue b/src/components/icon/Add.vue
new file mode 100644
index 0000000..9ed70b7
--- /dev/null
+++ b/src/components/icon/Add.vue
@@ -0,0 +1,30 @@
+<template>
+	<svg
+		width="24"
+		height="24"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M8 12H12M16 12H12M12 12V8M12 12V16"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'IconAdd',
+});
+</script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5b303a4..26db289 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -7,6 +7,7 @@
 		</div>
 		<div>
 			<TaskList />
+			<TaskInput />
 		</div>
 		<PageFooter />
 	</main>
diff --git a/src/static/icons/add-icon.svg b/src/static/icons/add-icon.svg
new file mode 100644
index 0000000..6256914
--- /dev/null
+++ b/src/static/icons/add-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12H12M16 12H12M12 12V8M12 12V16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>