Compare commits
1 Commits
28e2e92142
...
63f8bb23a3
| Author | SHA1 | Date | |
|---|---|---|---|
| 63f8bb23a3 |
102
clase-9.js
102
clase-9.js
@@ -7,105 +7,3 @@ boton.addEventListener('click', function() {
|
||||
clickCount++;
|
||||
parrafo.textContent = `Botón clickeado ${clickCount} veces`;
|
||||
});
|
||||
|
||||
// Ejercicio 2 - Contador de caracteres en tiempo real
|
||||
const inputTexto = document.getElementById('campoTexto');
|
||||
const contadorCaracteres = document.getElementById('contadorCaracteres');
|
||||
|
||||
inputTexto.addEventListener('input', function() {
|
||||
contadorCaracteres.textContent = `Caracteres ingresados: ${inputTexto.value.length}`;
|
||||
});
|
||||
|
||||
// Ejercicio 3 - Selección única en lista mediante delegación de eventos
|
||||
const lista = document.getElementById('listaItems');
|
||||
|
||||
lista.addEventListener('click', function(event) {
|
||||
const item = event.target.closest('li');
|
||||
if (!item || !lista.contains(item)) {
|
||||
return;
|
||||
}
|
||||
|
||||
lista.querySelectorAll('li').forEach(function(li) {
|
||||
li.classList.remove('seleccionado');
|
||||
});
|
||||
item.classList.add('seleccionado');
|
||||
});
|
||||
|
||||
// Ejercicio 4 - Listeners de bubbling y capturing
|
||||
const externo = document.getElementById('externo');
|
||||
const interno = document.getElementById('interno');
|
||||
const botonExterno = document.getElementById('botonExterno');
|
||||
|
||||
externo.addEventListener('click', function() {
|
||||
console.log('bubbling: externo');
|
||||
});
|
||||
|
||||
interno.addEventListener('click', function() {
|
||||
console.log('bubbling: interno');
|
||||
});
|
||||
|
||||
botonExterno.addEventListener('click', function() {
|
||||
console.log('bubbling: button');
|
||||
});
|
||||
|
||||
externo.addEventListener('click', function() {
|
||||
console.log('capturing: externo');
|
||||
}, true);
|
||||
|
||||
// Ejercicio 5 - Validación de formulario
|
||||
const formulario = document.getElementById('formulario');
|
||||
const nombreInput = document.getElementById('nombre');
|
||||
const edadInput = document.getElementById('edad');
|
||||
const mensajeInput = document.getElementById('mensaje');
|
||||
const errorNombre = document.getElementById('errorNombre');
|
||||
const errorEdad = document.getElementById('errorEdad');
|
||||
const errorMensaje = document.getElementById('errorMensaje');
|
||||
const formResultado = document.getElementById('formResultado');
|
||||
|
||||
function limpiarErrores() {
|
||||
errorNombre.textContent = '';
|
||||
errorEdad.textContent = '';
|
||||
errorMensaje.textContent = '';
|
||||
formResultado.textContent = '';
|
||||
}
|
||||
|
||||
formulario.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
limpiarErrores();
|
||||
|
||||
let esValido = true;
|
||||
const nombre = nombreInput.value.trim();
|
||||
const edadValor = edadInput.value.trim();
|
||||
const mensaje = mensajeInput.value.trim();
|
||||
|
||||
if (!nombre) {
|
||||
errorNombre.textContent = 'El nombre no puede estar vacío.';
|
||||
esValido = false;
|
||||
}
|
||||
|
||||
if (!edadValor) {
|
||||
errorEdad.textContent = 'La edad no puede estar vacía.';
|
||||
esValido = false;
|
||||
} else if (!/^[0-9]+$/.test(edadValor)) {
|
||||
errorEdad.textContent = 'La edad debe ser un número entero positivo.';
|
||||
esValido = false;
|
||||
} else {
|
||||
const edad = parseInt(edadValor, 10);
|
||||
if (edad <= 0 || edad >= 120) {
|
||||
errorEdad.textContent = 'La edad debe ser mayor que 0 y menor que 120.';
|
||||
esValido = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (!mensaje) {
|
||||
errorMensaje.textContent = 'El mensaje no puede estar vacío.';
|
||||
esValido = false;
|
||||
}
|
||||
|
||||
if (esValido) {
|
||||
formResultado.textContent = 'Formulario enviado con éxito.';
|
||||
nombreInput.value = '';
|
||||
edadInput.value = '';
|
||||
mensajeInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
31
estilo.css
31
estilo.css
@@ -3,34 +3,3 @@ div {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.seleccionado {
|
||||
background-color: #7DAA3C;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#listaItems {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#listaItems li {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid #8A8A8A;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b30000;
|
||||
font-size: 0.9em;
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #0a6f0a;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
38
index.html
38
index.html
@@ -14,49 +14,19 @@
|
||||
</div>
|
||||
<hr>
|
||||
<div id="ejercicio-2">
|
||||
<label for="campoTexto">Ingresa texto:</label>
|
||||
<input type="text" id="campoTexto" />
|
||||
<p id="contadorCaracteres">Caracteres ingresados: 0</p>
|
||||
<!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
|
||||
</div>
|
||||
<hr>
|
||||
<div id="ejercicio-3">
|
||||
<ul id="listaItems">
|
||||
<li>Ítem 1</li>
|
||||
<li>Ítem 2</li>
|
||||
<li>Ítem 3</li>
|
||||
<li>Ítem 4</li>
|
||||
<li>Ítem 5</li>
|
||||
</ul>
|
||||
<!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
|
||||
</div>
|
||||
<hr>
|
||||
<div id="ejercicio-4">
|
||||
<div id="externo">
|
||||
<div id="interno">
|
||||
<button id="botonExterno">Click</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
|
||||
</div>
|
||||
<hr>
|
||||
<div id="ejercicio-5">
|
||||
<form id="formulario">
|
||||
<div>
|
||||
<label for="nombre">Nombre:</label>
|
||||
<input type="text" id="nombre" />
|
||||
<span class="error" id="errorNombre"></span>
|
||||
</div>
|
||||
<div>
|
||||
<label for="edad">Edad:</label>
|
||||
<input type="text" id="edad" />
|
||||
<span class="error" id="errorEdad"></span>
|
||||
</div>
|
||||
<div>
|
||||
<label for="mensaje">Mensaje:</label>
|
||||
<textarea id="mensaje"></textarea>
|
||||
<span class="error" id="errorMensaje"></span>
|
||||
</div>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
<p class="success" id="formResultado"></p>
|
||||
<!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
|
||||
</div>
|
||||
<script src="clase-9.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user