Estos ejercicios abordan los temas vistos en el cuatrimestre: el lenguaje JavaScript, arrays y objetos, el DOM y eventos. Para cada ejercicio, completar el archivo HTML con su archivo .js vinculado.

Cada carpeta contiene un ejercicio distinto, la idea es que ustedes creen todo el contenido que necesiten (archivos HTML, javascript y css).

Ejercicio 0: Uso de git

Seguir los pasos habituales para gestionar con git estos ejercicios:

Hacer un fork de este repositorio (noten que tiene 'marquez.juan' en la URL)
Clonar tu fork. (No debería figurar marquez.juan en la URL).
Crear una nueva rama con switch -c nombre-de-tu-rama
Hacer git push origin nombre-de-tu-rama
Desde gitea, crear el pull request, desde la rama recién creada de tu fork hacia la rama main del repositorio que pertenece a marquez.juan. De esta manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas más fácilmente.
Comenzar a resolver los ejercicios, en el archivo ejercicioX.js de cada subcarpeta.
Hacer al menos un commit por cada uno de los ejercicios que siguen.
Al finalizar cada sesión de trabajo, hacer git push origin nombre-de-tu-rama

Ejercicio 1: Saludo personalizado

Crear una página con un campo de texto y un botón. Al hacer clic en el botón, leer el valor del campo y mostrar en la página el mensaje "Hola, [nombre]!". Si el campo está vacío, mostrar en su lugar "Por favor, ingresá tu nombre.".

Ejercicio 2: Lista de tareas simple

Crear una página con un campo de texto y un botón "Agregar". Cada vez que se haga clic en el botón, agregar el texto del campo como un nuevo ítem en una lista <ul>. Después de agregar el ítem, limpiar el campo.

Si el campo está vacío al hacer clic, no agregar nada.

Ejercicio 3: Resaltador de ítems

Crear una lista con al menos seis ítems de cualquier contenido. Al hacer clic en un ítem, agregarle la clase "seleccionado". Al hacer clic de nuevo sobre el mismo ítem, quitarle la clase.

Usar delegación de eventos, incluyendo un solo listener en la lista, no uno por ítem.

Ejercicio 4: Contador con límite

Crear una página con tres elementos: un botón "Sumar", un botón "Restar" y un párrafo que muestre el valor actual del contador, empezando en 0.

Requisitos:

El contador no puede bajar de 0 ni subir de 10.
Cuando el contador llega a 10, el botón "Sumar" se deshabilita.
Cuando el contador llega a 0, el botón "Restar" se deshabilita.
Al volver a un valor intermedio, los botones se vuelven a habilitar.

Ejercicio 5: Filtro de lista en tiempo real

Dado un array de países (al menos diez), construir dinámicamente una lista en la página con todos ellos. Es decir: la lista de países no debe estar en el archivo html, sino como array en javascript, y a partir de este array se debe generar la lista.

Agregar un campo de texto arriba de la lista para búsqueda. A medida que el usuario escribe, mostrar solo los países cuyo nombre contenga el texto ingresado (sin distinguir mayúsculas de minúsculas). Si el campo está vacío, mostrar todos.

En ningún momento debemos modificar el array original, sino ir reconstruyendo la lista en el DOM con cada cambio del campo de búsqueda.

Ejercicio 6: Tabla dinámica

Dado el siguiente array de objetos:

const empleados = [
    { nombre: "Ana", sector: "Desarrollo", sueldo: 150000 },
    { nombre: "Luis", sector: "Diseño", sueldo: 120000 },
    { nombre: "Marta", sector: "Desarrollo", sueldo: 160000 },
    { nombre: "Carlos", sector: "RRHH", sueldo: 110000 },
    { nombre: "Julia", sector: "Diseño", sueldo: 130000 }
];

Construir dinámicamente una tabla HTML con una fila por empleado. Agregar una fila al final que muestre el sueldo promedio del total de empleados.

Ejercicio 7: Formulario con validación

Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo, validar:

Que ningún campo esté vacío.
Que la edad contenga números enteros entre 0 y 100.
Que la contraseña tenga al menos 8 caracteres.

Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido, ocultar los errores y mostrar un mensaje de éxito.

Ejercicio 8: Carrito de compras

Dado el siguiente array de productos:

const productos = [
    { nombre: "Teclado", precio: 8500 },
    { nombre: "Mouse", precio: 4200 },
    { nombre: "Monitor", precio: 62000 },
    { nombre: "Auriculares", precio: 11000 },
    { nombre: "Webcam", precio: 15500 }
];

Construir dinámicamente una lista de productos en la página, donde cada ítem tenga un botón "Agregar al carrito". Al hacer clic, el producto se agrega a una sección "Carrito" visible en la página, junto con su precio. Al pie del carrito, mostrar el total actualizado.

Si el mismo producto se agrega más de una vez, no duplicarlo: incrementar su cantidad y actualizar el total.

Ejercicio 9: Quiz de opción múltiple

Crear un array de al menos cinco preguntas, cada una con la forma:

{
    pregunta: "¿Cuál es la capital de Francia?",
    opciones: ["Madrid", "París", "Roma", "Berlín"],
    correcta: 1  // índice de la opción correcta
}

Mostrar una pregunta por vez, con sus opciones como botones. Al seleccionar una opción:

Indicar visualmente si fue correcta o incorrecta.
Mostrar un botón "Siguiente" para pasar a la próxima pregunta.

Al finalizar todas las preguntas, mostrar el puntaje total (X de Y correctas) y un botón para reiniciar el quiz desde cero.

Sobre la corrección y calificación: El pedido de que hagan push de lo que van avanzando clase a clase tiene como objetivo ir registrando la actividad de cada estudiante. En ese contexto importante que comprendan lo siguiente:

El docente no va a corregir ni calificar todos los ejercicios.
El docente sí va a revisar y responder todas las preguntas que se hagan acerca del código publicado en gitea.
Si alguien hace push de un código que contiene errores, esto no impactará negativamente en su calificación. Es normal equivocarse, y forma parte del aprendizaje.
Al finalizar el cuatrimestre:
- La calificación de lo relacionado con javascript será evaluada en el examen parcial (y el recuperatorio, si hiciera falta).
- La calificación de lo relacionado con git, será evaluada considerando el uso de git durante el cuatrimestre: no importa si cada commit contiene código correcto o incorrecto, lo que importa es que cada estudiante haya dejado registro de su progreso clase a clase.
- No es necesario tener completo el 100% de la ejercitación, el porcentaje debe rondar el mismo que se solicita para la asistencia (75%).