From 86492b2ab09b99768560bf0514293d30e6a46ff2 Mon Sep 17 00:00:00 2001
From: Luke Cartwright <lukeecart@users.noreply.github.com>
Date: Sun, 31 Jul 2022 09:25:58 +0100
Subject: [PATCH 1/2] Add items to local storage

The default tasks can also be removed from the index.html.

There is a function setUpPage which will append the tasks from local storage when the page first loads.
---
 main.js | 49 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/main.js b/main.js
index e7d27a3..9fde9d3 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,3 @@
-let newTodo, demoTodo;
-
 let todoContainer = document.querySelector('.tasks-wrapper');
 
 let newBtn = document.querySelector('.new-task');
@@ -7,17 +5,29 @@ let addBtn = document.querySelector('.add-task-btn');
 let cancelBtn = document.querySelector('.cancel');
 
 newBtn.addEventListener('click', hidePage);
+setUpPage();
+
+function setUpPage() {
+    let savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
+    savedTasks.forEach(item => {
+        createTodo(item);
+    });
+}
 
 // Create TODO
 addBtn.addEventListener('click', () => {
     newTodo = document.querySelector('textarea').value;
-    createTodo();
+    saveTaskToStorage(newTodo);
+    createTodo(newTodo);
+    hidePage();
 });
 
 document.querySelector('textarea').addEventListener('keypress', (key) => {
     newTodo = document.querySelector('textarea').value;
-    if(key.which === 13) {
-        createTodo();
+    if (key.which === 13) {
+        saveTaskToStorage(newTodo);
+        createTodo(newTodo);
+        hidePage();
     }
 });
 
@@ -25,10 +35,12 @@ document.querySelector('textarea').addEventListener('keypress', (key) => {
 todoContainer.addEventListener('click', (e) => {
     const item = e.target;
 
-    if(item.classList[2] == 'delete') {
+    if (item.classList[2] == 'delete') {
         item.parentElement.remove();
+        const taskTitle = item.parentElement.children[1].innerHTML;
+        deleteTaskFromStorage(taskTitle);
     }
-})
+});
 
 cancelBtn.addEventListener('click', hidePage);
 
@@ -40,9 +52,22 @@ function hidePage() {
     document.querySelector('textarea').value = '';
 };
 
-function createTodo() {
-    demoTodo = document.createElement('LI');
-    demoTodo.innerHTML = "<input type='checkbox'> <p class='todo'>" + newTodo + "</p><i class='far fa-trash-alt delete'></i>"
+function createTodo(newTodo) {
+    const demoTodo = document.createElement('LI');
+    demoTodo.innerHTML = "<input type='checkbox'> <p class='todo'>" + newTodo + "</p><i class='far fa-trash-alt delete'></i>";
     todoContainer.appendChild(demoTodo);
-    hidePage();
-};
\ No newline at end of file
+};
+
+function saveTaskToStorage(addedTask) {
+    let savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
+    savedTasks.push(addedTask);
+    localStorage.setItem('tasks', JSON.stringify(savedTasks));
+}
+
+function deleteTaskFromStorage(removedTask) {
+    let savedTasks = JSON.parse(localStorage.getItem('tasks'));
+    const newTaskList = savedTasks.filter(taskItem => {
+        return taskItem !== removedTask;
+    });
+    localStorage.setItem('tasks', JSON.stringify(newTaskList));
+}

From 3f2d816b3ffc4cb671d77f185ed84677aac340f2 Mon Sep 17 00:00:00 2001
From: Luke Cartwright <lukeecartwright@gmail.com>
Date: Sun, 31 Jul 2022 09:32:54 +0100
Subject: [PATCH 2/2] Removed the default tasks

---
 index.html | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/index.html b/index.html
index 7782933..aab1a2b 100644
--- a/index.html
+++ b/index.html
@@ -25,21 +25,6 @@ <h1>ToDo List</h1>
 			<div class="tasks">
 				<p class="disabled">Your Tasks</p>
 				<ul class="tasks-wrapper">
-					<li>
-                        <input type="checkbox" /> 
-                        <p class="todo">Add filter option</p>
-                        <i class="far fa-trash-alt delete"></i>
-                    </li>
-					<li>
-                        <input type="checkbox" /> 
-                        <p class="todo">Go to Guitar Class</p>
-                        <i class="far fa-trash-alt delete"></i>
-                    </li>
-					<li>
-                        <input type="checkbox" /> 
-                        <p class="todo">Build a Javascript App</p>
-                        <i class="far fa-trash-alt delete"></i>
-                    </li>
 				</ul>
 			</div>
 			<div class="new-task btn">