marquez.juan/clase-10-ejercicios-de-repaso
1
0
Fork 7
Code Issues Pull Requests 4 Projects Releases Wiki Activity

Compare commits

base: marquez.juan:solucion-ejercicio-7
Branches Tags
marquez.juan:main marquez.juan:solucion-ejercicio-9 marquez.juan:solucion-ejercicio-8 marquez.juan:solucion-ejercicio-7 marquez.juan:solucion-ejercicio-6 marquez.juan:solucion-ejercicio-5 marquez.juan:solucion-ejercicio-4 marquez.juan:solucion-ejercicio-3 marquez.juan:solucion-ejercicio-2 marquez.juan:solucion-ejercicio-1
..
compare: marquez.juan:solucion-ejercicio-3
Branches Tags
marquez.juan:solucion-ejercicio-9 marquez.juan:solucion-ejercicio-8 marquez.juan:solucion-ejercicio-7 marquez.juan:solucion-ejercicio-6 marquez.juan:solucion-ejercicio-5 marquez.juan:solucion-ejercicio-4 marquez.juan:solucion-ejercicio-3 marquez.juan:solucion-ejercicio-2 marquez.juan:solucion-ejercicio-1 marquez.juan:main

1 Commits
solucion-e ... solucion-e

Author SHA1 Message Date
Juanse Marquez
b459ca529a Solución ejercicio 3 2026-06-01 18:47:31 -03:00
6 changed files with 25 additions and 68 deletions
Expand all files Collapse all files

12
ejercicio3/ejercicio3.js
View File

@@ -1 +1,11 @@
// Agregar aquí el código javascript const lista = document.querySelector("#lista");
// Un solo listener en la lista, no uno por ítem (delegación de eventos).
lista.addEventListener("click", (e) => {
// Verificamos que el clic fue sobre un <li>. Si fue sobre otro elemento,
// retornamos sin hacer nada.
if (e.target.tagName !== "LI") return;
// toggle agrega la clase si no la tiene, y la quita si ya la tenía.
e.target.classList.toggle("seleccionado");
});

5
ejercicio3/estilo.css
View File

@@ -1,2 +1,5 @@
/* Agregar el código CSS necesario para el ejercicio */ .seleccionado {
background-color: yellow;
font-weight: bold;
}

9
ejercicio3/index.html
View File

@@ -9,6 +9,15 @@
<body> <body>
<h1>Ejercicio 3</h1> <h1>Ejercicio 3</h1>
<ul id="lista">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
</ul>
<script src="ejercicio3.js"></script> <script src="ejercicio3.js"></script>
</body> </body>
</html> </html>

47
ejercicio7/ejercicio7.js
View File

@@ -1,46 +1 @@
const form = document.querySelector("#formulario"); // Agregar aquí el código javascript
function mostrarError(id, mensaje) {
document.querySelector(id).textContent = mensaje;
}
function limpiarError(id) {
document.querySelector(id).textContent = "";
}
form.addEventListener("submit", (e) => {
e.preventDefault();
const nombre = document.querySelector("#nombre").value.trim();
const edad = document.querySelector("#edad").value.trim();
const password = document.querySelector("#password").value;
// Limpiamos todos los errores antes de volver a validar.
limpiarError("#error-nombre");
limpiarError("#error-edad");
limpiarError("#error-password");
document.querySelector("#exito").textContent = "";
let valido = true;
if (nombre === "") {
mostrarError("#error-nombre", "El nombre no puede estar vacío.");
valido = false;
}
if (edad === "" || parseInt(edad) < 0 || parseInt(edad) > 100) {
mostrarError("#error-edad", "La edad no tiene un formato válido.");
valido = false;
}
if (password.length < 8) {
mostrarError("#error-password", "La contraseña debe tener al menos 8 caracteres.");
valido = false;
}
// Solo mostramos el éxito si todos los campos son válidos.
if (valido) {
document.querySelector("#exito").textContent = "Formulario enviado correctamente.";
form.reset(); // reset() limpia todos los campos del formulario
}
});

4
ejercicio7/estilo.css
View File

@@ -1,6 +1,2 @@
/* Agregar el código CSS necesario para el ejercicio */ /* Agregar el código CSS necesario para el ejercicio */
.error {
color: red;
font-size: 0.5em;
}

16
ejercicio7/index.html
View File

@@ -8,22 +8,6 @@
</head> </head>
<body> <body>
<h1>Ejercicio 7</h1> <h1>Ejercicio 7</h1>
<form id="formulario">
<div>
<input type="text" id="nombre" placeholder="Nombre">
<span class="error" id="error-nombre"></span>
</div>
<div>
<input type="number" id="edad" placeholder="Edad">
<span class="error" id="error-edad"></span>
</div>
<div>
<input type="password" id="password" placeholder="Contraseña">
<span class="error" id="error-password"></span>
</div>
<button type="submit">Enviar</button>
<p id="exito"></p>
</form>
<script src="ejercicio7.js"></script> <script src="ejercicio7.js"></script>
</body> </body>