Agrega ejercicio 5 de la clase 9

clase-9.js

@@ -1 +1,133 @@
 // Agregar acá el código javascript para los ejercicios
+
+//Ejercicio 1 de la clase 9
+
+let clicks = 0;
+const boton = document.querySelector("#botonEjc1");
+const parrafo = document.querySelector("#textoContador");
+
+boton.addEventListener("click", function(){
+    clicks++;
+    parrafo.textContent = `Botón clickeado ${clicks} veces`;
+});
+
+
+
+//Ejercicio 2 de la clase 9
+
+const campo = document.querySelector("#texto");
+const contadorCaracteres = document.querySelector("#cantidadCaracteres");
+
+campo.addEventListener("input", function() {
+    contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`;
+});
+
+
+
+//Ejercicio 3 de la clase 9"
+
+const lista = document.querySelector("#lista");
+lista.addEventListener("click", function(event) {
+    if (event.target.tagName === "LI") {
+        
+        const items = document.querySelectorAll("#lista li");
+
+        for (const item of items) {
+            item.classList.remove("seleccionado");
+        };
+
+        event.target.classList.add("seleccionado");
+        console.log(event.target.textContent);
+    }
+});
+
+
+
+//Ejercicio 4 de la clase 9
+//Fase de Bubbling
+const externo1 = document.querySelector("#externo");
+externo1.addEventListener("click", function() {
+    console.log("externo");
+});
+
+const interno1 = document.querySelector("#interno");
+interno1.addEventListener("click", function() {
+    console.log("interno");
+});
+
+const boton1 = document.querySelector("#botón");
+boton1.addEventListener("click", function() {
+    console.log("botón");
+});
+//Se visualiza en consola como:
+//botón
+//interno
+//externo
+
+
+//Fase de Capturing solamente en #externo
+externo1.addEventListener("click", function() {
+    console.log("externo - capturing");
+}, true);
+//Se visualiza en consola como:
+//externo - capturing
+//botón
+//interno
+//externo
+
+
+
+//Ejercicio 5 de la clase 9
+
+const form = document.querySelector("#formulario");
+form.addEventListener("submit", function(event) {
+    event.preventDefault();
+
+    const nombre = document.querySelector("#nombre").value;
+    const edad = document.querySelector("#edad").value;
+    const mensaje = document.querySelector("#mensaje").value;
+
+    const errorNombre = document.querySelector("#errorNombre");
+    const errorEdad = document.querySelector("#errorEdad");
+    const errorMensaje = document.querySelector("#errorMensaje");
+
+    const resultado = document.querySelector("#resultado");
+
+    errorNombre.textContent = "";
+    errorEdad.textContent = "";
+    errorMensaje.textContent = "";
+    resultado.textContent = "";
+
+    if (nombre.trim() === "") {
+        errorNombre.textContent = "El nombre no puede estar vacío.";
+        errorNombre.classList.add("visible");
+        return;
+    }
+
+    errorNombre.classList.remove("visible");
+
+    if (edad.trim() === "") {
+        errorEdad.textContent = "La edad no puede estar vacía.";
+        errorEdad.classList.add("visible");
+        return;
+    } else if (isNaN(edad) || edad <= 0 || edad >= 120) {
+        errorEdad.textContent = "La edad debe ser un número mayor que 0 y menor que 120";
+        errorEdad.classList.add("visible");
+        return;
+    }
+
+    errorEdad.classList.remove("visible");
+
+    if(mensaje.trim() === "") {
+        errorMensaje.textContent = "El mensaje no puede estar vacío.";
+        errorMensaje.classList.add("visible")
+        return;
+    }
+    errorMensaje.classList.remove("visible");
+
+    resultado.textContent = "Formulario enviado con éxito.";
+
+    document.querySelector("#nombre").value = "";
+    document.querySelector("#edad").value = "";
+    document.querySelector("#mensaje").value = "";
+});

estilo.css

@@ -3,3 +3,16 @@ div {
     padding: 10px;
     margin: 10px;
 }
+
+.seleccionado {
+    background-color: yellow;
+    font-weight: bold;
+}
+
+.error {
+    color: red;
+}
+
+.visible{
+    display: block;
+}

index.html

@@ -10,22 +10,56 @@
         <h1>Clase 9 - Eventos</h1>
         <div id="ejercicio-1">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+             <button id="botonEjc1">Click</button>
+             <p id="textoContador">Botón clickeado 0 veces</p>
         </div>
         <hr>
         <div id="ejercicio-2">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+             <input type="text" id="texto">
+             <p id="cantidadCaracteres">Cantidad de caracteres: 0</p>
         </div>
         <hr>
         <div id="ejercicio-3">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+             <ul id="lista">
+                <li>Audi</li>
+                <li>Toyota</li>
+                <li>Chevrolet</li>
+                <li>Ford</li>
+                <li>Nissan</li>
+             </ul>
         </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="botón">Click</button>
+                </div>
+             </div>
         </div>
         <hr>
         <div id="ejercicio-5">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+             <form id="formulario">
+                <label>Nombre:</label>
+                <input type="text" id="nombre">
+                <p id="errorNombre" class="error"></p>
+
+                <label>Edad:</label>
+                <input type="text" id="edad">
+                <p id="errorEdad" class="error"></p>
+
+                <label>Mensaje:</label>
+                <textarea name="mensaje" id="mensaje"></textarea>
+                <p id="errorMensaje" class="error"></p>
+
+
+                <button type="submit">Enviar</button>
+             </form>
+
+             <p id="resultado"></p>
         </div>
         <script src="clase-9.js"></script>
     </body>