2

El problema es que se agrega la nueva tarea a la lista si hago console log dentro del evento submit pero si lo hago console log por fuera del event listener no se actualiza y no se visualiza en el navegador. Ya estoy dando vueltas y no termino de entender si tiene que ver con el scope. Intente con otros metodos o cambiando de lugar algunos bloques, instanciando las funciones dentro de otras funciones, pero no tuve resultado. // Hola! El problema es que se agrega la nueva tarea a la lista si hago console log dentro del evento submit pero si lo hago console log por fuera del event listener no se actualiza y no se visualiza en el navegador. Ya estoy dando vueltas y no termino de entender si tiene que ver con el scope. Intente con otros metodos o cambiando de lugar algunos bloques, instanciando las funciones dentro de otras funciones, pero no tuve resultado.

HTML

<body>
    <form>
        <label>Tarea: <input type="text"></label>
        <button type="submit">Enviar</button>
      </label>
      <div class="tareas-pendientes"></div>
      <div class="tareas-terminadas"></div>
    </form>
    <script src="/scripts/todos.js"></script>
  </body>

JS

let tareasPendientes = document.querySelector(".tareas-pendientes");
let tareasTerminadas = document.querySelector(".tareas-terminadas");
let form = document.querySelector("form");
let nuevaTarea = document.querySelector("input");

let listadoTareas = [
  {
    description: "Mi hermosa tarea",
    createdAt: "19/04/20",
    terminada: false
  },
  {
    description: "Mi mas o menos tarea",
    createdAt: "09/02/20",
    terminada: false
  }
];
function renderizarTareas() {
  tareasPendientes.innerHTML = "";
  tareasTerminadas.innerHTML = "";
  for (let i = 0; i < listadoTareas.length; i++) {
    if (listadoTareas[i].terminada) {
      tareasTerminadas.innerHTML += `<li class="tarea">
          <div class="not-done"></div>
          <div class="descripcion">
              <p class="nombre">${listadoTareas[i].description}</p>
              <p class="timestamp">${listadoTareas[i].createdAt}</p>
          </div>
          </li>`;
    } else {
      tareasPendientes.innerHTML += `<li class="tarea">
          <div class="not-done"></div>
          <div class="descripcion">
              <p class="nombre">${listadoTareas[i].description}</p>
              <p class="timestamp">${listadoTareas[i].createdAt}</p>
          </div>
          </li>`;
    }
  }
}

function fechaDeHoy() {
  let today = new Date();
  const dateOptions = {
    day: "numeric",
    month: "numeric",
    year: "2-digit"
  };
  return today.toLocaleDateString("es-AR", dateOptions);
}

function crearTarea(descripcion) {
  let mitarea = {
    description: descripcion,
    ceatedAt: fechaDeHoy(),
    terminada: false
  };
  return mitarea;
}

form.addEventListener("submit", (event) => {
  if (nuevaTarea.value.length > 0) {
    listadoTareas.push(crearTarea(nuevaTarea.value));
  } else {
    event.preventDefault();
  }
});
console.log(listadoTareas);
renderizarTareas();

2 respuestas 2

2

Tienes que prevenir el default del submit en el formulario y cambiar un poco la función, que colocaste en el addEventListener

form.addEventListener("submit", (event) => {
  event.preventDefault();
  listadoTareas.push(crearTarea(nuevaTarea.value));
  renderizarTareas();
});
2

Para complementar la respuesta de Alexander.

Un formulario por defecto actualiza la página, los "To Do" que estás añadiendo al HTML lo estas añadiendo por JS, con lo cual cada vez que actualizas la página todos los cambios realizados se borran y el HTML vuelve a su estado inicial. Lo primero es prevenir que el formulario no actualice la página con event.preventDefault(), como comentó Alexander. Aunque en tu código lo estas haciendo, lo haces cuando el input está vacío nuevaTarea.value.length > 0 cuando en verdad debería ser siempre. Luego renderizarTareas(), solo la ejecutas una única vez, y debe ser ejecutada cada vez que se hace el submit de tu tarea.

Sí por otro lado quieres conservar siempre estos datos aunque actualices la página, puedes usar el localStorage o una base de datos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.