# Ejercicios de repaso del primer cuatrimestre

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](https://gitea.juansemarquez.com/marquez.juan/clase-10-ejercicios-de-repaso)
(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:

```js
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:

```js
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:

```js
{
    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%).