From b1acc7ba7d85dbecc798051fb46071249db5d0c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Blas=20Alarc=C3=B3n?= <47840816@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 23:44:40 -0300
Subject: [PATCH] Cree un formulario con los campos nombre, edad y mensaje que
 cumpliese con lo requerido

---
 clase-9.js | 37 +++++++++++++++++++++++++++++++++----
 index.html | 15 +++++++++++++--
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/clase-9.js b/clase-9.js
index 9e2daa2..e9bda6e 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -5,16 +5,14 @@ var i = 0
 
 boton1.addEventListener("click", function () {
     i = i + 1
-    parrafo1.textContent = `Este boton ha sido clickeado ${i} veces`;
-    console.log(`El botón fue clickeado ${i} veces`);
+    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`;
-    console.log(e.target.value); 
+    parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres.`;
 });
 
 const lista = document.querySelector("ul");
@@ -40,4 +38,35 @@ document.querySelector("#interno").addEventListener("click", () => {
 });
 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();
+    }
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index 4a36455..4a1770f 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
         <h1>Clase 9 - Eventos</h1>
         <div id="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>
+            <p>Este boton ha sido clickeado 0 veces.</p>
         </div>
         <hr>
         <div id="ejercicio-2">
@@ -37,7 +37,18 @@
         </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>