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 wurde entwickelt, um einen spielerischen, interaktiven Sprachübersetzer zu 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“: „English“ 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 auf die Antwort gewartet wird, wird ein Platzhalter „Wird übersetzt...“ angezeigt.

Text-to-Speech & Copy

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

Dieser Abschnitt behandelt die Text-to-Speech- und Kopierfunktionen:

• 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-Anleitung, wie der Code funktioniert und was er tut:

Schritt 1: Verfügbare Sprachen definieren

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

• Was es tut: Dieses Objekt enthält Schlüssel-Wert-Paare, wobei der Schlüssel ein Sprach-Ländercode ist (z. B. „en-GB“ für Englisch) und der Wert der Name der Sprache ist (z. B. „Englisch“). ).
• Zweck: Diese Daten werden verwendet, um die Dropdown-Listen zur Sprachauswahl zu füllen, damit Benutzer ihre Ausgangs- und Zielsprachen auswählen können.

Schritt 2: Auswählen von DOM-Elementen

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

• Was es tut: Dieser Code wählt verschiedene Elemente aus dem HTML-Dokument aus und speichert sie in Variablen für den späteren einfachen Zugriff.
  • fromText und toText: Textbereiche, in denen Benutzer Text eingeben und die Übersetzung sehen.
  • ExchangeIcon: Das Symbol zum Austauschen von Sprachen und Text.
  • selectTag: Die Dropdown-Menüs zur Auswahl von Sprachen.
  • Icons: Icons für Kopier- und Sprachfunktionen.
  • TranslateBtn: Die Schaltfläche, die die Übersetzung auslöst.

Schritt 3: Sprach-Dropdown-Listen füllen

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

• Was es tut: Diese Schleife durchläuft das Länderobjekt und fügt jede Sprache als Option in den Dropdown-Listen zur Sprachauswahl hinzu.
  • Wenn das Dropdown-Menü das erste ist (id == 0), ist standardmäßig Englisch („en-GB“) ausgewählt.
  • Wenn es sich bei der Dropdown-Liste um die zweite handelt (id == 1), ist standardmäßig Hindi („hi-IN“) ausgewählt.

Schritt 4: Sprachen und Text austauschen

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

• Was es tut: Wenn auf das Austauschsymbol geklickt wird, tauscht diese Funktion den Text zwischen den Textbereichen „von“ und „bis“ sowie den ausgewählten Sprachen aus.
  • tempText speichert vorübergehend den Originaltext aus dem „From-Text“-Feld.
  • tempLang speichert vorübergehend die Originalsprache aus dem ersten Dropdown.
  • Der „Von-Text“ wird dann durch den „Bis-Text“ ersetzt und umgekehrt. Die ausgewählten Sprachen werden ebenfalls vertauscht.

Schritt 5: Übersetzten Text löschen

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

• Was es tut: Wenn der Benutzer den gesamten Text aus dem Feld „Von-Text“ löscht, löscht diese Funktion automatisch auch das Feld „Bis-Text“.
• Zweck: Stellt sicher, dass beim Löschen des Eingabetextes auch die Übersetzung gelöscht wird, um Verwirrung zu vermeiden.

Schritt 6: Text übersetzen

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

• Was es tut: Wenn auf die Schaltfläche „Übersetzen“ geklickt wird, führt diese Funktion Folgendes aus:
  1. Extrahiert den Text aus dem Feld „From-Text“.
  2. Identifiziert die ausgewählten Sprachen aus den Dropdowns.
  3. Sendet eine Anfrage mit dem Text und den ausgewählten Sprachen an die MyMemory-API.
  4. Erhält die Übersetzung von der API und zeigt sie im „to-text“-Feld an.
  5. Aktualisiert den Platzhaltertext, während auf die Übersetzung gewartet wird, um anzuzeigen, dass der Prozess noch läuft.

Zusammenfassung

Das Skript ermöglicht Benutzern die Übersetzung von Text zwischen verschiedenen Sprachen mit einer dynamischen und interaktiven Oberfläche. Benutzer können Sprachen auswählen, ihren Text eingeben, ihn mit einem Klick übersetzen, Sprachen und Text austauschen, die Übersetzung laut vorlesen lassen oder sie in ihre Zwischenablage kopieren.

Viel Spaß beim Spielen mit verschiedenen Sprachen und gestalten Sie Ihre Übersetzungsreise unterhaltsam und interaktiv! ?? Zum nächsten ?✌?✨

Schau es dir hier an
https://app.marvelly.com.ng/100daysofMiva/day-8/

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