From 65aabe218623fc658df57f8abb0e77aabaec4208 Mon Sep 17 00:00:00 2001
From: "durso.bruno" <42178793@terciariourquiza.edu.ar>
Date: Fri, 22 May 2026 00:41:58 +0000
Subject: [PATCH] Subir archivos a "/"
---
COMMIT_EDITMSG | 8 +++++
README.md | 98 +++++++++++++++++++++++++-------------------------
clase-9.js | 78 +++++++++++++++++++++++++++++++++++++++-
estilo.css | 10 +++---
index.html | 64 ++++++++++++++++-----------------
5 files changed, 171 insertions(+), 87 deletions(-)
create mode 100644 COMMIT_EDITMSG
diff --git a/COMMIT_EDITMSG b/COMMIT_EDITMSG
new file mode 100644
index 0000000..33e5150
--- /dev/null
+++ b/COMMIT_EDITMSG
@@ -0,0 +1,8 @@
+
+# Please enter the commit message for your changes. Lines starting
+# with '#' will be ignored, and an empty message aborts the commit.
+#
+# On branch olquifo-eventos
+# Changes to be committed:
+# modified: clase-9.js
+#
diff --git a/README.md b/README.md
index 52f42ff..6850fc7 100644
--- a/README.md
+++ b/README.md
@@ -1,49 +1,49 @@
-0. 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 `ejercicios.js`.
- - 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`
-1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0
- veces`. Cada vez que se haga clic en el botón, el texto del párrafo debe
- cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de
- veces que se hizo clic.
-2. Agregar un campo de texto a la página. A medida que el usuario escribe,
- mostrar en tiempo real la cantidad de caracteres ingresados debajo del campo.
-3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al
- hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se
- la quite a los demás (es decir, solo un ítem puede estar seleccionado a la
- vez).
-4. Agregar a la página los siguientes elementos:
- ```html
-
-
-
-
-
- ```
- Registrar listeners de bubbling en los tres elementos y verificar en consola
- el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un
- listener de capturing en `#externo` y observar cómo cambia el orden.
-
-5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al
- enviarlo:
-
- - Verificar que ningún campo esté vacío.
- - Verificar que la edad sea un número entero positivo, menor que 120.
- - Si hay errores, mostrarlos en la página junto al campo correspondiente.
- - Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario.
-
- Para limpiar un campo se puede asignar un string vacío a su propiedad
- `value`:
-
- ```js
- document.querySelector("#nombre").value = "";
- ```
+0. 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 `ejercicios.js`.
+ - 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`
+1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0
+ veces`. Cada vez que se haga clic en el botón, el texto del párrafo debe
+ cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de
+ veces que se hizo clic.
+2. Agregar un campo de texto a la página. A medida que el usuario escribe,
+ mostrar en tiempo real la cantidad de caracteres ingresados debajo del campo.
+3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al
+ hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se
+ la quite a los demás (es decir, solo un ítem puede estar seleccionado a la
+ vez).
+4. Agregar a la página los siguientes elementos:
+ ```html
+
+
+
+
+
+ ```
+ Registrar listeners de bubbling en los tres elementos y verificar en consola
+ el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un
+ listener de capturing en `#externo` y observar cómo cambia el orden.
+
+5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al
+ enviarlo:
+
+ - Verificar que ningún campo esté vacío.
+ - Verificar que la edad sea un número entero positivo, menor que 120.
+ - Si hay errores, mostrarlos en la página junto al campo correspondiente.
+ - Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario.
+
+ Para limpiar un campo se puede asignar un string vacío a su propiedad
+ `value`:
+
+ ```js
+ document.querySelector("#nombre").value = "";
+ ```
diff --git a/clase-9.js b/clase-9.js
index 6df1007..1b605ae 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -1 +1,77 @@
-// Agregar acá el código javascript para los ejercicios
+
+//Ejercicio 1
+
+const boton = document.querySelector("button");
+
+boton.addEventListener("click", function () {
+ console.log("Botón clickeado 0 veces");
+});
+
+boton.addEventListener("click", (event) => {
+ console.log(event.target.textContent)("Botón clickeado N veces");
+});
+
+//Ejercicio 2
+
+const select = document.querySelector("select");
+select.addEventListener("change", (e) => {
+ console.log(e.target.value);
+});
+
+const checkbox = document.querySelector("input[type='checkbox']");
+checkbox.addEventListener("change", (e) => {
+ console.log(e.target.checked);
+});
+
+//Ejercicio 3
+
+document.addEventListener("keydown", (e) => {
+ console.log(e.key);
+});
+
+//Ejercicio 4
+
+
+
+
+
+
+
+//Ejercicio 5
+
+const input = document.querySelector("#nombre");
+console.log(input.value);
+
+const checkbox = document.querySelector("#acepto");
+console.log(checkbox.checked);
+
+const form = document.querySelector("form");
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+});
+
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const nombre = document.querySelector("#nombre").value;
+
+ if (nombre.trim() === "") {
+ console.log("El nombre no puede estar vacío");
+ return;
+ }
+
+ console.log("Formulario válido:", nombre);
+});
+
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const nombre = document.querySelector("#nombre").value;
+
+ if (nombre.trim() === "") {
+ console.log("El nombre no puede estar vacío");
+ return;
+ }
+
+ console.log("Formulario válido:", nombre);
+});
\ No newline at end of file
diff --git a/estilo.css b/estilo.css
index 19d93f8..81bf5a7 100644
--- a/estilo.css
+++ b/estilo.css
@@ -1,5 +1,5 @@
-div {
- background-color: #DAE889;
- padding: 10px;
- margin: 10px;
-}
+div {
+ background-color: #DAE889;
+ padding: 10px;
+ margin: 10px;
+}
diff --git a/index.html b/index.html
index 2a6b85f..3e8d9b8 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,32 @@
-
-
-
-
-
- Clase 9 - Eventos
-
-
-
-