From 67cd1c8d11daf0aa581a912ef868456dca8c2bfa Mon Sep 17 00:00:00 2001 From: Edwin Miguel Date: Wed, 9 Aug 2023 22:52:13 -0500 Subject: [PATCH 1/4] Ocultar las secciones main y footer. Crear una nueva tarea completado --- src/index.html | 7 +++--- src/index.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index c38e045..8e23277 100644 --- a/src/index.html +++ b/src/index.html @@ -19,6 +19,7 @@

My Day

All my tasks in one place

My Day
-
-
    +
    +
    • @@ -59,7 +60,7 @@

      My Day

    -
    +
    0 item left diff --git a/src/index.js b/src/index.js index eba52c1..68c6f39 100644 --- a/src/index.js +++ b/src/index.js @@ -3,3 +3,63 @@ import "./css/base.css"; import { sayHello } from "./js/utils"; console.log(sayHello("Hello")); + +const todosSaved = JSON.parse(localStorage.getItem("todoList")); +const input = document.getElementById("inputTodo"); +let todosList = []; +const mainContainer = document.getElementById("main"); +const footer = document.getElementById("footer"); +const ul = document.getElementById("todoList"); + +if (todosSaved === null) { + mainContainer.style.display = "none"; + footer.style.display = "none"; +} else { + showTodos(); +} + +function showTodos() { + todosList = [...todosSaved]; + const todos = todosList + .map((item) => { + return ` +
  • +
    + + + +
    + +
    • `; + }) + .join(""); + + ul.innerHTML = todos; +} + +//verificar si lo que se escribe en el input es una entrada valida: +const verifyInputValue = (event) => { + const inputValue = event.target.value.trim() === "" ? null : event.target.value.trim(); + + if (inputValue === null) { + alert("por favor, escribe una tarea."); + } else { + createTodo(inputValue); + } +}; +input.addEventListener("change", verifyInputValue); + +//proceso para guardar los todos en el localStorage: +function createTodo(todo) { + const newTodo = { + id: todo, + title: todo, + completed: false, + }; + + todosList.push(newTodo); + + const listToString = JSON.stringify(todosList); + + localStorage.setItem("todoList", listToString); +} From 046f24846417a159bf2986a691aa4dfaad76d84b Mon Sep 17 00:00:00 2001 From: Edwin Miguel Date: Fri, 18 Aug 2023 15:17:26 -0500 Subject: [PATCH 2/4] mostrar la cantidad de Todos en sus estados de pending y completed --- src/index.html | 6 +- src/index.js | 231 ++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 204 insertions(+), 33 deletions(-) diff --git a/src/index.html b/src/index.html index 8e23277..f762db1 100644 --- a/src/index.html +++ b/src/index.html @@ -33,7 +33,7 @@

    My Day

      -
    • +
