Merge branch 'main' of https://github.com/MatiasAchucarro/ListaDeTarea

MatiasAchucarro · Aug 13, 2024 · 73d9492 · 73d9492
2 parents e238edd + cca166c
commit 73d9492
Show file tree

Hide file tree

Showing 3 changed files with 286 additions and 0 deletions.
diff --git a/ListaDeTarea/index.html b/ListaDeTarea/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@1,100&display=swap"
+      rel="stylesheet"
+    />
+    <title>Lista De Tareas</title>
+    <script
+      src="https://kit.fontawesome.com/c1572be89d.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="style.css" />
+    <title>Lista De Tareas</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="Presentacion">
+        <div id="fecha">Viernes 1 De Noviembre</div>
+        <h1>Hola, Matias Achucarro</h1>
+        <span>Vamos a cumplir tus metas</span>
+      </div>
+
+      <div class="agregar-tarea">
+        <input type="text" id="input" placeholder="Agregar una tarea" />
+        <i id="enter" class="fa-sharp fa-solid fa-plus"></i>
+      </div>
+      <div class="seccion-tarea">
+        <h3>Tareas Pendientes</h3>
+        <ul id="lista">
+          <!--  <li>
+            <i class="fa-sharp fa-regular fa-circle" data-="realizado"id="0"></i>
+            <p class="text " > ari re puta</p>
+            <i class="fa-sharp fa-solid fa-trash" data-="eliminado" id="0"></i>
+          </li> -->
+        </ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/ListaDeTarea/script.js 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 = ` <li id="elemento"> 
+                 <i class="fa-sharp fa-regular ${REALIZADO}" data="realizado"id="${id}"></i>  
+                  <p class="text ${LINE}" > ${tarea} </p> 
+                 <i class="fa-sharp fa-solid fa-trash" data="eliminado" id="${id}"></i>
+                    </li>`;
+  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
@@ -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);
+}