Subir archivos a "/"

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
+#

README.md

@@ -1,49 +1,49 @@
-0. Seguir los pasos habituales para gestionar con git estos ejercicios:
+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)
+  - 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).
+  - Clonar **tu fork**. (No debería figurar `marquez.juan` en la URL).
-  - Crear una nueva rama con `switch -c nombre-de-tu-rama`
+  - Crear una nueva rama con `switch -c nombre-de-tu-rama`
-  - Hacer `git push origin 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
+  - 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
+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
+manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas
-más fácilmente.
+más fácilmente.
-  - Comenzar a resolver los ejercicios, en el archivo `ejercicios.js`.
+  - Comenzar a resolver los ejercicios, en el archivo `ejercicios.js`.
-  - Hacer al menos un commit por cada uno de los ejercicios que siguen.
+  - Hacer al menos un commit por cada uno de los ejercicios que siguen.
-  - Al finalizar cada sesión de trabajo, hacer `git push origin
+  - Al finalizar cada sesión de trabajo, hacer `git push origin
-    nombre-de-tu-rama`
+    nombre-de-tu-rama`
-1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0
+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
+   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
+   cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de
-   veces que se hizo clic.
+   veces que se hizo clic.
-2. Agregar un campo de texto a la página. A medida que el usuario escribe,
+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.
+   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
+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
+   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
+   la quite a los demás (es decir, solo un ítem puede estar seleccionado a la
-   vez).
+   vez).
-4. Agregar a la página los siguientes elementos:
+4. Agregar a la página los siguientes elementos:
-   ```html
+   ```html
-   <div id="externo">
+   <div id="externo">
-       <div id="interno">
+       <div id="interno">
-           <button>Click</button>
+           <button>Click</button>
-       </div>
+       </div>
-   </div>
+   </div>
-   ```
+   ```
-   Registrar listeners de bubbling en los tres elementos y verificar en consola
+   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
+   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.
+   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
+5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al
-   enviarlo:
+   enviarlo:
-
+
-   - Verificar que ningún campo esté vacío.
+   - Verificar que ningún campo esté vacío.
-   - Verificar que la edad sea un número entero positivo, menor que 120.
+   - 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 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.
+   - 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
+   Para limpiar un campo se puede asignar un string vacío a su propiedad
-   `value`:
+   `value`:
-
+
-   ```js
+   ```js
-   document.querySelector("#nombre").value = "";
+   document.querySelector("#nombre").value = "";
-   ```
+   ```

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
+
+<div id="externo">
+    <div id="interno">
+        <button>Click</button>
+    </div>
+</div>
+
+//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);
+});

estilo.css

@@ -1,5 +1,5 @@
-div {
+div {
-    background-color: #DAE889;
+    background-color: #DAE889;
-    padding: 10px;
+    padding: 10px;
-    margin: 10px;
+    margin: 10px;
-}
+}

index.html

@@ -1,32 +1,32 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html>
+<html>
-    <head>
+    <head>
-        <meta charset="utf-8">
+        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width">
-        <title>Clase 9 - Eventos</title>
+        <title>Clase 9 - Eventos</title>
-        <link rel="stylesheet" href="estilo.css">
+        <link rel="stylesheet" href="estilo.css">
-    </head>
+    </head>
-    <body>
+    <body>
-        <h1>Clase 9 - Eventos</h1>
+        <h1>Clase 9 - Eventos</h1>
-        <div id="ejercicio-1">
+        <div id="ejercicio-1">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
-        </div>
+        </div>
-        <hr>
+        <hr>
-        <div id="ejercicio-2">
+        <div id="ejercicio-2">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
-        </div>
+        </div>
-        <hr>
+        <hr>
-        <div id="ejercicio-3">
+        <div id="ejercicio-3">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
-        </div>
+        </div>
-        <hr>
+        <hr>
-        <div id="ejercicio-4">
+        <div id="ejercicio-4">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
-        </div>
+        </div>
-        <hr>
+        <hr>
-        <div id="ejercicio-5">
+        <div id="ejercicio-5">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
-        </div>
+        </div>
-        <script src="clase-9.js"></script>
+        <script src="clase-9.js"></script>
-    </body>
+    </body>
-</html>
+</html>