diff --git a/ListaDeTarea/index.html b/ListaDeTarea/index.html new file mode 100644 index 0000000..c5431ea --- /dev/null +++ b/ListaDeTarea/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + Lista De Tareas + + + Lista De Tareas + + +
+
+
Viernes 1 De Noviembre
+

Hola, Matias Achucarro

+ Vamos a cumplir tus metas +
+ +
+ + +
+
+

Tareas Pendientes

+ +
+
+ + + diff --git a/ListaDeTarea/script.js b/ListaDeTarea/script.js new file mode 100644 index 0000000..212653e --- /dev/null +++ b/ListaDeTarea/script.js @@ -0,0 +1,117 @@ +const fecha = document.querySelector("#fecha"); +const lista = document.querySelector("#lista"); +const input = document.querySelector("#input"); +const enter = document.querySelector("#enter"); +const check = "fa-circle-check"; +const uncheck = "fa-circle"; +const lineThrough = "line-through"; +let id; +let LIST; + +//Fecha +const FECHA = new Date(); +fecha.innerHTML = FECHA.toLocaleDateString("es-AR", { + weekday: "long", + month: "long", + day: "numeric", + hour: "numeric", + minute: "numeric", +}); + +//FUNCION AGREGAR TAREA + +const agregarTarea = (tarea, id, realizado, eliminado) => { + if (eliminado) { + return; + } + + const REALIZADO = realizado ? check : uncheck; + const LINE = realizado ? lineThrough : ""; + const elemento = `
  • + +

    ${tarea}

    + +
    • `; + lista.insertAdjacentHTML("beforeend", elemento); +}; + +//Fucion de tarea Realizada +const tareRealizada = (element) => { + element.classList.toggle(check); + element.classList.toggle(uncheck); + element.parentNode.querySelector(".text").classList.toggle(lineThrough); + console.log(LIST); + LIST[element.id].realizado = LIST[element.id].realizado ? false : true; + console.log(LIST[element.id]); + console.log(LIST[element.id].realizado); +}; + +//funcion de tarea eliminar + +const tareaEliminada = (element) => { + element.parentNode.parentNode.removeChild(element.parentNode); + LIST[element.id].eliminado = true; +}; + +enter.addEventListener("click", () => { + const tarea = input.value; + if (tarea) { + agregarTarea(tarea, id, false, false); + LIST.push({ + nombre: tarea, + id: id, + realizado: false, + eliminado: false, + }); + } + localStorage.setItem("TODO", JSON.stringify(LIST)); + input.value = ""; + id++; +}); + +document.addEventListener("keyup", (event) => { + if (event.key == "Enter") { + const tarea = input.value; + if (tarea) { + agregarTarea(tarea, id, false, false); + LIST.push({ + nombre: tarea, + id: id, + realizado: false, + eliminado: false, + }); + } + localStorage.setItem("TODO", JSON.stringify(LIST)); + input.value = ""; + id++; + } +}); + +lista.addEventListener("click", (event) => { + const element = event.target; + const elementData = element.attributes.data.value; + + if (elementData === "realizado") { + tareRealizada(element); + } else if (elementData === "eliminado") { + tareaEliminada(element); + } + localStorage.setItem("TODO", JSON.stringify(LIST)); +}); + +//local Storage get item + +let data = localStorage.getItem("TODO"); +if (data) { + LIST = JSON.parse(data); + id = LIST.length; + cargarLista(LIST); +} else { + LIST = []; + id = 0; +} +function cargarLista(DATA) { + DATA.forEach(function (i) { + agregarTarea(i.nombre, i.id, i.realizado, i.eliminado); + }); +} diff --git a/ListaDeTarea/style.css b/ListaDeTarea/style.css new file mode 100644 index 0000000..81cfbe1 --- /dev/null +++ b/ListaDeTarea/style.css @@ -0,0 +1,123 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html { + height: 100vh; + overflow: hidden; +} + +:root { + --white: #fafafb; + --purple: #9a67ea; + --blue--light: #04d4c3; + --blue-dark: #2a73c2; + --green: #2c7b90; + --black: black; +} +body { + background: linear-gradient(to bottom, var(--green), var(--blue--light)); + height: 100%; + font-family: "Prompt", sans-serif; +} + +.container { + max-width: 80%; + width: 400px; + height: 600px; + margin: 0 auto; + margin-top: 50px; + width: 30%; + min-width: 320px; + background-image: linear-gradient(to bottom, var(--purple), var(--green)); + border-radius: 1rem; + padding: 2rem; + color: white; + box-shadow: 2px 2px 3px black; + overflow-y: auto; +} +/*Presentacion*/ + +.Presentacion h1 { + color: var(--white); +} + +.Presentacion span { + color: var(--white); + letter-spacing: 1px; +} + +#fecha { + color: var(--white); + padding: 50px 0 5px 0; +} + +/*AGREGAR TAREAS*/ + +.agregar-tarea { + background-color: var(--white); + border-radius: 15px; + height: 70px; + display: flex; + align-items: center; + padding: 10px; + gap: 70px; + margin: 40px 0; +} + +.agregar-tarea input { + width: 100%; + height: 100%; + border-radius: 8px; + border: none; + background-color: var(--white); +} +.agregar-tarea i { + font-size: 50px; + color: var(--green); +} + +.agregar-tarea i:hover { + transform: scale(1.1); + cursor: pointer; +} +.agregar-tarea input::placeholder { + font-size: 1.1rem; + color: var(--blue-dark); +} + +/*SECCION TAREA*/ + +.seccion-tarea h3 { + color: var(--white); + margin-bottom: 20px; +} + +.seccion-tarea li { + display: flex; + background: linear-gradient(to bottom, var(--purple), var(--blue--light)); + border-radius: 50px; + padding: 10px; + align-items: center; + justify-content: space-between; + margin: 5px 0; + color: var(--white); +} + +.seccion-tarea i { + font-size: 25px; +} +.seccion-tarea i:hover { + color: var(--blue--light); + cursor: pointer; +} + +.seccion-tarea > ul p { + font-size: 1.2rem; +} + +.line-through { + text-decoration: line-through; + color: var(--blue--light); +}