Ejercicio 5

clase-9.js

@@ -1 +1,219 @@
 // Agregar acá el código javascript para los ejercicios
+
+/*
+
+1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0
+   veces`. Cada vez que se haga clic en el botón, el texto del párrafo debe
+   cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de
+   veces que se hizo clic.
+
+*/
+
+const boton = document.getElementById("boton");
+
+boton.addEventListener("click", () => {
+
+    let contador = parseInt(document.getElementById("cantidad").textContent);
+
+    contador = contador + 1;
+
+    document.getElementById("cantidad").textContent = contador;
+ 
+    if (contador === 1) {
+
+        document.getElementById("descripcionCantidad").textContent = "vez.";
+
+    } else {
+
+        document.getElementById("descripcionCantidad").textContent = "veces.";
+
+    }
+
+});
+
+/*
+
+2. Agregar un campo de texto a la página. A medida que el usuario escribe,
+   mostrar en tiempo real la cantidad de caracteres ingresados debajo del campo.
+
+*/
+
+const inputTexto = document.getElementById("texto");
+
+inputTexto.addEventListener("input", () => {
+
+    let cantidad = inputTexto.value.length;
+
+    document.getElementById("cantidadCaracteres").textContent = cantidad;
+});
+
+/* 
+
+3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al
+   hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se
+   la quite a los demás (es decir, solo un ítem puede estar seleccionado a la
+   vez).
+
+*/
+
+const lista3 = document.getElementById("lista-nueva");
+
+lista3.addEventListener("click", (evento) => {
+
+    const items = document.querySelectorAll("#lista-nueva li");
+
+    for (const item of items) {
+        
+        item.classList.remove("seleccionado");
+
+    }
+
+    evento.target.classList.add("seleccionado");
+
+
+});
+
+/* 
+
+4. Agregar a la página los siguientes elementos:
+   ```html
+   <div id="externo">
+       <div id="interno">
+           <button>Click</button>
+       </div>
+   </div>
+   ```
+   Registrar listeners de bubbling en los tres elementos y verificar en consola
+   el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un
+   listener de capturing en `#externo` y observar cómo cambia el orden.
+*/
+
+// bubbling:
+
+const externoBub = document.getElementById("externoBub");
+const internoBub = document.getElementById("internoBub");
+const botonBub = document.getElementById("botonBub");
+
+externoBub.addEventListener("click", () => {
+    console.log("DIV EXTERNO");
+});
+
+internoBub.addEventListener("click", () => {
+    console.log("DIV INTERNO");
+});
+
+botonBub.addEventListener("click", () => {
+    console.log("BOTON");
+});
+
+// Capturing
+
+
+const externoCap = document.getElementById("externoCap");
+const internoCap = document.getElementById("internoCap");
+const botonCap = document.getElementById("botonCap");
+
+externoCap.addEventListener("click", () => {
+    console.log("DIV EXTERNO");
+}, true);
+
+internoCap.addEventListener("click", () => {
+    console.log("DIV INTERNO");
+}, true);
+
+botonCap.addEventListener("click", () => {
+    console.log("BOTON");
+}, true);
+
+/*
+
+5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al
+   enviarlo:
+
+   - Verificar que ningún campo esté vacío.
+   - Verificar que la edad sea un número entero positivo, menor que 120.
+   - Si hay errores, mostrarlos en la página junto al campo correspondiente.
+   - Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario.
+
+   Para limpiar un campo se puede asignar un string vacío a su propiedad
+   `value`:
+
+   ```js
+   document.querySelector("#nombre").value = "";
+   ```
+*/
+
+
+
+function validarNombre() {
+
+    const nombre = document.getElementById("nombre").value;
+    if (nombre.trim() === "") {
+        document.getElementById("errorNombre").textContent="El campo nombre no puede estar vacio";
+        return false;
+    }
+
+    document.getElementById("errorNombre").textContent = "";
+    return true;
+
+} 
+
+function validarEdad() {
+
+    const edadTexto = document.getElementById("edad").value;
+
+    if (edadTexto.trim() === "") {
+
+        document.getElementById("errorEdad").textContent = "Escribir la edad";
+        return false;
+    }
+
+    const edad = parseInt(edadTexto);
+
+    if (isNaN(edad)) {
+        document.getElementById("errorEdad").textContent = "La edad no puede ser un texto";
+        return false;
+    }
+    if  (edad <= 0 || edad >= 120) {
+        document.getElementById("errorEdad").textContent = "Edad invalida";
+        return false;
+        }
+    document.getElementById("errorEdad").textContent = "";
+    return true;
+
+}
+
+function validarMensaje () {
+
+    const mensaje = document.getElementById("mensaje").value;
+
+    if (mensaje.trim() === "") {
+
+        document.getElementById("errorMensaje").textContent = "El mensaje no puede estar vacio";
+        return false;
+    }
+
+    document.getElementById("errorMensaje").textContent = "";
+    return true;
+
+}
+
+const form = document.querySelector("#formulario")
+form.addEventListener("submit", (evento) => {
+
+    evento.preventDefault();
+
+   const nombreValido = validarNombre();
+   const edadValida = validarEdad();
+   const mensajeValido = validarMensaje();
+
+     if (nombreValido && edadValida && mensajeValido) {
+
+        document.getElementById("exito").textContent = "Formulario enviado correctamente";
+        document.getElementById("nombre").value = "";
+        document.getElementById("edad").value = "";
+        document.getElementById("mensaje").value = "";
+
+    }
+
+});

estilo.css

@@ -3,3 +3,17 @@ div {
     padding: 10px;
     margin: 10px;
 }
+
+.seleccionado {
+    background-color: lightblue;
+}
+
+
+/* Le agregue esto para que me aparezca el cursor sobre los items,
+y para que no se pueda seleccionar todos los items como si fuera un texto. Eso hacia que queden todos seleccionados y me rompia el codigo. */
+
+#lista-nueva li {
+    
+    cursor: pointer;
+    user-select: none;
+}

index.html

@@ -9,24 +9,58 @@
     <body>
         <h1>Clase 9 - Eventos</h1>
         <div id="ejercicio-1">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+            <p>Boton clickeado <span id="cantidad">0</span> <span id="descripcionCantidad">veces.</span></p>
+            <button id="boton">Haz click aqui</button>
         </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>
+                Cantidad de caracteres:
+                <span id="cantidadCaracteres">0</span>
+            </p>
         </div>
         <hr>
         <div id="ejercicio-3">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+            <ul id="lista-nueva">
+                <li>item 1</li>
+                <li>item 2</li>
+                <li>item 3</li>
+                <li>item 4</li>
+                <li>item 5</li>
+            </ul>
         </div>
         <hr>
         <div id="ejercicio-4">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+            <div id="externoBub">
+                <div id="internoBub">
+                <button id="botonBub">Click Bubbling</button>
+            </div>
+                </div>
+             <div id="externoCap">
+                <div id="internoCap">
+                <button id="botonCap">Click Capturing</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">
-        </div>
+
+            <input type="text" id="nombre" placeholder="Escribe tu nombre">
+            <p id="errorNombre"></p>
+            <br>
+            <input type="text" id="edad" placeholder="Escribe tu edad">
+            <p id="errorEdad"></p>
+            <br>
+            <textarea id="mensaje" placeholder="Escribe un mensaje"></textarea>
+            <p id="errorMensaje"></p>
+            <br>
+            <button type="submit">Enviar</button>
+        </form>
+
+        <p id="exito"></p>
         <script src="clase-9.js"></script>
     </body>
 </html>