Curso Práctico de JavaScript

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

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

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados