4. Implementación de Funcionalidades Principales

Ahora que hemos establecido una base sólida con una interfaz de usuario bien diseñada, nos enfocaremos en implementar las funcionalidades principales de nuestro sitio web interactivo simple. Esta sección profundiza en la adición de elementos interactivos y la manipulación dinámica del contenido usando JavaScript. Cubriremos cómo implementar el Cargador de Contenido Dinámico, el Formulario Interactivo, el Interruptor de Tema y la Lista de Tareas, asegurando que cada característica no solo funcione correctamente sino que también mejore la experiencia general del usuario.

4.1 Implementación de la Interactividad

1. Cargador de Contenido Dinámico

Comenzaremos permitiendo a los usuarios cambiar el contenido mostrado en una sección de la página según su selección de un menú o conjunto de botones.

Configuración de HTML:

<select id="contentSelector">
    <option value="content1">Content 1</option>
    <option value="content2">Content 2</option>
    <option value="content3">Content 3</option>
</select>
<div id="contentDisplay">Select an option to see the content.</div>

JavaScript:

document.getElementById('contentSelector').addEventListener('change', function() {
    const selectedValue = this.value;
    const displayDiv = document.getElementById('contentDisplay');
    displayDiv.innerHTML = `<p>You selected ${selectedValue}. Here is some more information about it.</p>`;
});

Este script escucha los cambios en el menú desplegable contentSelector y actualiza el div contentDisplay con un mensaje relacionado con la opción seleccionada.

2. Formulario Interactivo

A continuación, agrega validación para asegurarse de que todos los campos estén llenos antes de que el formulario pueda ser enviado.

Configuración HTML:

JavaScript:

document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();  // Prevent the form from submitting traditionally
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;

    if (!name || !email || !message) {
        alert('Please fill in all fields.');
    } else {
        alert('Thank you for your message!');
        // Here you could also add an AJAX request to send the data to a server
    }
});

Alternador de Tema

Crea un botón simple para alternar entre los temas claro y oscuro.

JavaScript:

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

CSS:

/* Add to styles.css */
.dark-theme {
    background: #333;
    color: #fff;
}

4. Lista de Tareas

Permite a los usuarios añadir, marcar como completadas o eliminar tareas de una lista.

Configuración HTML:

JavaScript:

document.getElementById('add-task').addEventListener('click', function() {
    const newTask = document.getElementById('new-task').value;
    if (newTask) {
        const listItem = document.createElement('li');
        listItem.textContent = newTask;
        listItem.addEventListener('click', function() {
            this.classList.toggle('completed');
        });
        document.getElementById('tasks').appendChild(listItem);
        document.getElementById('new-task').value = '';  // Clear the input after adding
    } else {
        alert('Please enter a task.');
    }
});

/* CSS for completed tasks */
.completed {
    text-decoration: line-through;
}

Estos ejemplos ilustran cómo interactuar dinámicamente con el DOM para crear una aplicación web receptiva y comprometida con el usuario. Al implementar estas características, no solo aplicarás los conceptos básicos de JavaScript y manipulación del DOM discutidos en el libro, sino que también crearás un proyecto práctico y funcional que solidifica tu comprensión de estas habilidades cruciales para el desarrollo web.