marquez.juan/clase-9-eventos
1
0
Fork 16
Code Issues Pull Requests 10 Projects Releases Wiki Activity

clase 9 #3

Open
alarcon.blas wants to merge 5 commits from alarcon.blas/clase-9-eventos:blas-alarcon into main
pull from: alarcon.blas/clase-9-eventos:blas-alarcon
merge into: marquez.juan:main
Conversation 0 Commits 5 Files Changed 2 +99 -5
2 changed files with 99 additions and 5 deletions
Download Patch File Download Diff File 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>