112 lines
3.5 KiB
JavaScript
112 lines
3.5 KiB
JavaScript
// Ejercicio 1 - Contador de clics
|
|
let clickCount = 0;
|
|
const boton = document.getElementById('miBoton');
|
|
const parrafo = document.getElementById('contadorClicks');
|
|
|
|
boton.addEventListener('click', function() {
|
|
clickCount++;
|
|
parrafo.textContent = `Botón clickeado ${clickCount} veces`;
|
|
});
|
|
|
|
// Ejercicio 2 - Contador de caracteres en tiempo real
|
|
const campoTexto = document.getElementById('campoTexto');
|
|
const contadorCaracteres = document.getElementById('contadorCaracteres');
|
|
|
|
campoTexto.addEventListener('input', function() {
|
|
contadorCaracteres.textContent = `Caracteres ingresados: ${campoTexto.value.length}`;
|
|
});
|
|
|
|
// Ejercicio 3 - Selección única en la lista con delegación de eventos
|
|
const listaItems = document.getElementById('listaItems');
|
|
|
|
listaItems.addEventListener('click', function(event) {
|
|
const item = event.target.closest('li');
|
|
if (!item || !listaItems.contains(item)) {
|
|
return;
|
|
}
|
|
|
|
listaItems.querySelectorAll('li').forEach(function(li) {
|
|
li.classList.remove('seleccionado');
|
|
});
|
|
item.classList.add('seleccionado');
|
|
});
|
|
|
|
// Ejercicio 4 - Bubbling y capturing
|
|
const externo = document.getElementById('externo');
|
|
const interno = document.getElementById('interno');
|
|
const botonCaptura = document.getElementById('botonCaptura');
|
|
|
|
externo.addEventListener('click', function() {
|
|
console.log('bubbling: externo');
|
|
});
|
|
|
|
interno.addEventListener('click', function() {
|
|
console.log('bubbling: interno');
|
|
});
|
|
|
|
botonCaptura.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 = '';
|
|
}
|
|
});
|