Language Translator | HTML, CSS & JavaScript

Language Translator with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #28

Project Overview

The Language Translator is a beginner-friendly project built with HTML, CSS, and JavaScript that allows users to translate text between different languages. This project uses MyMemory Translation API and sends the entered text along with the selected source and target languages. Users can enter text into the input area and choose languages such as English, Hindi, French, Spanish, or German from the dropdown menus.

Additionally, the project validates empty input and shows a loading message while the translation request is running. It also handles failed translations and API errors with clear messages. Therefore, this project gives beginners practical experience with API integration, fetch(), query parameters, JSON responses, and dynamically updating form elements.

Key Features

Text Translation: Users can enter text and translate it from one language to another using the available language options. The translated result appears directly in the output field.
Multiple Languages: The project provides English, Hindi, French, Spanish, and German as language choices. Therefore, users can experiment with different language combinations.
MyMemory API Integration: It uses MyMemory Translation API to process translation requests which allows it to use an external translation service instead of storing translations locally.
Source Language Selection: Users can select the language of the original text from the fromLang dropdown. The selected value becomes part of the API request.
Target Language Selection: The toLang dropdown lets users choose the language they want to translate into. JavaScript sends this selection to the API along with the input text.
Input Validation: It checks whether the user has entered any text before making an API request. If the input is empty, it displays a clear message asking the user to enter text.
Loading Feedback: The output field displays "Translating..." while the API request is processing. As a result, users know that the application is working on their translation.
Dynamic Translation Result: After the API responds, JavaScript extracts the translated text and places it inside the output textarea. Therefore, users can see the result without refreshing the page.
API Error Handling: It handles failed requests with a .catch() block. If the translation request fails, the output displays "Error translating text.".
Translation Failure Handling: The code also checks whether the API response contains translated text. If it does not, the application displays "Translation failed." instead of showing an empty result.
Read-Only Output: Translated text appears inside a textarea with the readonly attribute. This keeps the output area focused on displaying the translation rather than allowing users to edit it.
Simple User Interface: This project uses a clean card layout with an input textarea, language selectors, a Translate button, and an output textarea. Therefore, users can understand the translation process easily.

What You'll Learn

How to connect a JavaScript application with a translation API.
How to use fetch() to send requests to an external service.
How to create API URLs with template literals.
How encodeURIComponent() safely prepares text for a URL.
How to send multiple values as URL query parameters.
How to read values from <textarea> and <select> elements.
How to convert an API response into JSON with res.json().
How to access nested properties from returned JSON data.
How to update a textarea using its value property.
How to validate input before making an API request.
How to display loading and error messages.

HTML Code

The HTML creates the basic structure of the Language Translator. The .translator-container holds the complete application, while the <h2> displays the project title and the #inputText textarea provides the area where users enter the text they want to translate.

Next, the .controls section contains the #fromLang and #toLang dropdowns. These provide English, Hindi, French, Spanish, and German as language options, with an arrow between them to show the translation direction. The Translate button calls translateText() when clicked, while the #outputText textarea displays the translated result and uses readonly to prevent editing.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Language Translator</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="translator-container">
    <h2>Language Translator</h2>

    <textarea id="inputText" placeholder="Enter text to translate"></textarea>

    <div class="controls">
      <select id="fromLang">
        <option value="en">English</option>
        <option value="hi">Hindi</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="de">German</option>
      </select>

      <span>→</span>

      <select id="toLang">
        <option value="hi">Hindi</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="de">German</option>
      </select>
    </div>

    <button onclick="translateText()">Translate</button>

    <textarea id="outputText" placeholder="Translated text" readonly></textarea>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the layout and appearance of the Language Translator. The universal selector sets box-sizing: border-box and applies the Segoe UI font, while the body uses Flexbox to center the translator card against the dark blue background.

This .translator-container creates the main white card with a fixed width, padding, rounded corners, centered text, and a shadow. Next, the textarea selector controls the size, padding, border, and rounded corners of both text areas.

The .controls class uses Flexbox to arrange the language selectors and arrow horizontally. The select selector gives both dropdowns a consistent width and spacing, while the button selector creates the full-width Translate button with padding, a background color, and a pointer cursor. Finally, #outputText adds top spacing so the translated result remains visually separate from the controls.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.translator-container {
  background: #ffffff;
  width: 380px;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

h2 {
  margin-bottom: 15px;
}

textarea {
  width: 100%;
  height: 90px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  resize: none;
  margin-bottom: 10px;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

select {
  width: 45%;
  padding: 8px;
  border-radius: 6px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

#outputText {
  margin-top: 10px;
}

Javascript Code

JavaScript handles the complete translation process through the translateText() function. First, the function reads the text from #inputText, the selected source language from #fromLang, and the target language from #toLang. It also selects #outputText so it can display the result.

If the user does not enter any text, the function displays "Please enter text to translate." and stops. Otherwise, it shows "Translating..." and sends a request to the MyMemory API using fetch(). The URL includes the encoded text and the selected language pair through the langpair=${from}|${to} parameter.

Next, res.json() converts the API response into JavaScript data. The code checks data.responseData.translatedText and places the translated text into output.value when it exists. If the API does not return translated text, the application displays "Translation failed." Finally, the .catch() block handles request errors and displays "Error translating text."

function translateText() {
  const text = document.getElementById("inputText").value.trim();
  const from = document.getElementById("fromLang").value;
  const to = document.getElementById("toLang").value;
  const output = document.getElementById("outputText");

  if (!text) {
    output.value = "Please enter text to translate.";
    return;
  }

  output.value = "Translating...";

  fetch(
    `https://api.mymemory.translated.net/get?q=${encodeURIComponent(
      text
    )}&langpair=${from}|${to}`
  )
    .then(res => res.json())
    .then(data => {
      if (data.responseData && data.responseData.translatedText) {
        output.value = data.responseData.translatedText;
      } else {
        output.value = "Translation failed.";
      }
    })
    .catch(() => {
      output.value = "Error translating text.";
    });
}