Código en JavaScript

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";
  });
 

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)