La mejor manera de aprender algo es haciendo. En esta guia, construiremos de lista de tareas usando JavaScript Vanilla. Si eres un principiante y estás cansado de estudiar con aburridos tutoriales teóricos, entonces estás en el lugar correcto construiremos esta lista To-Do desde cero. No te preocupes, te he explicado todos y cada uno de los pasos para desarrollar nuestra aplicación de tareas.
En esta lista to-do, podremos añadir nuevas tareas por hacer, eliminar tareas, marcar tareas después de su finalización, tendremos un menú desplegable para filtrar nuestras tareas en base a tareas completadas o incompletas.
Tendremos que crear tres archivos:
HTML
Como este tutorial se centra principalmente en la enseñanza de los conceptos de JavaScript, asumo que debes estar familiarizado con la sintaxis HTML y entender fácilmente el código anterior, pero aún así discutiremos brevemente sobre lo que está sucediendo en este archivo html.
En la etiqueta body de nuestro archivo tendremos tres secciones principales: 1. El encabezado 2. Formulario 3.Contenedor de tareas y al final tendremos un enlacaremos nuestro archivo JavaScript.
La sección de encabezado,contendra el título de nuestra aplicación.
En la sección de formulario, tenemos un elemento de entrada para introducir una nueva tarea, un botón para mostrar esa tarea abajo, un desplegable que filtra nuestras tareas en base a tareas completadas o incompletas.
En la sección de contenedores de tareas tenemos todas nuestras tareas que se añaden a nuestra página dinámicamente cuando el usuario añade una tarea a través de JavaScript.
Estilos
Este son mi estilos CSS para la app de lista to-do que puedes entender fácilmente con sólo leer una vez, ya que también he añadido comentarios que especifican el código. También puedes crear tu propio estilo. Y por favor envía el enlace de tu estilo en la sección de comentarios. Me encantaría ver todo tu estilo creativo.
JavaScript
Aquí viene la parte emocionante para la cual seguramente esteis leyendo esto . El archivo JavaScript es el responsable de toda la funcionalidad de nuestra aplicación.
Almacenara elementos en constantes
Primero almacenemos los elementos de html que usaremos en diferentes funcionalidades.
//selectors
const todoInput = document.querySelector('.todo_input');
const todoButton = document.querySelector('.todo_boton');
const todoList = document.querySelector('.todo_list');
const filterOption = document.querySelector('.filter_todo');
Aquí, con la ayuda del método document.querySelector() almacenaremos elementos html con clase específica a sus respectivas constantes. Ahora las constantes todoInput, todoButton, todoList, filterOption contienen elementos html.
2. Añadiendo Event Listeners a los elementos
Ahora añadiremos oyentes de eventos de clic en nuestros botones y filtro desplegable.
//event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);
El método addEventListener() adjunta un manejador de eventos al elemento especificado. Ahora, cuando hagamos clic en el botón '+' del elemento en nuestra entrada, se ejecutará la función addTodo. Cuando hagamos clic en cualquier tarea que se agregue en el contenedor de tareas de nuestra aplicación, se ejecutará la función deleteCheck. Cuando hagamos clic en el elemento seleccionado (desplegable) de nuestra aplicación, se ejecutará la función filterTodo.
3. Añadir una tarea con el botón de marcar y el botón de borrar
//funciones
function addTodo(event) {
event.preventDefault();
//todo DIV
const todoDiv = document.createElement('div');
todoDiv.classList.add('todo');
//todo LI
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo_item');
todoDiv.appendChild(newTodo);
if (todoInput.value === "") {
return null
}
//check mark BUTTON
const completedButton = document.createElement('button');
completedButton.innerHTML = '';
completedButton.classList.add('complete_btn');
todoDiv.appendChild(completedButton);
//BOTON DE ELIMINAR BUTTON
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '';
deleteButton.classList.add('delete_btn');
todoDiv.appendChild(deleteButton);
//AÑADIR A LISTA ACTUAL
todoList.appendChild(todoDiv);
//LIMPIAR EL INPUT
todoInput.value = "";
}
Esta función addTodo se ejecutará cuando se haga clic en el botón de añadir en la entrada. Esta función se encarga de añadir una tarea, añadir un botón de comprobación y añadir un botón de borrado.
En primer lugar, llamamos al método event.preventDefault() que cancela el evento si es cancelable. En nuestro caso como nuestro botón de añadir es de tipo submit, cuando hacemos clic en esto nuestra página se somete y se refresca y eso es algo que no queremos en nuestra aplicación que es donde entra en juego el método event.preventDefault() que impide que envíe el formulario.
Entonces con la ayuda del método document.createElement() estamos creando un elemento html <div> que contendrá la tarea, el botón de comprobación y borrado. A continuación estamos creando el html <li> que es nuestra tarea actual que obtenemos de todoInput.value que sólo toma cualquier tipo de usuario en el campo de entrada y lo almacena en este elemento <li>. De la misma manera estamos creando los botones de chequeo y borrado. Por fin estamos comprobando si nuestro campo de entrada no está vacío, lo que significa que hay alguna tarea escrita allí y si es así, añadimos nuestro <li> (lista) y ambos botones en el elemento <div> que acabamos de crear.
Borrar y comprobar la tarea en consecuencia.
function deleteCheck(e) {
const item = e.target;
//ELIMINAR ITEM
if (item.classList[0] === "delete_btn") {
const todo = item.parentElement;
//TRANSICION ANIMACION
todo.classList.add("fall");
todo.addEventListener('transitionend', function () {
todo.remove();
})
}
//ITEM COMPLETADO
if (item.classList[0] === "complete_btn") {
const todo = item.parentElement;
todo.classList.toggle("completedItem")
}
}
Como hemos añadido un escuchador de eventos en nuestra lista de todoList <div>, siempre que hagamos clic en el botón de comprobación o eliminación esta función se ejecutará. Sin embargo, al hacer clic en la tarea misma en el <div> también se ejecutará esta función pero como estamos manejando la situación cuando se hace clic en cualquiera de los botones así que hacer clic en la tarea no hará nada.
En esta función estamos obteniendo el elemento objetivo usando e.target. Entonces estamos comprobando si el elemento objetivo es el botón de borrar o el botón de comprobación. Si es el botón de borrado(delete_btn) entonces simplemente estamos obteniendo su elemento padre con la propiedad .parentElement y borrándolo con la ayuda del método .remove() después de que se complete la transición que se añade añadiendo la clase 'fall' al conjunto <div>. Si hacemos clic en el botón de verificación (complete_btn) entonces estamos simplemente cambiando una clase al elemento padre que es <div> en sí mismo que aplicará algún estilo a la tarea para confirmar que esta tarea se ha completado.
5. Filtrar las tareas según la opción seleccionada
//FILTRAR LAS TAREAS CONFOREE LAS OPCIONES //
function filterTodo(e) {
const todos = todoList.childNodes;
for(let i = 1; i < todos.length; i++ ){
switch (e.target.value) {
case "all":
todos[i].style.display = "flex";
break;
case "completed":
if (todos[i].classList.contains('completedItem')) {
todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}
break;
case "uncompleted":
if (!todos[i].classList.contains('completedItem')) {
todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}
break;
}
}
}
Cuando hacemos clic en una de las opciones del menú desplegable entonces esta función de filtro Todo se ejecutará. Esta función se encarga de filtrar las tareas en base a todas las tareas, completadas y no completadas. En constante todos estamos almacenando todas las tareas de todos. Luego usando por bucle estamos iterando sobre ellas. En el bucle estamos comprobando qué opción se ha pulsado desde el desplegable y filtrando los elementos implementando el estilo de visualización en el todos.
Por ejemplo:- Si has hecho clic en la opción "Completado" del menú desplegable, entonces comprobará que todos tienen clase de elemento_completado y le añadirá un estilo de flexión, de lo contrario le añadirá un estilo de no mostrar ninguno.
todos[i].style.display = "flex"; } else { todos[i].style.display = "none"; }
