From 610d2530dd5b871511bc7db666707e48d55c1e63 Mon Sep 17 00:00:00 2001
From: Juanse Marquez <juanse@gcoop.coop>
Date: Sun, 24 May 2026 18:34:34 -0300
Subject: [PATCH] Agrega README con consignas y estructura de carpetas

---
 README.md                | 189 +++++++++++++++++++++++++++++++++++++++
 ejercicio1/ejercicio1.js |   1 +
 ejercicio1/estilo.css    |   2 +
 ejercicio1/index.html    |  14 +++
 ejercicio2/ejercicio2.js |   1 +
 ejercicio2/estilo.css    |   2 +
 ejercicio2/index.html    |  14 +++
 ejercicio3/ejercicio3.js |   1 +
 ejercicio3/estilo.css    |   2 +
 ejercicio3/index.html    |  14 +++
 ejercicio4/ejercicio4.js |   1 +
 ejercicio4/estilo.css    |   2 +
 ejercicio4/index.html    |  14 +++
 ejercicio5/ejercicio5.js |   1 +
 ejercicio5/estilo.css    |   2 +
 ejercicio5/index.html    |  14 +++
 ejercicio6/ejercicio6.js |   1 +
 ejercicio6/estilo.css    |   2 +
 ejercicio6/index.html    |  14 +++
 ejercicio7/ejercicio7.js |   1 +
 ejercicio7/estilo.css    |   2 +
 ejercicio7/index.html    |  14 +++
 ejercicio8/ejercicio8.js |   1 +
 ejercicio8/estilo.css    |   2 +
 ejercicio8/index.html    |  14 +++
 ejercicio9/ejercicio9.js |   1 +
 ejercicio9/estilo.css    |   2 +
 ejercicio9/index.html    |  14 +++
 28 files changed, 342 insertions(+)
 create mode 100644 README.md
 create mode 100644 ejercicio1/ejercicio1.js
 create mode 100644 ejercicio1/estilo.css
 create mode 100644 ejercicio1/index.html
 create mode 100644 ejercicio2/ejercicio2.js
 create mode 100644 ejercicio2/estilo.css
 create mode 100644 ejercicio2/index.html
 create mode 100644 ejercicio3/ejercicio3.js
 create mode 100644 ejercicio3/estilo.css
 create mode 100644 ejercicio3/index.html
 create mode 100644 ejercicio4/ejercicio4.js
 create mode 100644 ejercicio4/estilo.css
 create mode 100644 ejercicio4/index.html
 create mode 100644 ejercicio5/ejercicio5.js
 create mode 100644 ejercicio5/estilo.css
 create mode 100644 ejercicio5/index.html
 create mode 100644 ejercicio6/ejercicio6.js
 create mode 100644 ejercicio6/estilo.css
 create mode 100644 ejercicio6/index.html
 create mode 100644 ejercicio7/ejercicio7.js
 create mode 100644 ejercicio7/estilo.css
 create mode 100644 ejercicio7/index.html
 create mode 100644 ejercicio8/ejercicio8.js
 create mode 100644 ejercicio8/estilo.css
 create mode 100644 ejercicio8/index.html
 create mode 100644 ejercicio9/ejercicio9.js
 create mode 100644 ejercicio9/estilo.css
 create mode 100644 ejercicio9/index.html

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f0a6ade
--- /dev/null
+++ b/README.md
@@ -0,0 +1,189 @@
+# 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%).
diff --git a/ejercicio1/ejercicio1.js b/ejercicio1/ejercicio1.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio1/ejercicio1.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio1/estilo.css b/ejercicio1/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio1/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio1/index.html b/ejercicio1/index.html
new file mode 100644
index 0000000..0a5b7d1
--- /dev/null
+++ b/ejercicio1/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 1</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 1</h1>
+
+        <script src="ejercicio1.js"></script>
+    </body>
+</html>
diff --git a/ejercicio2/ejercicio2.js b/ejercicio2/ejercicio2.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio2/ejercicio2.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio2/estilo.css b/ejercicio2/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio2/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio2/index.html b/ejercicio2/index.html
new file mode 100644
index 0000000..a6d71cf
--- /dev/null
+++ b/ejercicio2/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 2</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 2</h1>
+
+        <script src="ejercicio2.js"></script>
+    </body>
+</html>
diff --git a/ejercicio3/ejercicio3.js b/ejercicio3/ejercicio3.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio3/ejercicio3.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio3/estilo.css b/ejercicio3/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio3/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio3/index.html b/ejercicio3/index.html
new file mode 100644
index 0000000..678d7ee
--- /dev/null
+++ b/ejercicio3/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 3</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 3</h1>
+
+        <script src="ejercicio3.js"></script>
+    </body>
+</html>
diff --git a/ejercicio4/ejercicio4.js b/ejercicio4/ejercicio4.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio4/ejercicio4.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio4/estilo.css b/ejercicio4/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio4/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio4/index.html b/ejercicio4/index.html
new file mode 100644
index 0000000..f7e70b1
--- /dev/null
+++ b/ejercicio4/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 4</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 4</h1>
+
+        <script src="ejercicio4.js"></script>
+    </body>
+</html>
diff --git a/ejercicio5/ejercicio5.js b/ejercicio5/ejercicio5.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio5/ejercicio5.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio5/estilo.css b/ejercicio5/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio5/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio5/index.html b/ejercicio5/index.html
new file mode 100644
index 0000000..51c5f8b
--- /dev/null
+++ b/ejercicio5/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 5</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 5</h1>
+
+        <script src="ejercicio5.js"></script>
+    </body>
+</html>
diff --git a/ejercicio6/ejercicio6.js b/ejercicio6/ejercicio6.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio6/ejercicio6.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio6/estilo.css b/ejercicio6/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio6/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio6/index.html b/ejercicio6/index.html
new file mode 100644
index 0000000..ea1f061
--- /dev/null
+++ b/ejercicio6/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 6</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 6</h1>
+
+        <script src="ejercicio6.js"></script>
+    </body>
+</html>
diff --git a/ejercicio7/ejercicio7.js b/ejercicio7/ejercicio7.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio7/ejercicio7.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio7/estilo.css b/ejercicio7/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio7/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio7/index.html b/ejercicio7/index.html
new file mode 100644
index 0000000..205939a
--- /dev/null
+++ b/ejercicio7/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 7</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 7</h1>
+
+        <script src="ejercicio7.js"></script>
+    </body>
+</html>
diff --git a/ejercicio8/ejercicio8.js b/ejercicio8/ejercicio8.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio8/ejercicio8.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio8/estilo.css b/ejercicio8/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio8/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio8/index.html b/ejercicio8/index.html
new file mode 100644
index 0000000..ec3d268
--- /dev/null
+++ b/ejercicio8/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 8</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 8</h1>
+
+        <script src="ejercicio8.js"></script>
+    </body>
+</html>
diff --git a/ejercicio9/ejercicio9.js b/ejercicio9/ejercicio9.js
new file mode 100644
index 0000000..6ce9e92
--- /dev/null
+++ b/ejercicio9/ejercicio9.js
@@ -0,0 +1 @@
+// Agregar aquí el código javascript
diff --git a/ejercicio9/estilo.css b/ejercicio9/estilo.css
new file mode 100644
index 0000000..159b7f6
--- /dev/null
+++ b/ejercicio9/estilo.css
@@ -0,0 +1,2 @@
+/* Agregar el código CSS necesario para el ejercicio */
+
diff --git a/ejercicio9/index.html b/ejercicio9/index.html
new file mode 100644
index 0000000..2d407da
--- /dev/null
+++ b/ejercicio9/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 9</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 9</h1>
+
+        <script src="ejercicio9.js"></script>
+    </body>
+</html>