📖 English Dictionary Application

Una aplicación web moderna para buscar definiciones en inglés, con ejemplos de uso y pronunciación. ¡Aprende nuevo vocabulario de manera interactiva!

🚀 Características Principales

• 🔍 Búsqueda instantánea de palabras
• 📚 Definiciones detalladas con clasificación gramatical
• 💡 Ejemplos de uso (click para mostrar/ocultar)
• 🔊 Pronunciación con síntesis de voz
• 🎨 Diseño responsivo con animaciones suaves
• 🛒 Manejo de errores elegante
• ⚡ Actualización en tiempo real

🛠 Tecnologías Utilizadas

• Frontend: HTML5, CSS3, JavaScript ES6+
• APIs:
  • Free Dictionary API (Para definiciones)
  • Web Speech API (Para pronunciación)
• Dependencias:
  • Font Awesome (Iconos)
• Hosting: Compatible con GitHub Pages

🖥 Funcionamiento Técnico

🔑 Fragmentos de Código Destacados

1. Búsqueda Asíncrona (JavaScript)

async function fetchDictionaryData(word) {
    // Ocultar botón de audio inicialmente
    audioButton.style.display = "none";
    // Obtener elementos del DOM
    const errorMessage = document.getElementById("error-message");
    const searchedWordSpan = document.getElementById("searched-word");

    try {
        // Ocultar mensaje de error
        errorMessage.classList.add("error-hidden");

        // Obtener datos de la API
        const response = await fetch(
            `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
        );

        // Manejar error 404 (palabra no encontrada)
        if (response.status === 404) {
            // Mostrar contenedor de resultados
            resultsContainer.style.display = "block";
            // Mostrar mensaje de error
            errorMessage.classList.remove("error-hidden");
            searchedWordSpan.textContent = word;
            // Limpiar resultados anteriores
            wordTitle.textContent = "";
            wordDescription.innerHTML = "";
            audioButton.style.display = "none";
            return;
        }

        // Verificar otros errores HTTP
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        // Parsear datos JSON
        const data = await response.json();
        // Mostrar resultados
        displayResult(data);
    } catch (error) {
        // Manejar errores de red
        if (error.message.includes("Failed to fetch")) {
            alert("Network error. Check your internet connection.");
        } else {
            console.error("Error fetching dictionary data:", error);
            alert("An unexpected error occurred. Try again later.");
        }
    }
}

Conceptos Clave:

• Async/Await: Para operaciones asíncronas con la API

• DOM Manipulation Directa:

  • classList.add/remove para mostrar/ocultar errores

  • textContent e innerHTML para actualizar contenido

• Manejo de Errores Granular:

  • Diferenciación entre error 404 y otros errores

  • Mensajes específicos para problemas de red

2. Renderizado Dinámico de Resultados

function displayResult(data) {
    // Mostrar contenedor de resultados
    resultsContainer.style.display = "block";
    // Establecer título de la palabra
    wordTitle.textContent = data[0].word;

    // Verificar si hay audio disponible
    const hasAudio = data[0].phonetics?.some((p) => p.audio);
    // Mostrar/ocultar botón de audio
    audioButton.style.display = hasAudio ? "inline-block" : "none";

    // Extraer datos de la palabra
    const wordData = data[0];

    // Generar HTML dinámico para definiciones
    wordDescription.innerHTML = `
    <ul class="meanings-list">
        ${wordData.meanings
            .map(
                (meaning) => `
            <li class="meaning-item">
                <div class="part-of-speech">
                    <strong>${meaning.partOfSpeech}</strong>
                </div>
                <ul class="definitions-list">
                    ${meaning.definitions
                        .map(
                            (def, index) => `
                        <li class="definition-item">
                            <span class="definition-number">${index + 1}.</span>
                            ${def.definition}
                            ${def.example
                                    ? `
                                <div class="toggle-examples" onclick="toggleExample(this)">[Show example]</div>
                                <div class="example hidden">${def.example}</div>
                                `
                                    : ""
                                }
                        </li>
                    `
                        )
                        .join("")}
                </ul>
            </li>
        `
            )
            .join("")}
    </ul>
`;
}

Técnicas Avanzadas:

• Template Strings Anidados: Para estructura HTML compleja

• Métodos Array (map, join): Transformación de datos de la API

• Manejo Condicional:

  • Display condicional de ejemplos (${def.example ? ... : ""})

  • Visibilidad dinámica del botón de audio

• Event Handling Inline: onclick="toggleExample(this)"

3. Interactividad con el DOM

// Sistema de toggle para ejemplos
function toggleExample(element) {
    // Obtener el elemento ejemplo siguiente
    const example = element.nextElementSibling;
    // Alternar clase hidden
    example.classList.toggle("hidden");
    // Cambiar texto del botón
    element.textContent = example.classList.contains("hidden") 
        ? "[Show example]" 
        : "[Hide example]";
}

// Integración de Web Speech API
function speak(word) {
    // Crear objeto de síntesis de voz
    const speech = new SpeechSynthesisUtterance(word);
    // Configurar idioma
    speech.lang = "en-US";
    // Configurar velocidad
    speech.rate = 1;
    // Configurar tono
    speech.pitch = 1;
    // Configurar volumen
    speech.volume = 2;
    // Reproducir voz
    window.speechSynthesis.speak(speech);
}

Patrones de Diseño:

• Delegación de Eventos: Manejo dinámico de clicks en ejemplos

• API del Navegador: Uso de SpeechSynthesisUtterance para pronunciación

• CSS State Management: Uso de clases hidden para mostrar/ocultar contenido

🎨 Estructura CSS Destacada

/* Animación de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Diseño responsive */
.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Sistema de theming */
.definitions-list {
    margin-left: 20px;
    padding-left: 15px;
    border-left: 3px solid #0F7173;
}

.definition-item {
    margin-bottom: 10px;
    line-height: 1.6;
}

Principios de Diseño:

• Mobile-First: Flexbox para layouts adaptables

• Animaciones Performantes: Uso de transform/opacity para smooth transitions

• BEM Implícito: Convención de nombres para clases (.definition-item > .example)

🧠 Conceptos Clave Explicados

Async/Await 🔄

Uso moderno de promesas para operaciones asíncronas. Simplifica el flujo de la API mediante espera controlada de respuestas, evitando el "callback hell". Permite manejar errores con try/catch de manera estructurada.

DOM Manipulation Directa ✋

Control dinámico de la interfaz mediante JavaScript:

• classList.add/remove: Alterna clases CSS para mostrar/ocultar elementos sin recargar la página.

• textContent/innerHTML: Actualiza contenido textual vs. estructural de forma segura y eficiente.

Manejo de Errores Granular 🚨

Diferenciación inteligente de fallos:

• 404: Detecta palabras no encontradas mostrando un mensaje contextual.

• Errores de red: Alerta específicamente sobre problemas de conectividad, mejorando la UX.

💡 Técnicas Avanzadas Detalladas

Template Strings Anidados 🧩

Construcción de HTML semántico mediante interpolación:

Permite crear estructuras complejas con múltiples niveles de anidación, manteniendo legibilidad del código mediante backticks (`).

Métodos Array (map, join) 🧬

Transformación de datos API a HTML:

• map: Convierte objetos JSON en elementos listos para renderizar.

• join: Optimiza performance al concatenar strings evitando múltiples repintados del DOM.

Manejo Condicional ⚖️

Lógica de presentación adaptativa:

• Ejemplos: Muestra controles interactivos solo cuando existen datos relevantes.

• Audio: Oculta el botón de pronunciación si no hay archivos disponibles.

Event Handling Inline 🎯

Registro directo de listeners en elementos dinámicos:

Solución práctica para elementos generados en runtime, aunque limita la delegación centralizada de eventos.

🏣 Patrones de Diseño Implementados

Delegación de Eventos 🕹️

Manejo eficiente de interacciones dinámicas:

Permite que elementos creados posteriormente (como ejemplos) respondan a clicks sin necesidad de re-registrar listeners.

API del Navegador 📢

Integración con funcionalidades nativas:

SpeechSynthesisUtterance aprovecha las capacidades TTS del navegador para pronunciación instantánea sin dependencias externas.

CSS State Management 🎛️

Control visual mediante clases:

El sistema de clases hidden/error-hiddensincroniza estados UI/UX manteniendo la lógica de presentación en CSS donde corresponde.

📦 Instalación y Uso

Requisitos Previos

• Navegador moderno (Chrome 80+, Firefox 75+)

• Conexión a Internet

Pasos para Ejecutar

1. Clona el repositorio:

   git clone https://github.com/Seb-RM/Javascript_Html-Css-Dictionary-App.git
   

2. Abre index.html en tu navegador

3. ¡Empieza a buscar palabras!