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

@@ -1,34 +1,46 @@
-let newTodo, demoTodo;
-
 let todoContainer = document.querySelector('.tasks-wrapper');
 
 let newBtn = document.querySelector('.new-task');
 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();
     }
 });
 
 // Delete Todo
 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();
-};
+};
+
+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));
+}