¿Día 8 del desafío de codificación #100daysofMiva y trabajé en un modelo de traductor simple que traduce un idioma a otro?
¿Es JS, es mágico✨?

? Documentación del script del traductor de idiomas

Descripción general

¡Este código JavaScript está diseñado para crear un traductor de idiomas interactivo y divertido! Utiliza la API MyMemory para traducir texto entre diferentes idiomas y le permite intercambiar idiomas, copiar traducciones o incluso hablar el texto en voz alta. ??

Características

• ? Selección de idioma: ¡Los usuarios pueden elegir entre una amplia gama de idiomas, desde amárico hasta zulú!
• ? Intercambio de idioma: Cambie fácilmente entre el idioma de origen y el de destino con solo hacer clic en un botón.
• ? Texto a voz: Escuche el texto original o traducido en el idioma seleccionado.
• ? Copiar al Portapapeles: Copia el texto original o traducido con un solo clic.

Desglose del código

Datos de idioma

const countries = { /*...*/ } 

Este objeto contiene los idiomas disponibles y sus respectivos códigos de país. Por ejemplo, "en-GB": "English" combina el código de idioma con su nombre.

Menús desplegables dinámicos

selectTag.forEach((tag, id) => {
    /*...*/
});

Este código completa dinámicamente los menús desplegables con todos los idiomas enumerados en el objeto de países. El primer menú desplegable está predeterminado en inglés ("en-GB") y el segundo en hindi ("hi-IN").

Intercambio de idioma

exchageIcon.addEventListener("click", () => {
    /*...*/
});

Hacer clic en el ícono de intercambio permite a los usuarios intercambiar el texto y los idiomas seleccionados entre los campos "desde" y "hasta".

Traducción en tiempo real

translateBtn.addEventListener("click", () => {
    /*...*/
});

Cuando se hace clic en el botón "Traducir", el texto se envía a MyMemory API y el texto traducido se muestra en el campo "a texto". Mientras espera la respuesta, se muestra un marcador de posición "Traduciendo...".

Texto a voz y copia

icons.forEach(icon => {
    /*...*/
});

Esta sección maneja las funcionalidades de texto a voz y copia:

• Voz: Reproduce el texto en voz alta en el idioma seleccionado.
• Copiar: Copia el texto al portapapeles.

Cómo funciona

1. Seleccionar idiomas ?: Elige tus idiomas en los menús desplegables.
2. Escriba o pegue texto ✍️: ingrese el texto que desea traducir.
3. Traducir ?: ¡Haz clic en el botón "Traducir" y observa cómo sucede la magia!
4. Intercambiar, escuchar o copiar ???: intercambia idiomas, escucha la traducción o copia el texto en tu portapapeles.

Dependencias

• MyMemory API: la funcionalidad de traducción funciona con MyMemory API. Asegúrate de tener una conexión a Internet activa para que funcione.

Mejoras potenciales

• Detección automática de idioma: Detecta automáticamente el idioma del texto ingresado.
• Manejo avanzado de errores: mejora la respuesta ante errores de traducción o fallas de API.
• Traducciones múltiples: muestra traducciones alternativas cuando estén disponibles.

Aquí hay un desglose paso a paso de cómo funciona el código y qué hace:

Paso 1: Definición de idiomas disponibles

const countries = { /*...*/ }

• Qué hace: Este objeto contiene pares clave-valor donde la clave es un código de idioma-país (como "en-GB" para inglés) y el valor es el nombre del idioma (como "English" ).
• Propósito: Estos datos se utilizan para completar los menús desplegables de selección de idioma para que los usuarios puedan elegir sus idiomas de origen y de destino.

Paso 2: Seleccionar elementos DOM

const fromText = document.querySelector(".from-text"),
      toText = document.querySelector(".to-text"),
      exchageIcon = document.querySelector(".exchange"),
      selectTag = document.querySelectorAll("select"),
      icons = document.querySelectorAll(".row i");
      translateBtn = document.querySelector("button"),

