¡Cómo crear una lista de tareas (To-Do List) sencilla usando JavaScript!📓✅

3468

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. 📝

functionagregarTarea(){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. 🔍

functionmostrarTareas(){
	console.log("Listas de tareas:"); //Se imprime este mensaje primerofor(let i = 0; i < listaTareas.length; i++){ //Utilizamos un for para recorrer el array por completoconsole.log(i + 1 + ". " + listaTareas[i]); //Se imprime tarea por tarea
	}
}

4️⃣ Creamos la función para borrar una tarea de la lista. 🗑️

functionborrarTarea(){
	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 indicadaconsole.log("Tarea eliminada");
	console.log(listaTareas); //Imprimimos la lista final
}

5️⃣ Creamos la función principal que ejecuta el programa. 🔁

functionprincipal(){
	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 almacenaswitch (opcion) { //Se compara la opción elegida con cada uno de los casos para determinar cuál de los métodos se ejecutacase1:
				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! 💚

hace un año