Cree un formulario con los campos nombre, edad y mensaje que cumpliese con lo requerido

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");
@@ -41,3 +39,34 @@ 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();
+    }
+});

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>