Jour 8 du défi de codage #100daysofMiva et j'ai travaillé sur un modèle de traducteur simple qui traduit une langue dans une autre ?
C'est JS, c'est magique✨ ?

? Documentation sur les scripts du traducteur de langue

Aperçu

Ce code JavaScript est conçu pour créer un traducteur de langue ludique et interactif ! Il utilise l'API MyMemory pour traduire du texte entre différentes langues et vous permet d'échanger des langues, de copier des traductions ou même de faire prononcer le texte à haute voix. ??

Caractéristiques

•  ? Sélection de la langue : Les utilisateurs peuvent choisir parmi un large éventail de langues, allant de l'amharique au zoulou !
•  ? Échange de langue : Basculez facilement entre les langues source et cible en un seul clic.
•  ? Synthèse vocale : Écoutez le texte original ou traduit dans la langue sélectionnée.
•  ? Copier dans le Presse-papiers : Copiez le texte original ou traduit en un seul clic.

Répartition du code

Données linguistiques

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

Cet objet contient les langues disponibles et leurs codes pays respectifs. Par exemple, "en-GB" : "English" associe le code de langue à son nom.

Listes déroulantes dynamiques

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

Ce code remplit dynamiquement les menus déroulants avec toutes les langues répertoriées dans l'objet country. La première liste déroulante est par défaut en anglais ("en-GB") et la seconde en hindi ("hi-IN").

Échange de langue

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

Cliquer sur l'icône d'échange permet aux utilisateurs d'échanger le texte et les langues sélectionnées entre les champs « de » et « à ».

Traduction en temps réel

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

Lorsque vous cliquez sur le bouton « Traduire », le texte est envoyé à l'API MyMemory et le texte traduit est affiché dans le champ « vers texte ». En attendant la réponse, un espace réservé "Traduction..." s'affiche.

Synthèse vocale et copie

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

Cette section gère les fonctionnalités de synthèse vocale et de copie :

• Discours : lit le texte à voix haute dans la langue sélectionnée.
• Copier : copie le texte dans le presse-papiers.

Comment ça marche

1. Sélectionner les langues ? : Choisissez vos langues dans les listes déroulantes.
2. Tapez ou collez du texte ✍️ : saisissez le texte que vous souhaitez traduire.
3. Traduire ? : Cliquez sur le bouton "Traduire" et regardez la magie opérer !
4. Échanger, écouter ou copier ??? : échangez des langues, écoutez la traduction ou copiez le texte dans votre presse-papiers.

Dépendances

• API MyMemory : la fonctionnalité de traduction est optimisée par l'API MyMemory. Assurez-vous de disposer d'une connexion Internet active pour que cela fonctionne.

Améliorations potentielles

• Détection automatique de la langue : détecte automatiquement la langue du texte saisi.
• Gestion avancée des erreurs : améliorez la réponse aux erreurs de traduction ou aux échecs de l'API.
• Traductions multiples : afficher des traductions alternatives lorsqu'elles sont disponibles.

Voici une présentation étape par étape du fonctionnement du code et de ce qu'il fait :

Étape 1 : Définition des langues disponibles

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

• Ce qu'il fait : cet objet contient des paires clé-valeur où la clé est un code langue-pays (comme "en-GB" pour l'anglais) et la valeur est le nom de la langue (comme "English" ).
• Objectif : ces données sont utilisées pour remplir les listes déroulantes de sélection de langue afin que les utilisateurs puissent choisir leurs langues source et cible.

Étape 2 : Sélection des éléments 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"),

• Ce qu'il fait : ce code sélectionne divers éléments du document HTML et les stocke dans des variables pour un accès facile ultérieurement.
  • fromText et toText : zones de texte dans lesquelles les utilisateurs saisissent du texte et voient la traduction.
  • exchageIcon : L'icône utilisée pour échanger les langues et le texte.
  • selectTag : les menus déroulants pour sélectionner les langues.
  • icônes : icônes pour les fonctions de copie et de parole.
  • TranslateBtn : Le bouton qui déclenche la traduction.

Étape 3 : Remplir les listes déroulantes de langues

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

• Ce qu'il fait : Cette boucle parcourt l'objet country et ajoute chaque langue en tant qu'option dans les listes déroulantes de sélection de langue.
  • Si la liste déroulante est la première (id == 0), l'anglais ("en-GB") est sélectionné par défaut.
  • Si la liste déroulante est la deuxième (id == 1), l'hindi ("hi-IN") est sélectionné par défaut.

Étape 4 : Échanger les langues et le texte

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

• Ce qu'elle fait : Lorsque vous cliquez sur l'icône d'échange, cette fonction permute le texte entre les zones de texte « de » et « à » ainsi que les langues sélectionnées.
  • tempText conserve temporairement le texte original du champ "from-text".
  • tempLang conserve temporairement la langue d'origine de la première liste déroulante.
  • Le "from-text" est ensuite remplacé par le "to-text", et vice versa. Les langues sélectionnées sont également permutées.

Étape 5 : Effacer le texte traduit

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

• Ce qu'elle fait : Si l'utilisateur supprime tout le texte du champ « à partir du texte », cette fonction efface également automatiquement le champ « vers le texte ».
• Objectif : garantit que si le texte saisi est effacé, la traduction est également effacée, évitant ainsi toute confusion.

Étape 6 : Traduction du texte

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

• Ce qu'il fait : Lorsque vous cliquez sur le bouton "Traduire", cette fonction :
  1. Extrait le texte du champ "from-text".
  2. Identifie les langues sélectionnées dans les listes déroulantes.
  3. Envoie une requête à l'API MyMemory avec le texte et les langues sélectionnées.
  4. Reçoit la traduction de l'API et l'affiche dans le champ "to-text".
  5. Met à jour le texte de l'espace réservé en attendant la traduction pour indiquer que le processus est en cours.

Résumé

Le script permet aux utilisateurs de traduire du texte entre différentes langues avec une interface dynamique et interactive. Les utilisateurs peuvent sélectionner des langues, saisir leur texte, le traduire en un clic, échanger des langues et du texte, entendre la traduction prononcée à haute voix ou la copier dans leur presse-papiers.

Amusez-vous à jouer avec différentes langues et rendez votre parcours de traduction amusant et interactif ! ?? Vers le prochain ?✌?✨

Découvrez-le ici
https://app.marvelly.com.ng/100daysofMiva/day-8/

Code source
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_lingual_translator