agosto 14, 2022

Cómo crear una aplicación de lista de tareas básicas usando JavaScript

El Document Object Model (DOM) es la representación de datos de los objetos que componen la estructura y el contenido de una página web. Puede acceder a todos los elementos DOM en el sitio web y crearlos, leerlos, actualizarlos y eliminarlos dinámicamente (CRUD) utilizando JavaScript.

Este artículo explicará cómo realizar operaciones CRUD en una lista de tareas pendientes utilizando JavaScript y manipulación DOM. Esperamos que conozca los conceptos básicos de HTML y JavaScript antes de leer este artículo.

Comprender la manipulación básica del DOM

Tomemos un ejemplo simple:

<button id=”submit”>Submit</button>
<script>
const submitButton = document.getElementById(“submit”);
submitButton.addEventListener(“click”, ()=>{
alert(“The form has been submitted”);
});
</script>

los botón de enviar variable tiene acceso al botón HTML en el código anterior. Tienes que agregar el hacer clic detector de eventos en el botón (obteniendo el elemento de su id de Suscribir). Cuando se hace clic en el botón, se activa el evento y la ventana muestra una ventana emergente con el texto: «El formulario ha sido enviado».

Ahora que hemos cubierto la idea básica de la manipulación DOM, sigamos adelante y profundicemos en la creación de la aplicación de tareas pendientes.

Construya el diseño usando HTML y TailwindCSS

Echemos un vistazo al diseño HTML de este proyecto. Los botones y elementos de entrada tienen sus respectivos ID para obtener acceso a estos elementos en el archivo JavaScript.

Para el diseño de frontend, este artículo utiliza TailwindCSS, un marco CSS de utilidad. Puede utilizar TailwindCSS en su proyecto importando el archivo CSS de la CDN.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />

Relacionado: Tailwind CSS vs Bootstrap: ¿Cuál es un mejor marco?

Código:

<div class="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans mt-20">
<div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
<div class="mb-4">
<h1 class="text-3xl md:text-4xl text-indigo-600 font-medium mb-2">
To-Do List App
</h1>
<div class="flex mt-4">
<input class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" name="text" id="text" placeholder="Add Todo" />
<input type="hidden" id="saveIndex" />
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded text-white bg-indigo-600 transition-colors duration-300 mt-1 md:mt-0 md:ml-1" id="add-task-btn">Add</button>
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded bg-indigo-600 text-white transition-colors duration-300 mt-1 md:mt-0 md:ml-1" style="display: none" id="save-todo-btn">Edit Todo</button>
</div>
</div>
<div id="listBox"></div>
</div>
</div>

Así es como se comporta nuestra aplicación después del diseño:

lista de tareas pendientes en curso

Añadiendo funcionalidad con Javascript:

El primer paso es obtener acceso a los elementos a través de sus ID utilizando el método getElementById ().

const text = document.getElementById("text");
const addTaskButton = document.getElementById("add-task-btn");
const saveTaskButton = document.getElementById("save-todo-btn");
const listBox = document.getElementById("listBox");
const saveInd = document.getElementById("saveIndex");

Necesitamos una matriz para almacenar todas las tareas pendientes. Entonces, necesitamos inicializar uno.

let todoArray = [];

Agregar elementos a la lista de tareas pendientes

Para agregar una tarea a la matriz, debe moverla hacia arriba todoArray y luego mostrarlo en la página web. Para que esto suceda, se debe activar un evento haciendo clic en el botón Agregar.

addTaskButton.addEventListener("click", (e) => {
e.preventDefault();
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
todoArray.push(text.value);
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});

Tienes que memorizar el todoArray al memoria local en cada cambio (es decir, cada vez que se agrega, actualiza o elimina una actividad).

En el código anterior, debe recuperar la matriz de memoria local; si no hay una matriz, creamos una vacía. Luego, enviamos la actividad recién agregada a todoArray y almacenar toda la matriz de nuevo en memoria local.

Ver cambios en la lista de tareas pendientes

Después de sumar el valor a todoArray, debe verlo en la página web. Esto se hace usando .innerHTML atributo.

Ponemos el HTML para la lista de tareas dentro de una variable nombrada código HTML. A continuación, repasemos todoArray y agregue cada elemento a la código HTML variable.

Una vez que haya terminado de desplazarse por todos los elementos, debe asignar el código HTML completo al cuadro de lista elemento usando el .innerHTML atributo.

