forked from marquez.juan/clase-9-eventos
115 lines
2.8 KiB
JavaScript
115 lines
2.8 KiB
JavaScript
// Agregar acá el código javascript para los ejercicios
|
|
|
|
// Ejercicio 1
|
|
|
|
const clickCounter = document.getElementById('clickCounter');
|
|
const clickButton = document.getElementById('clickButton');
|
|
|
|
let count = 0;
|
|
|
|
clickButton.addEventListener('click', () => {
|
|
count++;
|
|
clickCounter.textContent = count;
|
|
});
|
|
|
|
// Ejercicio 2
|
|
|
|
const textInput = document.getElementById('textInput');
|
|
const charCount = document.getElementById('charCount');
|
|
|
|
textInput.addEventListener('input', () => {
|
|
charCount.textContent = textInput.value.length;
|
|
});
|
|
|
|
// Ejercicio 3
|
|
|
|
const itemList = document.getElementById('itemList');
|
|
|
|
itemList.addEventListener('click', (event) => {
|
|
if (event.target.tagName === 'LI') {
|
|
const items = itemList.querySelectorAll('li');
|
|
items.forEach(item => item.classList.remove('selected'));
|
|
event.target.classList.add('selected');
|
|
}
|
|
});
|
|
|
|
// Ejercicio 4
|
|
|
|
const outside = document.getElementById('outside');
|
|
const inside = document.getElementById('inside');
|
|
const insideButton = document.getElementById('insideButton');
|
|
|
|
outside.addEventListener('click', () => {
|
|
console.log("outside");
|
|
});
|
|
|
|
inside.addEventListener('click', () => {
|
|
console.log("inside");
|
|
})
|
|
|
|
insideButton.addEventListener('click', () => {
|
|
console.log("button");
|
|
});
|
|
|
|
outside.addEventListener('click', () => {
|
|
console.log("outside capturing");
|
|
}, true);
|
|
|
|
// Ejercicio 5
|
|
|
|
const userForm = document.getElementById('userForm');
|
|
const nameInput = document.getElementById('nameInput');
|
|
const ageInput = document.getElementById('ageInput');
|
|
const messageInput = document.getElementById('messageInput');
|
|
|
|
const clearErrors = () => {
|
|
document.getElementById('nameError').textContent = '';
|
|
document.getElementById('ageError').textContent = '';
|
|
document.getElementById('messageError').textContent = '';
|
|
}
|
|
|
|
const validateForm = () => {
|
|
let isValid = true;
|
|
|
|
if (nameInput.value.trim() === '') {
|
|
document.getElementById('nameError').textContent = 'El nombre es obligatorio.';
|
|
isValid = false;
|
|
}
|
|
|
|
const age = parseInt(ageInput.value);
|
|
if (isNaN(age) || age < 0 || age > 120) {
|
|
document.getElementById('ageError').textContent = 'La edad debe ser un número entre 0 y 120.';
|
|
isValid = false;
|
|
}
|
|
|
|
if (messageInput.value.trim() === '') {
|
|
document.getElementById('messageError').textContent = 'El mensaje es obligatorio.';
|
|
isValid = false;
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
const showSuccessMessage = () => {
|
|
alert('Formulario enviado con éxito!');
|
|
}
|
|
|
|
const clearForm = () => {
|
|
nameInput.value = '';
|
|
ageInput.value = '';
|
|
messageInput.value = '';
|
|
}
|
|
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
|
|
clearErrors();
|
|
|
|
const isValid = validateForm();
|
|
|
|
if (isValid) {
|
|
showSuccessMessage();
|
|
clearForm();
|
|
}}
|
|
|
|
userForm.addEventListener('submit', handleSubmit); |