How to create simple translator with Translate API and JavaScript

Hey! Today, we will create a simple translator using Google Translate API and Javascript (especially Jquery). The API is free, I will also show you how to get it without a Google Cloud subscription. So let’s start!

Things you’ll need

  • HTML and JS files
  • Google Translate API (from RapidAPI)
  • JQuery library (from cdn)
  • Ability to type

1. Register API key

Go to https://rapidapi.com/ and create a new account! If you already have one, just log-in! You can also use your Google account to do that. After signing in, go to this link: https://rapidapi.com/googlecloud/api/google-translate1/. If you navigate to the “pricing” tab, you can see couple of plans. Choose the one named “Basic”. It will give you 500 characters / month limit, but if you need it for poduction, you can upgrade it.

2. Create HTML

Make a folder where you will work. Make a file called index.html.
Now add the following code! The new code snippets will be shown as bold.

<!DOCTYPE html>
<html>
<head>
<title>Translator using JS</title>
</head>
<body>

</body>
</html>

Now, we’ll import the JQuery API from CDN (Content Delivery Network).

<head>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

The next step is to request the text to be translated from the user using an input field.

<body>
<label for=”original”>Text:</label>
<input type=”text” id=”original” name=”original” class=”textbox”>
<br>
<body>

If we had all this, let’s create two drop-down menus. In one you can select the language of the entered text, while in the other you can select the target language to which you want to translate the text. Just copy-paste my code here!

<body>

<label for=”langs”>Translate to:</label>
<select name=”langs” id=”langs”>
<option value=”af”>Afrikaans</option>
<option value=”sq”>Albanian</option>
<option value=”am”>Amharic</option>
<option value=”ar”>Arabic</option>
<option value=”hy”>Armenian</option>
<option value=”az”>Azerbaijani</option>
<option value=”eu”>Basque</option>
<option value=”be”>Belarusian</option>
<option value=”bn”>Bengali</option>
<option value=”en”>English</option>
<option value=”hu”>Hungarian</option>
</select>
<br>
<label for=”from”>Text language:</label>
<select name=”from” id=”from”>
<option value=”af”>Afrikaans</option>
<option value=”sq”>Albanian</option>
<option value=”am”>Amharic</option>
<option value=”ar”>Arabic</option>
<option value=”hy”>Armenian</option>
<option value=”az”>Azerbaijani</option>
<option value=”eu”>Basque</option>
<option value=”be”>Belarusian</option>
<option value=”bn”>Bengali</option>
<option value=”en”>English</option>
<option value=”hu”>Hungarian</option>
</select>
<br>
</body>

We’re done with the HTML, with just a few finishing touches left. Now we will add the translate button and load the script.

<body>

<button onclick=”translateText()”>Translate</button>
<p id=”final”>Translation: </p>
<script src=”script.js”></script>

</body>
</html>

3. Create Javascript

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store