5. Adición de Características Avanzadas

Para elevar nuestro simple sitio web interactivo, integraremos algunas características avanzadas que mejoran la funcionalidad, mejoran la interacción del usuario y demuestran conceptos más complejos de JavaScript. En esta sección, cubriremos cómo implementar la validación de formularios, usar el almacenamiento local para mantener el estado entre sesiones e introducir algunas técnicas adicionales de JavaScript que pueden proporcionar una experiencia de usuario más rica.

5.1 Validación de Formularios

Mejorar el formulario con validación impulsada por JavaScript permite una retroalimentación más interactiva. Esto asegurará que los usuarios ingresen información válida antes de enviar.

JavaScript para Validación Mejorada:

document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    let isValid = true;

    const name = document.getElementById('name');
    const email = document.getElementById('email');
    const message = document.getElementById('message');

    // Simple validation checks
    [name, email, message].forEach(input => {
        if (!input.value) {
            input.style.border = '2px solid red';
            isValid = false;
        } else {
            input.style.border = '';
        }
    });

    if (isValid) {
        alert('Thank you for your message!');
        // Optionally clear the form or handle the data further
        this.reset();
    } else {
        alert('Please fill in all fields correctly.');
    }
});

5.2 Integración con Almacenamiento Local

Usar el almacenamiento local permite que el sitio web recuerde ciertas configuraciones o datos del usuario entre sesiones. Por ejemplo, podemos recordar la preferencia de tema del usuario o guardar los elementos de la lista de tareas.

JavaScript para Almacenamiento Local:

// Save theme preference
document.getElementById('theme-toggler').addEventListener('click', function() {
    const body = document.body;
    body.classList.toggle('dark-theme');
    const isDark = body.classList.contains('dark-theme');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    this.textContent = isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode';
});

// Load theme preference on page load
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        document.body.classList.add('dark-theme');
        document.getElementById('theme-toggler').textContent = 'Switch to Light Mode';
    }
});

// Save and load tasks
document.getElementById('add-task').addEventListener('click', function() {
    const taskList = document.getElementById('tasks');
    const newTaskValue = document.getElementById('new-task').value;
    if (newTaskValue) {
        const listItem = document.createElement('li');
        listItem.textContent = newTaskValue;
        taskList.appendChild(listItem);
        updateTasksLocalStorage();
        document.getElementById('new-task').value = '';  // Clear the input
    }
});

function updateTasksLocalStorage() {
    const tasks = [];
    document.querySelectorAll('#tasks li').forEach(task => {
        tasks.push(task.textContent);
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

document.addEventListener('DOMContentLoaded', () => {
    const savedTasks = JSON.parse(localStorage.getItem('tasks'));
    if (savedTasks) {
        savedTasks.forEach(taskText => {
            const listItem = document.createElement('li');
            listItem.textContent = taskText;
            document.getElementById('tasks').appendChild(listItem);
        });
    }
});

5.3 Técnicas Adicionales de JavaScript

Para mejorar aún más el sitio, considera agregar animaciones o transiciones con JavaScript para una experiencia de usuario más fluida, especialmente cuando los elementos entran o salen del DOM, o cuando el usuario interactúa con elementos de la interfaz.

Ejemplo: Añadiendo una Animación Simple

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
    button.addEventListener('mouseover', () => {
        button.style.transition = 'all 0.3s';
        button.style.transform = 'scale(1.1)';
    });
    button.addEventListener('mouseout', () => {
        button.style.transform = 'scale(1)';
    });
});

Al integrar estas características avanzadas, nuestro simple sitio web interactivo no solo se vuelve más funcional y personalizado, sino que también demuestra la aplicación de técnicas poderosas de JavaScript en escenarios del mundo real. Estas mejoras ayudarán a asegurar que el sitio sea atractivo y mantenga los datos del usuario de manera efectiva, proporcionando una experiencia de usuario más rica e interactiva.