diff --git a/src/index.js b/src/index.js index 68c6f39..603ff22 100644 --- a/src/index.js +++ b/src/index.js @@ -4,38 +4,23 @@ import { sayHello } from "./js/utils"; console.log(sayHello("Hello")); -const todosSaved = JSON.parse(localStorage.getItem("todoList")); const input = document.getElementById("inputTodo"); -let todosList = []; const mainContainer = document.getElementById("main"); const footer = document.getElementById("footer"); const ul = document.getElementById("todoList"); - -if (todosSaved === null) { +// window.addEventListener("hashchange", () => countTodos(todosList)); +let todosList = []; +const localStorageData = localStorage.getItem("mydayapp-js"); +if (localStorageData) { + todosList = JSON.parse(localStorageData); + updateTodos(todosList); + countTodos(todosList); +} else { mainContainer.style.display = "none"; footer.style.display = "none"; -} else { - showTodos(); } -function showTodos() { - todosList = [...todosSaved]; - const todos = todosList - .map((item) => { - return ` -
  • -
    - - - -
    - -
    • `; - }) - .join(""); - - ul.innerHTML = todos; -} +console.log(todosList); //verificar si lo que se escribe en el input es una entrada valida: const verifyInputValue = (event) => { @@ -44,22 +29,208 @@ const verifyInputValue = (event) => { if (inputValue === null) { alert("por favor, escribe una tarea."); } else { - createTodo(inputValue); + saveTodo(inputValue); } }; input.addEventListener("change", verifyInputValue); //proceso para guardar los todos en el localStorage: -function createTodo(todo) { +function saveTodo(todoName) { + let newsTodos = []; const newTodo = { - id: todo, - title: todo, + id: todoName, + title: todoName, completed: false, }; todosList.push(newTodo); + console.log(newsTodos); + localStorage.setItem("mydayapp-js", JSON.stringify(todosList)); + updateTodos(todosList); + input.value = ""; + console.log(localStorage.getItem("mydayapp-js")); + countTodos(todosList); +} + +function updateTodos(array) { + const todos = array + .map((item) => { + return ` +
  • +
    + + + +
    + +
    • `; + }) + .join(""); + + ul.innerHTML = todos; +} - const listToString = JSON.stringify(todosList); +//evento +ul.addEventListener("click", function (event) { + if (event.target.nodeName === "INPUT") { + changeTodoState(event); + } + if (event.target.nodeName === "BUTTON") { + deleteItem(event); + } +}); + +function changeTodoState(item) { + console.log(item); + console.log(todosList); + let li = document.querySelectorAll("li.pending, li.completed"); + li = [...li]; + console.log(li); + const current = li.find((element) => element.id === item.target.id); + + console.log(item.target.checked); + const todosStateToggle = todosList.map((todo) => { + if (todo.id === item.target.id) { + if (todo.completed === true) { + current.classList.remove("completed"); + current.classList.add("pending"); + todo.completed = false; + } else { + current.classList.remove("pending"); + current.classList.add("completed"); + todo.completed = true; + } + } + return todo; + }); + todosList = [...todosStateToggle]; + countTodos(todosList); + localStorage.setItem("mydayapp-js", JSON.stringify(todosList)); +} + +let labels = document.getElementsByTagName("label"); + +labels = [...labels]; + +labels.forEach((item) => { + item.addEventListener("dblclick", (event) => { + editTodo(event); + }); +}); + +function editTodo(element) { + const label = element.target; + console.log(label.textContent); + + let li = document.querySelectorAll("li.pending, li.completed"); + li = [...li]; + + const todoClicked = li.filter((element) => element.id === label.id); + const todoClickedId = todoClicked[0].id; + const todo = document.getElementById(todoClickedId); + console.log(todo); + const labelText = label.textContent; + const inputEdit = todo.querySelector(".edit"); + inputEdit.value = labelText; + console.log(todosList); + + if (todo.classList.contains("completed")) { + todo.classList.remove("completed"); + todo.classList.add("editing"); + inputEdit.focus(); + inputEdit.addEventListener("keyup", (event) => { + if (event.key === "Enter") { + label.textContent = inputEdit.value.trim(); + + todosList = todosList.map((item) => { + if (item.id === todo.id) { + item.title = label.textContent; + item.id = label.textContent; + } + return item; + }); + console.log(todosList); + localStorage.setItem("mydayapp-js", JSON.stringify(todosList)); + todo.classList.remove("editing"); + todo.classList.add("completed"); + } else if (event.key === "Escape") { + label.textContent = label.textContent.trim(); + todo.classList.remove("editing"); + todo.classList.add("completed"); + } + }); + } else if (todo.classList.contains("pending")) { + todo.classList.remove("pending"); + todo.classList.add("editing"); + + inputEdit.focus(); + inputEdit.addEventListener("keyup", (event) => { + if (event.key === "Enter") { + label.textContent = inputEdit.value.trim(); + todosList = todosList.map((item) => { + if (item.id === todo.id) { + item.title = label.textContent; + item.id = label.textContent; + } + return item; + }); + console.log(todosList); + localStorage.setItem("mydayapp-js", JSON.stringify(todosList)); + todo.classList.remove("editing"); + todo.classList.add("pending"); + } else if (event.key === "Escape") { + label.textContent = label.textContent.trim(); + todo.classList.remove("editing"); + todo.classList.add("pending"); + } + }); + } +} + +function deleteItem(element) { + console.log(element); + const previousElementId = element.target.previousElementSibling.textContent; + console.log(previousElementId); + const todoIndex = todosList.findIndex((todo) => { + return todo.id === previousElementId; + }); + console.log(todoIndex); + todosList.splice(todoIndex, 1); + localStorage.setItem("mydayapp-js", JSON.stringify(todosList)); + updateTodos(todosList); + countTodos(todosList); +} + +function countTodos(items) { + let counterParagraph = footer.querySelector(".todo-count"); + const filtersContainer = document.getElementsByClassName("filters")[0]; + const strongTag = counterParagraph.getElementsByTagName("strong")[0]; + const length = items.length; + strongTag.textContent = length; + if (length > 1 || length === 0) { + counterParagraph.textContent = ""; + const spanText = document.createTextNode(" items left"); + counterParagraph.appendChild(strongTag); + counterParagraph.appendChild(spanText); + } else { + counterParagraph.textContent = ""; + const spanText = document.createTextNode(" item left"); + counterParagraph.appendChild(strongTag); + counterParagraph.appendChild(spanText); + } + let anchors = filtersContainer.querySelectorAll("a"); + anchors = [...anchors]; + const pendingTodos = items.filter((item) => item.completed === false).length; + const completedTodos = items.filter((item) => item.completed === true).length; + console.log(anchors, pendingTodos, completedTodos); - localStorage.setItem("todoList", listToString); + anchors.forEach((element) => { + if (element.getAttribute("href") === "#/pending") { + // let newStrongTag = document.createElement("strong"); + // newStrongTag.textContent = pendingTodos; + element.innerHTML = `${pendingTodos} Pending`; + } else if (element.getAttribute("href") === "#/completed") { + element.innerHTML = `${completedTodos} Completed`; + } + }); } From 9049af84871e93cb12d1946570251be2a7cc5570 Mon Sep 17 00:00:00 2001 From: Edwin Miguel Date: Fri, 18 Aug 2023 16:49:49 -0500 Subject: [PATCH 3/4] terminado filtrado de los Todos por estado --- src/index.js | 46 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 603ff22..8aab643 100644 --- a/src/index.js +++ b/src/index.js @@ -226,11 +226,53 @@ function countTodos(items) { anchors.forEach((element) => { if (element.getAttribute("href") === "#/pending") { - // let newStrongTag = document.createElement("strong"); - // newStrongTag.textContent = pendingTodos; element.innerHTML = `${pendingTodos} Pending`; } else if (element.getAttribute("href") === "#/completed") { element.innerHTML = `${completedTodos} Completed`; } }); } + +const deleteCompletedButton = document.getElementsByClassName("clear-completed")[0]; + +deleteCompletedButton.addEventListener("click", deleteCompletedTodos); + +function deleteCompletedTodos() { + const pendingTodos = todosList.filter((todo) => { + return todo.completed === false; + }); + todosList = pendingTodos; + console.log(todosList); + localStorage.setItem("mydayapp-js", JSON.stringify(todosList)); + updateTodos(todosList); + countTodos(todosList); +} + +const pendingLink = document.querySelector('li a[href="#/pending"]'); +const completedLink = document.querySelector('li a[href="#/completed"]'); +const allLink = document.querySelector('li a[href="#/"]'); + +// pendingLink.addEventListener("click", filterTodos); +// completedLink.addEventListener("click", filterTodos); +// allLink.addEventListener("click", filterTodos); + +window.addEventListener("hashchange", () => { + const route = location.hash; + filterTodos(route); +}); + +function filterTodos(filter) { + if (filter === "#/pending") { + const pendingTodos = todosList.filter((todo) => { + return todo.completed === false; + }); + updateTodos(pendingTodos); + } else if (filter === "#/completed") { + const completedTodos = todosList.filter((todo) => { + return todo.completed === true; + }); + updateTodos(completedTodos); + } else { + updateTodos(todosList); + } +} \ No newline at end of file From 49da0647f6797b62905f72f53feb01b0f8835632 Mon Sep 17 00:00:00 2001 From: Edwin Miguel Date: Sat, 19 Aug 2023 11:52:44 -0500 Subject: [PATCH 4/4] =?UTF-8?q?corregido=20para=20mostrar=20la=20secci?= =?UTF-8?q?=C3=B3n=20main=20y=20footer=20al=20crear=20el=20primer=20Todo.?= =?UTF-8?q?=20Tambi=C3=A9n=20quito=20los=20console.log?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.html | 4 ++-- src/index.js | 44 ++++++++++---------------------------------- 2 files changed, 12 insertions(+), 36 deletions(-) diff --git a/src/index.html b/src/index.html index f762db1..61c6c89 100644 --- a/src/index.html +++ b/src/index.html @@ -29,7 +29,7 @@

    My Day

    -
    +
      @@ -60,7 +60,7 @@

      My Day

    -