Código usado para que lo pruebes
// 1. Validación del formulario
document.querySelector('form').addEventListener('submit', function(event) {
const nombreInput = document.getElementById('nombre').value.trim();
if (nombreInput === "") {
alert("El campo 'Nombre' no puede estar vacío.");
event.preventDefault(); // Evita que el formulario se envíe
} else if (nombreInput.length < 3) {
alert("El nombre debe tener al menos 3 caracteres.");
event.preventDefault();
} else {
alert("Formulario enviado correctamente.");
}
});
// 2. Cambiar el color de los enlaces al hacer clic
document.querySelectorAll('nav a').forEach(function(link) {
link.addEventListener('click', function() {
document.querySelectorAll('nav a').forEach(a => a.style.color = 'white');
this.style.color = 'yellow'; // Cambia el color del enlace seleccionado
});
});
// 3. Mostrar mensaje dinámico al cargar la página
window.addEventListener('load', function() {
const mensaje = document.createElement('p');
mensaje.textContent = "Bienvenido a nuestra página web.";
mensaje.style.textAlign = "center";
mensaje.style.color = "#4CAF50";
mensaje.style.fontWeight = "bold";
document.body.insertBefore(mensaje, document.body.firstChild);
});
// 4. Agregar filas dinámicas a la tabla
const agregarFilaBtn = document.createElement('button');
agregarFilaBtn.textContent = "Agregar fila";
agregarFilaBtn.style.margin = "20px";
document.querySelector('table').parentNode.appendChild(agregarFilaBtn);
agregarFilaBtn.addEventListener('click', function() {
const nuevaFila = document.createElement('tr');
nuevaFila.innerHTML = `
<td>Nuevo Nombre</td>
<td>${Math.floor(Math.random() * 50) + 20}</td>
`;
document.querySelector('tbody').appendChild(nuevaFila);
});
// 5. Cambiar el fondo de la sección "Inicio" al pasar el mouse sobre "Sobre Nosotros"
document.querySelector('a[href="#about"]').addEventListener('mouseover', function() {
document.querySelector('#inicio').style.backgroundColor = "#e8f5e9";
});
document.querySelector('a[href="#about"]').addEventListener('mouseout', function() {
document.querySelector('#inicio').style.backgroundColor = "white";
});