From c56c9e8be84fe46f45d6eec11432cfae714b011c Mon Sep 17 00:00:00 2001
From: Lucio Gaibazzi <luciogaibazzi@gmail.com>
Date: Mon, 1 Jun 2026 02:13:26 -0300
Subject: [PATCH] Agrega ejercicio 5 de la clase 9

---
 clase-9.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 estilo.css |  8 ++++++++
 index.html | 18 +++++++++++++++++
 3 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/clase-9.js b/clase-9.js
index a7e0158..cd1d50b 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -73,4 +73,61 @@ externo1.addEventListener("click", function() {
 //externo - capturing
 //botón
 //interno
-//externo
\ No newline at end of file
+//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 = "";
+});
\ No newline at end of file
diff --git a/estilo.css b/estilo.css
index 658df39..dae03e4 100644
--- a/estilo.css
+++ b/estilo.css
@@ -8,3 +8,11 @@ div {
     background-color: yellow;
     font-weight: bold;
 }
+
+.error {
+    color: red;
+}
+
+.visible{
+    display: block;
+}
diff --git a/index.html b/index.html
index 03105ed..179a478 100644
--- a/index.html
+++ b/index.html
@@ -42,6 +42,24 @@
         <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>