diff --git a/clase-9.js b/clase-9.js
index 6df1007..5844ae5 100644
--- a/clase-9.js
+++ b/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
+
+
+
+
+
+ ```
+ 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 = "";
+
+ }
+
+});
\ No newline at end of file
diff --git a/estilo.css b/estilo.css
index 19d93f8..ae35515 100644
--- a/estilo.css
+++ b/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;
+}
diff --git a/index.html b/index.html
index 2a6b85f..d284de2 100644
--- a/index.html
+++ b/index.html
@@ -9,24 +9,58 @@