2 changed files with 99 additions and 5 deletions
--- a/clase-9.js
+++ b/clase-9.js
@@ -1 +1,72 @@
 // Agregar acá el código javascript para los ejercicios
+const boton1 = document.querySelector("button");
+const parrafo1 = document.querySelector("p");
+var i = 0
+
+boton1.addEventListener("click", function () {
+    i = i + 1
+    parrafo1.textContent = `Este boton ha sido clickeado ${i} veces.`;
+});
+
+const campo = document.querySelector("input");
+const parrafo2 = document.querySelector("#contadorCaracteres");
+
+campo.addEventListener("input", (e) => {
+    parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres.`;
+});
+
+const lista = document.querySelector("ul");
+
+lista.addEventListener("click", (e) => {
+    if (e.target.tagName === "LI") {
+        const items = document.querySelectorAll("li")
+        for (const item of items) {
+            item.classList.remove("seleccionado");
+        }
+
+        e.target.classList.add("seleccionado");
+
+        console.log(e.target.textContent);
+    }
+});
+
+document.querySelector("#externo").addEventListener("click", () => {
+    console.log("externo");
+}, true);
+document.querySelector("#interno").addEventListener("click", () => {
+    console.log("interno");
+});
+document.querySelector("#boton").addEventListener("click", () => {
+    console.log("boton");
+});
+
+formulario.addEventListener("submit", function(e) {
+    e.preventDefault();
+
+    const nombre = document.querySelector("#nombre");
+    const mensaje = document.querySelector("#mensaje");
+    const errorNombre = document.querySelector("#errorNombre");
+    const errorMensaje = document.querySelector("#errorMensaje");
+    const resultado = document.querySelector("#resultado");
+
+    errorNombre.textContent = "";
+    errorMensaje.textContent = "";
+    resultado.textContent = "";
+
+    let hayErrores = false;
+
+    if (nombre.value.trim() === "") {
+        errorNombre.textContent = "El nombre no puede estar vacío";
+        hayErrores = true;
+    }
+
+    if (mensaje.value.trim() === "") {
+        errorMensaje.textContent = "El mensaje no puede estar vacío";
+        hayErrores = true;
+    }
+
+    if (!hayErrores) {
+        resultado.textContent = "Formulario enviado correctamente";
+        formulario.reset();
+    }
+});
--- a/index.html
+++ b/index.html
@@ -9,23 +9,46 @@
    <body>
        <h1>Clase 9 - Eventos</h1>
        <div id="ejercicio-1">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+            <button>Haz click</button><!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+            <p>Este boton ha sido clickeado 0 veces.</p>
        </div>
        <hr>
        <div id="ejercicio-2">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+            <input><!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+            <p id="contadorCaracteres">El campo de texto tiene 0 caracteres.</p>
        </div>
        <hr>
        <div id="ejercicio-3">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+            <ul>
+                <li>item 1</li>
+                <li>item 2</li>
+                <li>item 3</li>
+                <li>item 4</li>
+                <li>item 5</li>
+            </ul><!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
        </div>
        <hr>
        <div id="ejercicio-4">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+            <div id="externo">
+                <div id="interno">
+                    <button id="boton">Click</button>
+                </div>
+            </div><!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
        </div>
        <hr>
        <div id="ejercicio-5">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+            <form id="formulario">
+                <div>
+                    <label for="nombre">Nombre:</label> <input type="text" id="nombre">
+                    <p id="errorNombre"></p>
+                    <label for="edad">Edad:</label> <input type="number" id="edad" min="1" max="119" required>
+                    <p id="errorEdad"></p>
+                    <label for="mensaje">Mensaje:</label> <textarea id="mensaje"></textarea>
+                    <p id="errorMensaje"></p>
+                </div>
+                <button type="submit">Enviar</button>
+                <p id="resultado"></p>
+            </form><!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
        </div>
        <script src="clase-9.js"></script>
    </body>