Merge pull request #3 from lukeecart/Add-items-to-local-storage

Add items to local storage
Dharmik48 · Jul 31, 2022 · b283cbd · b283cbd
2 parents a9a6102 + 3f2d816
commit b283cbd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git 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">

diff --git a/main.js b/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));
+}