This content originally appeared on DEV Community and was authored by Ezekiel Marvellous
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
- Select Languages 🌍: Choose your languages from the dropdowns.
- Type or Paste Text ✍️: Input the text you want to translate.
- Translate 🚀: Click the "Translate" button and watch the magic happen!
- 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.
-
fromTextandtoText: 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
countriesobject 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.
- If the dropdown is the first one (
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.
-
tempTexttemporarily holds the original text from the "from-text" field. -
tempLangtemporarily 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:
- Extracts the text from the "from-text" field.
- Identifies the selected languages from the dropdowns.
- Sends a request to the MyMemory API with the text and selected languages.
- Receives the translation from the API and displays it in the "to-text" field.
- 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
This content originally appeared on DEV Community and was authored by Ezekiel Marvellous
Ezekiel Marvellous | Sciencx (2024-08-28T20:30:37+00:00) Simple Language Translator with API. Retrieved from https://www.scien.cx/2024/08/28/simple-language-translator-with-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.