• Qué hace: Este código selecciona varios elementos del documento HTML y los almacena en variables para acceder fácilmente más adelante.
  • fromText y toText: áreas de texto donde los usuarios ingresan texto y ven la traducción.
  • exchageIcon: el icono utilizado para intercambiar idiomas y texto.
  • selectTag: Los menús desplegables para seleccionar idiomas.
  • iconos: Íconos para funciones de copia y voz.
  • traducirBtn: El botón que activa la traducción.

Paso 3: Completar menús desplegables de idiomas

selectTag.forEach((tag, id) => {
    for (let country_code in countries) {
        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
        let option = `${countries[country_code]}`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• Qué hace: Este bucle recorre el objeto de países y agrega cada idioma como una opción en los menús desplegables de selección de idioma.
  • Si el menú desplegable es el primero (id == 0), se selecciona inglés ("en-GB") de forma predeterminada.
  • Si el menú desplegable es el segundo (id == 1), se selecciona hindi ("hi-IN") de forma predeterminada.

Paso 4: Intercambiar idiomas y texto

exchageIcon.addEventListener("click", () => {
    let tempText = fromText.value,
        tempLang = selectTag[0].value;
    fromText.value = toText.value;
    toText.value = tempText;
    selectTag[0].value = selectTag[1].value;
    selectTag[1].value = tempLang;
});

• Qué hace: Cuando se hace clic en el ícono de intercambio, esta función intercambia el texto entre las áreas de texto "desde" y "hasta", así como los idiomas seleccionados.
  • tempText retiene temporalmente el texto original del campo "from-text".
  • tempLang mantiene temporalmente el idioma original del primer menú desplegable.
  • El "texto de origen" se reemplaza por el "texto de destino" y viceversa. Los idiomas seleccionados también se intercambian.

Paso 5: Borrar el texto traducido

fromText.addEventListener("keyup", () => {
    if(!fromText.value) {
        toText.value = "";
    }
});

• Qué hace: Si el usuario elimina todo el texto del campo "desde texto", esta función también borra automáticamente el campo "a texto".
• Propósito: Garantiza que si se borra el texto ingresado, la traducción también se borra, evitando confusiones.

Paso 6: Traducir texto

translateBtn.addEventListener("click", () => {
    let text = fromText.value.trim(),
        translateFrom = selectTag[0].value,
        translateTo = selectTag[1].value;
    if(!text) return;
    toText.setAttribute("placeholder", "Translating...");
    let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
    fetch(apiUrl).then(res => res.json()).then(data => {
        toText.value = data.responseData.translatedText;
        data.matches.forEach(data => {
            if(data.id === 0) {
                toText.value = data.translation;
            }
        });
        toText.setAttribute("placeholder", "Translation");
    });
});

• Qué hace: Cuando se hace clic en el botón "Traducir", esta función:
  1. Extrae el texto del campo "from-text".
  2. Identifica los idiomas seleccionados de los menús desplegables.
  3. Envía una solicitud a MyMemory API con el texto y los idiomas seleccionados.
  4. Recibe la traducción de la API y la muestra en el campo "a texto".
  5. Actualiza el texto del marcador de posición mientras espera que la traducción indique que el proceso está en curso.

Resumen

El script permite a los usuarios traducir texto entre diferentes idiomas con una interfaz dinámica e interactiva. Los usuarios pueden seleccionar idiomas, escribir su texto, traducirlo con un clic, intercambiar idiomas y texto, escuchar la traducción en voz alta o copiarla a su portapapeles.

¡Disfruta jugando con diferentes idiomas y haz que tu viaje de traducción sea divertido e interactivo! ?? ¿Hasta el próximo ?✌?✨

Compruébalo aquí
https://app.marvelly.com.ng/100daysofMiva/day-8/

Código fuente
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_language_translator