diff --git a/1. Building a To-Do List Without Framework/submission/index.html b/1. Building a To-Do List Without Framework/submission/index.html new file mode 100644 index 0000000..490c589 --- /dev/null +++ b/1. Building a To-Do List Without Framework/submission/index.html @@ -0,0 +1,122 @@ + + + + + + + Document + + + + +
+
+
+
+
+
+ + +
+
+
+
+ +
+
+
+ + + + + + + + diff --git a/1. Building a To-Do List Without Framework/submission/index.js b/1. Building a To-Do List Without Framework/submission/index.js new file mode 100644 index 0000000..1db87fd --- /dev/null +++ b/1. Building a To-Do List Without Framework/submission/index.js @@ -0,0 +1,139 @@ +let todoList = []; + +const generateTodoItem = (itemName) => { + const timeStamp = Date.now(); + return { + id: "todo-item-" + timeStamp, + name: itemName, + timeStamp, + isDone: false, + }; +}; + +const todoElement = (item, i) => { + const elem = document.createElement("div"); + elem.id = item.id; + elem.innerHTML = ` +
+
${i + 1}
+
+ +
+
${item.name}
+
+ +
+
`; + return elem; +}; + +const renderList = () => { + const listElement = document.getElementById("todo-list"); + listElement.innerHTML = ""; + for (let i = 0; i < todoList.length; i++) { + const todoItem = todoElement(todoList[i], i); + listElement.appendChild(todoItem); + } +}; + +document.getElementById("todo-form").addEventListener("submit", (event) => { + event.preventDefault(); + const itemName = event.target["todo-input"].value; + if (itemName) { + todoList.push(generateTodoItem(itemName)); + renderList(); + saveTodo(); + const alert = ` + `; + $("#confirmation").html(alert); + event.target.reset(); + } +}); + +const markItem = (event) => { + const itemId = event.target.parentElement.id; // getting the id of the parent element to search in the array + todoList.some((todoItem) => { + if (todoItem.id === itemId) { + todoItem.isDone = !todoItem.isDone; + renderList(); + saveTodo(); + return true; + } + }); +}; + +const deleteItem = (event) => { + const itemId = event.target.parentElement.id; // getting the id of the parent element to search in the array + todoList.some((todoItem, i) => { + if (todoItem.id === itemId) { + const approveDelete = confirm( + "Delete this item. If not then press cancel to undo" + ); //taking input from user if they sure want to delete + if (approveDelete) { + todoList.splice(i, 1); + renderList(); + saveTodo(); + const alert = ` + `; + $("#confirmation").html(alert); + } + return true; + } + }); +}; + +const saveTodo = () => { + localStorage.setItem("todoList", JSON.stringify(todoList)); // key and its value + const saveInfo = ` + `; + $("#save-info").html(saveInfo); +}; + +const clearTodo = () => { + if (todoList.length){ + const approveClear = confirm("Are you sure you want to delete your all items"); + if(approveClear){ + `${localStorage.removeItem("todoList")} + ${(todoList = [])} + ${renderList()}` + const clearInfo = ` + `; + $("#save-info").html(clearInfo); + } + } + else{ + const clearInfo = ` + `; + $("#save-info").html(clearInfo); + } +}; + +try { + if (localStorage.getItem("todoList")) { + todoList = JSON.parse(localStorage.getItem("todoList")); + renderList(); + } +} catch (e) { + console.log(e); +}