Luego, después de insertar el nuevo elemento de la lista de tareas pendientes en la matriz, llamamos al displayTodo () función que gestiona todo como se describe:

function displayTodo() {
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
let htmlCode = "";
todoArray.forEach((list, ind) => {
htmlCode += `<div class='flex mb-4 items-center'>
<p class='w-full text-grey-darkest'>${list}</p>
<button onclick='edit(${ind})' class='flex-no-shrink p-2 ml-4 mr-2 border-2 rounded text-white text-grey bg-green-600'>Edit</button>
<button onclick='deleteTodo(${ind})' class='flex-no-shrink p-2 ml-2 border-2 rounded text-white bg-red-500'>Delete</button>
</div>`;
});
listBox.innerHTML = htmlCode;
}

Debe agregar dos botones, actualizar y eliminar, para cada elemento a medida que agrega elementos de tareas pendientes a la variable código HTML.

Eliminar elementos de la lista de tareas pendientes

El botón Eliminar tiene un método de atributo al hacer clic () que pasa el índice de tareas pendientes como parámetro. Al hacer clic en el botón Eliminar, el deleteTodo () se ejecutará el método.

En este método, debe aplicar el unión() método de matriz en el todoArray. los unión() El método ayuda a eliminar el elemento en el índice especificado. Después de eliminar el elemento, debe almacenar sus cambios en el memoria local y llama al displayTodo () función para reflejar los cambios en la página web.

function deleteTodo(ind) {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
todoArray.splice(ind, 1);
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
}

para hacer los elementos de la lista

agregar a la lista de tareas pendientes

Actualizar elementos de la lista de tareas pendientes

Cada elemento de la lista de tareas tiene un botón de edición, al igual que el botón de eliminar. El botón editar tiene un método de atributo al hacer clic (). Al hacer clic en el botón, se ejecuta el método de edición y se pasa el índice como parámetro.

Hay dos elementos HTML cuyas propiedades de visualización se establecen en nadie:

  1. Elemento de entrada con id guardar índice

  2. Botón con id guardar-tarea-btn

Tan pronto como haga clic en el botón editar, la entrada tendrá el valor de texto con el que desea actualizar. los saveTaskButton se mostrará en lugar de addTaskButton.

El código HTML consta de un elemento de entrada con id guardar índice. Debe establecer su propiedad de estilo de visualización predeterminada como nadie. Cuando se llama al método de edición, establece el atributo de valor de este elemento en el id, para que pueda hacer referencia a él más adelante cuando guarde la actividad actualizada.

function edit(ind) {
saveInd.value = ind;
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
text.value = todoArray[ind];
addTaskButton.style.display = "none";
saveTaskButton.style.display = "block";
}

lista de tareas pendientes agregando elementos

Una vez que haya terminado de editar el texto, haga clic en saveTaskButton. Al hacer clic en el botón, se recupera la identificación de texto usando el botón saveInd Entrada. Después de recuperar la identificación, puede actualizar la todoArray a ese índice y empuje los cambios a memoria local. Finalmente, llamamos al displayTodo () función para reflejar los cambios en la página web.

saveTaskButton.addEventListener("click", () => {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
let id = saveInd.value;
todoArray[id] = text.value;
addTaskButton.style.display = "block";
saveTaskButton.style.display = "none";
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});

lista de tareas pendientes en curso

Seleccione un elemento de su lista de tareas pendientes

Ahora que ha completado la aplicación básica de la lista de tareas pendientes, ¡es hora de que empiece a crear proyectos más interesantes por su cuenta!

Puede crear un juego o una aplicación web que pueda utilizar para su uso personal. La creación de proyectos lo ayudará a desarrollar sus habilidades y a obtener una buena comprensión de JavaScript. Siga aprendiendo y construyendo proyectos increíbles tanto como sea posible.

¿Quieres crear otro proyecto de JavaScript? Aquí hay una aplicación web de calculadora simple que puede crear con HTML, CSS y JavaScript.


hombre con calculadora

Cómo construir una calculadora simple usando HTML, CSS y JavaScript

El código simple y calculado es el camino a seguir al programar. Descubra cómo crear su propia calculadora en HTML, CSS y JS.

Leer siguiente


Sobre el Autor

Deja una respuesta

Tu dirección de correo electrónico no será publicada.