Traducteur de langage simple avec API

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.
• ? Text-to-Speech : É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 alimentée par l'API MyMemory. Assurez-vous d'avoir 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 : affichez des traductions alternatives lorsqu'elles sont disponibles.

Voici un aperçu étape par étape du fonctionnement du code et de ce qu'il fait :

Step 1: Defining Available Languages

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

• What it does: This object contains key-value pairs where the key is a language-country code (like "en-GB" for English) and the value is the name of the language (like "English").
• Purpose: This data is used to populate the language selection dropdowns so users can choose their source and target languages.

Step 2: Selecting DOM Elements

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"),

• What it does: This code selects various elements from the HTML document and stores them in variables for easy access later.
  • fromText and toText: Text areas where users input text and see the translation.
  • exchageIcon: The icon used to swap languages and text.
  • selectTag: The dropdown menus for selecting languages.
  • icons: Icons for copy and speech functions.
  • translateBtn: The button that triggers the translation.

Step 3: Populating Language Dropdowns

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 = `<option ${selected} value="${country_code}">${countries[country_code]}</option>`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• What it does: This loop goes through the countries object and adds each language as an option in the language selection dropdowns.
  • If the dropdown is the first one (id == 0), English ("en-GB") is selected by default.
  • If the dropdown is the second one (id == 1), Hindi ("hi-IN") is selected by default.

Step 4: Swapping Languages and Text

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

• What it does: When the swap icon is clicked, this function swaps the text between the "from" and "to" text areas as well as the selected languages.
  • tempText temporarily holds the original text from the "from-text" field.
  • tempLang temporarily holds the original language from the first dropdown.
  • The "from-text" is then replaced with the "to-text", and vice versa. The selected languages are also swapped.

Step 5: Clearing Translated Text

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

• What it does: If the user deletes all the text from the "from-text" field, this function automatically clears the "to-text" field as well.
• Purpose: Ensures that if the input text is cleared, the translation is cleared too, preventing confusion.

Step 6: Translating Text

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

• What it does: When the "Translate" button is clicked, this function:
  1. Extracts the text from the "from-text" field.
  2. Identifies the selected languages from the dropdowns.
  3. Sends a request to the MyMemory API with the text and selected languages.
  4. Receives the translation from the API and displays it in the "to-text" field.
  5. Updates the placeholder text while waiting for the translation to indicate that the process is ongoing.

Summary

The script allows users to translate text between different languages with a dynamic and interactive interface. Users can select languages, type in their text, translate it with a click, swap languages and text, hear the translation spoken aloud, or copy it to their clipboard.

Enjoy playing with different languages and make your translation journey fun and interactive! ?? Unto the next ?✌?✨

Check it out here
https://app.marvelly.com.ng/100daysofMiva/day-8/

Source code
https://github.com/Marvellye/100daysofMiva/blob/main/Projects%2FDay_8-Simple_language_translator

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!