alarcon.blas/clase-9-eventos
1
0
Fork 0
forked from marquez.juan/clase-9-eventos
Code Pull Requests Activity

Compare commits

merge into: alarcon.blas:main
Branches Tags
alarcon.blas:main alarcon.blas:blas-alarcon marquez.juan:main
...
pull from: alarcon.blas:blas-alarcon
Branches Tags
alarcon.blas:blas-alarcon alarcon.blas:main marquez.juan:main

5 Commits
main ... blas-alarc

Author SHA1 Message Date
Blas Alarcón
b1acc7ba7d Cree un formulario con los campos nombre, edad y mensaje que cumpliese con lo requerido 2026-05-21 23:44:40 -03:00
Blas Alarcón
5b5ed15a7f Agregue al html lo indicado y en el js registre listeners de bubbling en los 3 elementos y luego agregue un listener de capturing en externo 2026-05-21 20:40:19 -03:00
Blas Alarcón
93fd449b17 Cree una lista con cinco items, y use delegacion de eventos para que cuando haga click en un elemento agregue la clase seleccionado y se la quite a los demas 2026-05-21 20:12:35 -03:00
Blas Alarcón
180cfa585c Agregue un campo de texto a la pagina y abajo un parrafo que cuenta cuantos caracteres hay ingresados en el campo 2026-05-21 19:22:04 -03:00
Blas Alarcón
2008e7f87f Agregue un boton y un parrafo que dice cuantas veces se clickeo 2026-05-21 19:04:05 -03:00
2 changed files with 99 additions and 5 deletions
Expand all files Collapse all files

71
clase-9.js
View File

@@ -1 +1,72 @@
// Agregar acá el código javascript para los ejercicios // Agregar acá el código javascript para los ejercicios
const boton1 = document.querySelector("button");
const parrafo1 = document.querySelector("p");
var i = 0
boton1.addEventListener("click", function () {
i = i + 1
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.`;
});
const lista = document.querySelector("ul");
lista.addEventListener("click", (e) => {
if (e.target.tagName === "LI") {
const items = document.querySelectorAll("li")
for (const item of items) {
item.classList.remove("seleccionado");
}
e.target.classList.add("seleccionado");
console.log(e.target.textContent);
}
});
document.querySelector("#externo").addEventListener("click", () => {
console.log("externo");
}, true);
document.querySelector("#interno").addEventListener("click", () => {
console.log("interno");
});
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();
}
});

33
index.html
View File

@@ -9,23 +9,46 @@
<body> <body>
<h1>Clase 9 - Eventos</h1> <h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1"> <div id="ejercicio-1">
<!-- Agregar acá el código HTML que haga falta para el 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>
</div> </div>
<hr> <hr>
<div id="ejercicio-2"> <div id="ejercicio-2">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 2 --> <input><!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
<p id="contadorCaracteres">El campo de texto tiene 0 caracteres.</p>
</div> </div>
<hr> <hr>
<div id="ejercicio-3"> <div id="ejercicio-3">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 3 --> <ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul><!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
</div> </div>
<hr> <hr>
<div id="ejercicio-4"> <div id="ejercicio-4">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 4 --> <div id="externo">
<div id="interno">
<button id="boton">Click</button>
</div>
</div><!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
</div> </div>
<hr> <hr>
<div id="ejercicio-5"> <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> </div>
<script src="clase-9.js"></script> <script src="clase-9.js"></script>
</body> </body>