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();