Einfacher Sprachübersetzer mit API

Tag 8 der #100daysofMiva Coding Challenge und ich habe an einem einfachen Übersetzermodell gearbeitet, das eine Sprache in eine andere übersetzt?
Es ist JS, es ist Magie✨?

? Dokumentation zum Sprachübersetzer-Skript

Überblick

Dieser JavaScript-Code soll einen spielerischen, interaktiven Sprachübersetzer erstellen! Es nutzt die MyMemory-API, um Text zwischen verschiedenen Sprachen zu übersetzen und ermöglicht Ihnen, Sprachen auszutauschen, Übersetzungen zu kopieren oder sich den Text sogar laut vorlesen zu lassen. ??

---

Merkmale

• ? Sprachauswahl:Benutzer können aus einer breiten Palette von Sprachen wählen, von Amharisch bis Zulu!
• ? Sprachwechsel: Wechseln Sie einfach per Knopfdruck zwischen der Ausgangs- und der Zielsprache.
• ? Text-to-Speech: Hören Sie sich den Original- oder übersetzten Text in der ausgewählten Sprache an.
• ? In die Zwischenablage kopieren: Kopieren Sie den Original- oder übersetzten Text mit einem einzigen Klick.

---

Code-Aufschlüsselung

Sprachdaten

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

Dieses Objekt enthält die verfügbaren Sprachen und ihre jeweiligen Ländercodes. Beispiel: „en-GB“: „Englisch“ verbindet den Sprachcode mit seinem Namen.

Dynamische Dropdowns

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

Dieser Code füllt die Dropdown-Menüs dynamisch mit allen im Länderobjekt aufgeführten Sprachen. Das erste Dropdown-Menü ist standardmäßig auf Englisch („en-GB“) und das zweite auf Hindi („hi-IN“) eingestellt.

Sprachtausch

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

Durch Klicken auf das Austauschsymbol können Benutzer den Text und die ausgewählten Sprachen zwischen den Feldern „von“ und „bis“ austauschen.

Echtzeitübersetzung

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

Wenn auf die Schaltfläche „Übersetzen“ geklickt wird, wird der Text an die MyMemory-API gesendet und der übersetzte Text wird im Feld „In Text“ angezeigt. Während Sie auf die Antwort warten, wird ein Platzhalter „Übersetzt …“ angezeigt.

Text-to-Speech & Copy

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

In diesem Abschnitt werden die Text-to-Speech- und Kopierfunktionen behandelt:

• Sprache: Spielt den Text laut in der ausgewählten Sprache ab.
• Kopieren: Kopiert den Text in die Zwischenablage.

---

Wie es funktioniert

1. Sprachen auswählen ?: Wählen Sie Ihre Sprachen aus den Dropdown-Listen aus.
2. Text eingeben oder einfügen ✍️: Geben Sie den Text ein, den Sie übersetzen möchten.
3. Übersetzen ?: Klicken Sie auf die Schaltfläche „Übersetzen“ und beobachten Sie, wie die Magie geschieht!
4. Austauschen, Anhören oder Kopieren ???: Tauschen Sie Sprachen aus, hören Sie sich die Übersetzung an oder kopieren Sie den Text in Ihre Zwischenablage.

---

Abhängigkeiten

• MyMemory API: Die Übersetzungsfunktionalität wird von der MyMemory API unterstützt. Stellen Sie sicher, dass Sie über eine aktive Internetverbindung verfügen, damit es funktioniert.

---

Mögliche Verbesserungen

• Automatische Spracherkennung: Erkennt automatisch die Sprache des Eingabetextes.
• Erweiterte Fehlerbehandlung: Verbessern Sie die Reaktion bei Übersetzungsfehlern oder API-Fehlern.
• Mehrere Übersetzungen: Alternative Übersetzungen anzeigen, sofern verfügbar.

---

Hier ist eine Schritt-für-Schritt-Aufschlüsselung, wie der Code funktioniert und was er tut:

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

Das obige ist der detaillierte Inhalt vonEinfacher Sprachübersetzer mit API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!