Day 8 of #100daysofMiva coding challenge and I worked on a simple translator model that translates a language to another 😂

It's JS, it's magic✨🥲

🌍 Language Translator Script Documentation

Overview

This JavaScript code is designed to create a playful, interactive language translator! It utilizes the MyMemory API to translate text between different languages and allows you to swap languages, copy translations, or even have the text spoken aloud. 🌐🔄

Features

• 
  🌐 Language Selection: Users can choose from a wide array of languages, ranging from Amharic to Zulu!


• 
  🔄 Language Swap: Easily swap between the source and target languages with a click of a button.


• 
  💬 Text-to-Speech: Listen to the original or translated text in the selected language.


• 
  📋 Copy to Clipboard: Copy the original or translated text with a single click.

Code Breakdown

Language Data

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

This object contains the available languages and their respective country codes. For example, "en-GB": "English" pairs the language code with its name.

Dynamic Dropdowns

selectTag.forEach((tag, id) => {

    /*...*/

});

This code dynamically populates the dropdown menus with all the languages listed in the countries object. The first dropdown defaults to English ("en-GB"), and the second to Hindi ("hi-IN").

Language Swap

exchageIcon.addEventListener("click", () => {

    /*...*/

});

Clicking the swap icon allows users to swap the text and selected languages between the "from" and "to" fields.

Real-Time Translation

translateBtn.addEventListener("click", () => {

    /*...*/

});

When the "Translate" button is clicked, the text is sent to the MyMemory API, and the translated text is displayed in the "to-text" field. While waiting for the response, a "Translating..." placeholder is shown.

Text-to-Speech & Copy

icons.forEach(icon => {

    /*...*/

});

This section handles the Text-to-Speech and copy functionalities:

• 
  Speech: Plays the text aloud in the selected language.


• 
  Copy: Copies the text to the clipboard.

How It Works

1. 
   Select Languages 🌍: Choose your languages from the dropdowns.


2. 
   Type or Paste Text ✍️: Input the text you want to translate.


3. 
   Translate 🚀: Click the "Translate" button and watch the magic happen!


4. 
   Swap, Listen, or Copy 🔄🎧📋: Swap languages, listen to the translation, or copy the text to your clipboard.

Dependencies

• 
  MyMemory API: The translation functionality is powered by the MyMemory API. Ensure you have an active internet connection for it to work.

Potential Enhancements

• 
  Language Auto-Detection: Automatically detect the language of the input text.


• 
  Advanced Error Handling: Improve the response for translation errors or API failures.


• 
  Multiple Translations: Show alternative translations where available.

Here’s a step-by-step breakdown of how the code works and what it does:

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