En este tutorial aprenderemos a crear una lista de tareas (To-Do List) sencilla usando JavaScript y todo desde la consola de nuestro navegador. 🧑🏼💻
1️⃣ Iniciamos declarando las variables a usar. 💡
listaTareas = []; //Array que va almacenar las tareas que creemos
2️⃣ Creamos la función que permite agregar tareas a la lista. 📝
function agregarTarea(){
let nuevaTarea = prompt("Ingrese una nueva tarea: "); //Variable que guarda la tarea que el usuario escriba
listaTareas.push(nuevaTarea); //Agregamos la tarea al array
console.log("Tarea agregada: " + nuevaTarea); //Imprimimos la confirmación de la tarea
}
3️⃣ Creamos la función que nos permite mostrar la lista de tareas. 🔍
function mostrarTareas(){
console.log("Listas de tareas:"); //Se imprime este mensaje primero
for(let i = 0; i < listaTareas.length; i++){ //Utilizamos un for para recorrer el array por completo
console.log(i + 1 + ". " + listaTareas[i]); //Se imprime tarea por tarea
}
}
4️⃣ Creamos la función para borrar una tarea de la lista. 🗑️
function borrarTarea(){
let indiceTarea = parseInt(prompt("Ingrese el número de la tarea que desea eliminar")); //Guardamos la tarea que vamos a borrar
listaTareas.splice(indiceTarea-1, 1); //Eliminamos la tarea indicada
console.log("Tarea eliminada");
console.log(listaTareas); //Imprimimos la lista final
}
5️⃣ Creamos la función principal que ejecuta el programa. 🔁
function principal(){
let opcion; //Variable que almacena la opción seleccionada del menú
do {
console.log("Seleccione una opción:"); //Se muestran las opciones del menú
console.log("1. Agregar tarea");
console.log("2. Mostrar tarea");
console.log("3. Borrar tarea");
console.log("0. Salir");
opcion = parseInt(prompt("Bienvenido al menú principal, por favor ingrese el número de la opción que desea ejecutar:")); //Se recibe la opción elegida y se almacena
switch (opcion) { //Se compara la opción elegida con cada uno de los casos para determinar cuál de los métodos se ejecuta
case1:
agregarTarea();
break;
case2:
mostrarTareas();
break;
case3:
borrarTarea();
break;
case0:
console.log("Saliendo del programa...");
break;
default:
console.log("Opción no válida. Por favor, elige de nuevo.");
break;
}
} while(opcion !== 0);
}
6️⃣ Finalmente iniciamos el programa. 🏁💥
principal(); //Inicia el programa
Conclusión 👏🥳
Este programa permite al usuario agregar tareas a una lista, borrar y mostrarlas por consola. En este tutorial se utilizan variables, funciones, condicionales, arreglos y ciclos de manera sencilla para poner en práctica lo aprendido. Puedes repasar los conceptos que necesites para reforzar los conceptos del curso. De igual forma, puedes llevar este código al siguiente nivel incluyendo validaciones, otros métodos, volverlo interactivo y visual usando HTML, etc.
¡Muchas gracias por la atención prestada y espero sea útil para ti! 💚
Curso Práctico de JavaScript