From 3f6b7b11b82c00a12b08c409fef9737555ba38d3 Mon Sep 17 00:00:00 2001 From: abhishek Date: Wed, 9 Feb 2022 15:23:51 +0530 Subject: [PATCH 1/5] JS update --- script.js | 166 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) diff --git a/script.js b/script.js index bc934df..5570ca5 100644 --- a/script.js +++ b/script.js @@ -1,2 +1,168 @@ // You can start writing your code below +const todoForm = document.querySelector(".todo-form") +const todoInput = document.querySelector("input"); +const todoCollection = document.querySelector(".todo-collection"); + +todoForm.addEventListener("submit", addTodo); + +function addTodo(e) +{ + if (todoInput.value=== "") { + // alert to indicate that the user must input something + alert("enter something!"); + } else { + // create elements + // li + const li = document.createElement("li"); + const todoTitle = document.createElement("span"); + const editableInput = document.createElement("input"); + const editButton = document.createElement("button"); + const saveButton = document.createElement("button"); + const deleteButton = document.createElement("button"); + + // li m add todo-collection__item; + li.classList.add("todo-collection__item"); + todoTitle.classList.add("todo-collection__item__title"); + todoTitle.innerText = todoInput.value; + + editableInput.classList.add("input"); + editableInput.classList.add("input--todo"); + editableInput.classList.add("hidden"); + editableInput.type = "text"; + editableInput.value = todoInput.value; + + editButton.classList.add("button"); + editButton.classList.add("button--todo"); + editButton.classList.add("button--edit"); + editButton.innerText = "Edit"; + + saveButton.classList.add("button"); + saveButton.classList.add("button--todo"); + saveButton.classList.add("button--save"); + saveButton.classList.add("hidden"); + saveButton.innerText = "Save"; + + deleteButton.classList.add("button"); + deleteButton.classList.add("button--todo"); + deleteButton.classList.add("button--delete"); + deleteButton.innerText = "Delee"; + + // add elements to todo list + + //li m append todoTitle + li.appendChild(todoTitle); + li.appendChild(editableInput); + li.appendChild(editButton); + li.appendChild(saveButton); + li.appendChild(deleteButton); + todoCollection.appendChild(li); + + function toggleTodoEditForm() { + todoTitle.classList.toggle("hidden"); + editableInput.classList.toggle("hidden"); + editButton.classList.toggle("hidden"); + saveButton.classList.toggle("hidden"); + } + + // button event listeners + editButton.addEventListener("click", () => { + toggleTodoEditForm(); + editableInput.focus(); + }); + + saveButton.addEventListener("click", () => { + todoTitle.innerText = editableInput.value; + toggleTodoEditForm(); + }); + + deleteButton.addEventListener("click", () => { + setTimeout(() => { + todoCollection.removeChild(li); + }, 100); + }); + } + // clear input + todoInput.value = ""; + e.preventDefault(); +} + +function getTodosFromLS() { + let todos; + + if (localStorage.getItem("todos") === null) { + todos = []; + } else { + todos = JSON.parse(localStorage.getItem("todos")); + } + + todos.forEach(todo => { + // create elements + + const li = document.createElement("li"); + const todoTitle = document.createElement("span"); + const editableInput = document.createElement("input"); + const editButton = document.createElement("button"); + const saveButton = document.createElement("button"); + const deleteButton = document.createElement("button"); + + li.classList.add("todo-collection__item"); + + todoTitle.classList.add("todo-collection__item__title"); + todoTitle.innerText = todoInput.value; + + editableInput.classList.add("input"); + editableInput.classList.add("input--todo"); + editableInput.classList.add("hidden"); + editableInput.type = "text"; + editableInput.value = todoInput.value; + + editButton.classList.add("button"); + editButton.classList.add("button--todo"); + editButton.classList.add("button--edit"); + editButton.innerText = "Edit"; + + saveButton.classList.add("button"); + saveButton.classList.add("button--todo"); + saveButton.classList.add("button--save"); + saveButton.classList.add("hidden"); + saveButton.innerText = "Save"; + + deleteButton.classList.add("button"); + deleteButton.classList.add("button--todo"); + deleteButton.classList.add("button--delete"); + deleteButton.innerText = "Delete"; + + // // add elements to todo list + li.appendChild(todoTitle); + li.appendChild(editableInput); + li.appendChild(editButton); + li.appendChild(saveButton); + li.appendChild(deleteButton); + todoCollection.appendChild(li); + + function toggleTodoEditForm() { + todoTitle.classList.toggle("hidden"); + editableInput.classList.toggle("hidden"); + editButton.classList.toggle("hidden"); + saveButton.classList.toggle("hidden"); + } + + // button event listeners + editButton.addEventListener("click", () => { + toggleTodoEditForm(); + editableInput.focus(); + }); + + saveButton.addEventListener("click", () => { + todoTitle.innerText = editableInput.value; + toggleTodoEditForm(); + }); + + deleteButton.addEventListener("click", () => { + setTimeout(() => { + todoCollection.removeChild(li); + }, 100); + }); + }); +} From 1fed56783e5e992c7f2dc39ca3cbbff321a2f5e0 Mon Sep 17 00:00:00 2001 From: abhishek Date: Wed, 9 Feb 2022 21:59:04 +0530 Subject: [PATCH 2/5] js --- script.js | 106 +++++------------------------------------------------- 1 file changed, 9 insertions(+), 97 deletions(-) diff --git a/script.js b/script.js index 5570ca5..4c0791b 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,3 @@ -// You can start writing your code below const todoForm = document.querySelector(".todo-form") const todoInput = document.querySelector("input"); const todoCollection = document.querySelector(".todo-collection"); @@ -7,12 +6,12 @@ todoForm.addEventListener("submit", addTodo); function addTodo(e) { - if (todoInput.value=== "") { - // alert to indicate that the user must input something - alert("enter something!"); - } else { - // create elements - // li + if (todoInput.value=== "") + { + alert("You cannot enter empty value"); + } + else + { const li = document.createElement("li"); const todoTitle = document.createElement("span"); const editableInput = document.createElement("input"); @@ -20,7 +19,6 @@ function addTodo(e) const saveButton = document.createElement("button"); const deleteButton = document.createElement("button"); - // li m add todo-collection__item; li.classList.add("todo-collection__item"); todoTitle.classList.add("todo-collection__item__title"); todoTitle.innerText = todoInput.value; @@ -45,11 +43,8 @@ function addTodo(e) deleteButton.classList.add("button"); deleteButton.classList.add("button--todo"); deleteButton.classList.add("button--delete"); - deleteButton.innerText = "Delee"; - - // add elements to todo list + deleteButton.innerText = "Delete"; - //li m append todoTitle li.appendChild(todoTitle); li.appendChild(editableInput); li.appendChild(editButton); @@ -64,7 +59,6 @@ function addTodo(e) saveButton.classList.toggle("hidden"); } - // button event listeners editButton.addEventListener("click", () => { toggleTodoEditForm(); editableInput.focus(); @@ -76,93 +70,11 @@ function addTodo(e) }); deleteButton.addEventListener("click", () => { - setTimeout(() => { todoCollection.removeChild(li); - }, 100); }); } // clear input +// IF we will not give below then at input place it will not be cleared. todoInput.value = ""; e.preventDefault(); -} - -function getTodosFromLS() { - let todos; - - if (localStorage.getItem("todos") === null) { - todos = []; - } else { - todos = JSON.parse(localStorage.getItem("todos")); - } - - todos.forEach(todo => { - // create elements - - const li = document.createElement("li"); - const todoTitle = document.createElement("span"); - const editableInput = document.createElement("input"); - const editButton = document.createElement("button"); - const saveButton = document.createElement("button"); - const deleteButton = document.createElement("button"); - - li.classList.add("todo-collection__item"); - - todoTitle.classList.add("todo-collection__item__title"); - todoTitle.innerText = todoInput.value; - - editableInput.classList.add("input"); - editableInput.classList.add("input--todo"); - editableInput.classList.add("hidden"); - editableInput.type = "text"; - editableInput.value = todoInput.value; - - editButton.classList.add("button"); - editButton.classList.add("button--todo"); - editButton.classList.add("button--edit"); - editButton.innerText = "Edit"; - - saveButton.classList.add("button"); - saveButton.classList.add("button--todo"); - saveButton.classList.add("button--save"); - saveButton.classList.add("hidden"); - saveButton.innerText = "Save"; - - deleteButton.classList.add("button"); - deleteButton.classList.add("button--todo"); - deleteButton.classList.add("button--delete"); - deleteButton.innerText = "Delete"; - - // // add elements to todo list - li.appendChild(todoTitle); - li.appendChild(editableInput); - li.appendChild(editButton); - li.appendChild(saveButton); - li.appendChild(deleteButton); - todoCollection.appendChild(li); - - function toggleTodoEditForm() { - todoTitle.classList.toggle("hidden"); - editableInput.classList.toggle("hidden"); - editButton.classList.toggle("hidden"); - saveButton.classList.toggle("hidden"); - } - - // button event listeners - editButton.addEventListener("click", () => { - toggleTodoEditForm(); - editableInput.focus(); - }); - - saveButton.addEventListener("click", () => { - todoTitle.innerText = editableInput.value; - toggleTodoEditForm(); - }); - - deleteButton.addEventListener("click", () => { - setTimeout(() => { - todoCollection.removeChild(li); - }, 100); - }); - }); -} - +} \ No newline at end of file From c638411ff18b6129ccd149dc28767d58ae7617e3 Mon Sep 17 00:00:00 2001 From: abhishek Date: Wed, 9 Feb 2022 22:11:19 +0530 Subject: [PATCH 3/5] css --- styles.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/styles.css b/styles.css index 2800eca..20cf8f7 100644 --- a/styles.css +++ b/styles.css @@ -2,8 +2,8 @@ html, body { box-sizing: border-box; margin: 0; - background-color: #AD0AE9; - color: white; + background-color:#f0f2f5; + color: #1877f2; font-family: "Arial", sans-serif; } @@ -59,7 +59,7 @@ body { flex-direction: column; justify-content: center; text-align: left; - color: rgba(255, 255, 255, 0.3); + color: hotpink; transition: 0.3s; cursor: text; } @@ -82,7 +82,7 @@ body { padding: 0 0.5rem; font-size: 1.1rem; color: white; - background-color: rgb(46, 46, 46); + background-color: black; border: none; border-bottom: 1.5px solid rgba(255, 255, 255, 0.4); transition: 0.3s; @@ -101,8 +101,8 @@ body { font-size: 1.1rem; font-weight: bold; line-height: 0.9rem; - background-color: white; - color: rgb(46, 46, 46); + background-color:black; + color: white; border-color: transparent; padding: 0.5rem; margin-right: 150px; @@ -119,7 +119,7 @@ body { .button--todo { color: #ddd; - background-color: inherit; + background-color: #42b72a; border: 1px solid #ddd; transition: 0.3s; } From f0bf1dca005e6de2490b6e5b8255338569dd2ae3 Mon Sep 17 00:00:00 2001 From: abhishek Date: Wed, 9 Feb 2022 22:18:50 +0530 Subject: [PATCH 4/5] fix edit --- script.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/script.js b/script.js index 4c0791b..d2344d0 100644 --- a/script.js +++ b/script.js @@ -53,11 +53,18 @@ function addTodo(e) todoCollection.appendChild(li); function toggleTodoEditForm() { + if (editableInput.value=== "") + { + alert("You cannot enter empty value"); + } + else + { todoTitle.classList.toggle("hidden"); editableInput.classList.toggle("hidden"); editButton.classList.toggle("hidden"); saveButton.classList.toggle("hidden"); } + } editButton.addEventListener("click", () => { toggleTodoEditForm(); From 28a4cb288ae7be11b993167b8a674efacab720e7 Mon Sep 17 00:00:00 2001 From: abhishek <80109306+abhishek-sultaniya@users.noreply.github.com> Date: Wed, 9 Feb 2022 22:24:00 +0530 Subject: [PATCH 5/5] update js edit --- script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index d2344d0..5adcf87 100644 --- a/script.js +++ b/script.js @@ -55,7 +55,7 @@ function addTodo(e) function toggleTodoEditForm() { if (editableInput.value=== "") { - alert("You cannot enter empty value"); + alert("You cannot enter empty value while editing"); } else { @@ -84,4 +84,4 @@ function addTodo(e) // IF we will not give below then at input place it will not be cleared. todoInput.value = ""; e.preventDefault(); -} \ No newline at end of file +}