Penterjemah Bahasa Mudah dengan API

Hari 8 daripada cabaran pengekodan #100harisofMiva dan saya mengusahakan model penterjemah mudah yang menterjemahkan bahasa kepada bahasa lain ?
Ia JS, ia ajaib✨?

? Dokumentasi Skrip Penterjemah Bahasa

Gambaran keseluruhan

Kod JavaScript ini direka untuk mencipta penterjemah bahasa yang suka bermain dan interaktif! Ia menggunakan API MyMemory untuk menterjemah teks antara bahasa yang berbeza dan membolehkan anda menukar bahasa, menyalin terjemahan, atau bahkan meminta teks itu dituturkan dengan kuat. ??

Ciri-ciri

• ? Pemilihan Bahasa: Pengguna boleh memilih daripada pelbagai bahasa, daripada Amharik hingga Zulu!
• ? Tukar Bahasa: Tukar dengan mudah antara bahasa sumber dan bahasa sasaran dengan satu klik butang.
• ? Text-to-Speech: Dengar teks asal atau terjemahan dalam bahasa yang dipilih.
• ? Salin ke Papan Klip: Salin teks asal atau terjemahan dengan satu klik.

Pecahan Kod

Data Bahasa

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

Objek ini mengandungi bahasa yang tersedia dan kod negara masing-masing. Contohnya, "en-GB": "Bahasa Inggeris" menggandingkan kod bahasa dengan namanya.

Dropdown Dinamik

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

Kod ini secara dinamik mengisi menu lungsur dengan semua bahasa yang disenaraikan dalam objek negara. Jatuh turun pertama lalai kepada bahasa Inggeris ("en-GB") dan yang kedua kepada Hindi ("hi-IN").

Pertukaran Bahasa

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

Mengklik ikon swap membolehkan pengguna menukar teks dan bahasa yang dipilih antara medan "dari" dan "kepada".

Terjemahan Masa Nyata

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

Apabila butang "Terjemah" diklik, teks dihantar ke MyMemory API dan teks terjemahan dipaparkan dalam medan "ke-teks". Sementara menunggu jawapan, pemegang tempat "Menterjemah..." ditunjukkan.

Teks-ke-Pertuturan & Salin

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

Bahagian ini mengendalikan fungsi Text-to-Speech dan salin:

• Ucapan: Memainkan teks dengan kuat dalam bahasa yang dipilih.
• Salin: Menyalin teks ke papan keratan.

Bagaimana Ia Berfungsi

1. Pilih Bahasa ?: Pilih bahasa anda daripada menu lungsur.
2. Taip atau Tampal Teks ✍️: Masukkan teks yang ingin anda terjemahkan.
3. Terjemah ?: Klik butang "Terjemah" dan saksikan keajaiban berlaku!
4. Tukar, Dengar atau Salin ???: Tukar bahasa, dengar terjemahan atau salin teks ke papan keratan anda.

Kebergantungan

• MyMemory API: Fungsi terjemahan dikuasakan oleh MyMemory API. Pastikan anda mempunyai sambungan internet yang aktif untuk membolehkannya berfungsi.

Potensi Peningkatan

• Pengesanan Auto Bahasa: Mengesan bahasa teks input secara automatik.
• Pengendalian Ralat Terperinci: Tingkatkan respons untuk ralat terjemahan atau kegagalan API.
• Terjemahan Berbilang: Tunjukkan terjemahan alternatif jika tersedia.

Berikut ialah pecahan langkah demi langkah tentang cara kod berfungsi dan fungsinya:

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

Atas ialah kandungan terperinci Penterjemah Bahasa Mudah dengan API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!