From ce64c3594e40f143cb05be3958eb0bbb2340fb61 Mon Sep 17 00:00:00 2001 From: sauravkr818 Date: Fri, 2 Apr 2021 11:17:35 +0530 Subject: [PATCH 1/4] [ADD]todo webpage This adds todo webpage --- .../submission/index.html | 239 ++++++++++++++++++ .../submission/index.js | 108 ++++++++ 2 files changed, 347 insertions(+) create mode 100644 1. Building a To-Do List Without Framework/submission/index.html create mode 100644 1. Building a To-Do List Without Framework/submission/index.js 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..22c92aa --- /dev/null +++ b/1. Building a To-Do List Without Framework/submission/index.html @@ -0,0 +1,239 @@ + + + + + + + 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..1e3fde9 --- /dev/null +++ b/1. Building a To-Do List Without Framework/submission/index.js @@ -0,0 +1,108 @@ +let todoList = []; + + function generateTodoItem(itemName) { + const timestamp = Date.now(); + return { + id: "todo-item-" + timestamp, + name: itemName, + timestamp, + isDone: false, + }; + } + + function todoElement(item, i) { + const elem = document.createElement("div"); + elem.id = item.id; + elem.innerHTML = ` +
+
${i + 1}
+
+
${item.name}
+
+
+ `; + return elem; + } + + function 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); + } + + let alert = ` + `; + $("#confirmation").html(alert); + } + + document + .getElementById("todo-form") + .addEventListener("submit", function (event) { + event.preventDefault(); + const itemName = event.target["todo-input"].value; + if (itemName) { + todoList.push(generateTodoItem(itemName)); + isAdded = true; + renderList(); + event.target.reset(); + } + }); + + function markItem(event) { + const itemId = event.target.parentElement.id; // getting the id of the parent element to search in the array + todoList.some(function (todoItem) { + if (todoItem.id === itemId) { + todoItem.isDone = !todoItem.isDone; + renderList(); + return true; + } + }); + } + + function deleteItem(event) { + isAdded = false; + const itemId = event.target.parentElement.id; // getting the id of the parent element to search in the array + todoList.some(function (todoItem, i) { + if (todoItem.id === itemId) { + todoList.splice(i, 1); + renderList(); + return true; + } + }); + } + + function saveTodo(e) { + localStorage.setItem("todoList", JSON.stringify(todoList)); + } + function deleteTodo(e) { + localStorage.clear(); + location.reload(); + } + + try { + if (localStorage.getItem("todoList")) { + todoList = JSON.parse(localStorage.getItem("todoList")); + renderList(); + } + } catch (e) { + console.log(e); + } \ No newline at end of file From bd2bd9d65ff336ff97834c5b85cfedd97dc70124 Mon Sep 17 00:00:00 2001 From: sauravkr818 Date: Fri, 2 Apr 2021 11:25:50 +0530 Subject: [PATCH 2/4] [UPDATE]javascript external file This removes intetnal js #1 --- .../submission/index.html | 111 ------------------ 1 file changed, 111 deletions(-) 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 index 22c92aa..077ffab 100644 --- a/1. Building a To-Do List Without Framework/submission/index.html +++ b/1. Building a To-Do List Without Framework/submission/index.html @@ -113,117 +113,6 @@
- - + 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 index 1e3fde9..e1ee6f0 100644 --- a/1. Building a To-Do List Without Framework/submission/index.js +++ b/1. Building a To-Do List Without Framework/submission/index.js @@ -1,108 +1,132 @@ let todoList = []; - function generateTodoItem(itemName) { - const timestamp = Date.now(); - return { - id: "todo-item-" + timestamp, - name: itemName, - timestamp, - isDone: false, - }; - } +const generateTodoItem = (itemName) => { + const timeStamp = Date.now(); + return { + id: "todo-item-" + timeStamp, + name: itemName, + timeStamp, + isDone: false, + }; +}; - function todoElement(item, i) { - const elem = document.createElement("div"); - elem.id = item.id; - elem.innerHTML = ` -
-
${i + 1}
-
{ + const elem = document.createElement("div"); + elem.id = item.id; + elem.innerHTML = ` +
+
${i + 1}
+
+
-
${item.name}
-
+ }/>
- `; - return elem; - } - - function renderList() { - const listElement = document.getElementById("todo-list"); +
${item.name}
+
+ +
+
`; + return elem; +}; - listElement.innerHTML = ""; +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); + } +}; - 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(); + const alert = ` + `; + $("#confirmation").html(alert); + event.target.reset(); + } +}); - let alert = ` - `; - $("#confirmation").html(alert); - } +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(); - document - .getElementById("todo-form") - .addEventListener("submit", function (event) { - event.preventDefault(); - const itemName = event.target["todo-input"].value; - if (itemName) { - todoList.push(generateTodoItem(itemName)); - isAdded = true; - renderList(); - event.target.reset(); - } - }); + return true; + } + }); +}; - function markItem(event) { - const itemId = event.target.parentElement.id; // getting the id of the parent element to search in the array - todoList.some(function (todoItem) { - if (todoItem.id === itemId) { - todoItem.isDone = !todoItem.isDone; - renderList(); - 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; + } + }); +}; - function deleteItem(event) { - isAdded = false; - const itemId = event.target.parentElement.id; // getting the id of the parent element to search in the array - todoList.some(function (todoItem, i) { - if (todoItem.id === itemId) { - todoList.splice(i, 1); - renderList(); - return true; +const saveTodo = (e) => { + localStorage.setItem("todoList", JSON.stringify(todoList)); // key and its value + const saveInfo = ` + `; + $("#save-info").html(saveInfo); +}; - function saveTodo(e) { - localStorage.setItem("todoList", JSON.stringify(todoList)); - } - function deleteTodo(e) { - localStorage.clear(); - location.reload(); - } - - try { - if (localStorage.getItem("todoList")) { - todoList = JSON.parse(localStorage.getItem("todoList")); - renderList(); +const clearTodo = () => { + const clearInfo = ` + `; + $("#save-info").html(clearInfo); + todoList.length > 0 // if array length is null then do not show confirm msg. + ? `${confirm("Are you sure you want to delete your all items")} + ${localStorage.removeItem("todoList")} + ${(todoList = [])} // array made empty + ${renderList()}` + : ""; +}; + +try { + if (localStorage.getItem("todoList")) { + todoList = JSON.parse(localStorage.getItem("todoList")); + renderList(); + } +} catch (e) { + console.log(e); +} From 369a4c5eb29ec0b972f5722a289767e3a343abab Mon Sep 17 00:00:00 2001 From: sauravkr818 Date: Mon, 5 Apr 2021 10:53:11 +0530 Subject: [PATCH 4/4] [FIX]Bug fixed This fixes the issue of marking checkbox and then reloading #1 --- .../submission/index.html | 24 ++++------- .../submission/index.js | 41 +++++++++++-------- 2 files changed, 32 insertions(+), 33 deletions(-) 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 index 6fdeec6..490c589 100644 --- a/1. Building a To-Do List Without Framework/submission/index.html +++ b/1. Building a To-Do List Without Framework/submission/index.html @@ -20,6 +20,7 @@
+
@@ -91,19 +94,8 @@
-
-
- -
- -
-
+
+
`; $("#confirmation").html(alert); @@ -60,7 +61,7 @@ const markItem = (event) => { if (todoItem.id === itemId) { todoItem.isDone = !todoItem.isDone; renderList(); - + saveTodo(); return true; } }); @@ -89,7 +90,7 @@ const deleteItem = (event) => { }); }; -const saveTodo = (e) => { +const saveTodo = () => { localStorage.setItem("todoList", JSON.stringify(todoList)); // key and its value const saveInfo = ` `; $("#save-info").html(clearInfo); - todoList.length > 0 // if array length is null then do not show confirm msg. - ? `${confirm("Are you sure you want to delete your all items")} - ${localStorage.removeItem("todoList")} - ${(todoList = [])} // array made empty - ${renderList()}` - : ""; + } + } + else{ + const clearInfo = ` + `; + $("#save-info").html(clearInfo); + } }; try {