Online Javascript Translator System

Online Javascript Translator System

We are going to learn how to implement an Online Translator System in Javascript, basically using a MyMemory language translator api, you can read the API documentation at the following link:

This application uses javascript to send the json requests, the words to be translated are sent with a key, which in itself for the API is the indicator of the proposed language, and in response the API also sends the translated string with a key.

This API can be used for free purposes, it has a limit of 5000 characters per day, after that, we can move on to payment options.

Explanatory Video Translator System in Javascript (in Spanish)

Online Javascript Translator System

Demo of the Online Translator System in Javascript

I implemented a demo of the application that you can see in the following link:

Explanation of the Online Translator System

The application consists of two main files, which are what the end user sees, the index.html and another style.css, in the index lies the form where the data to be translated is entered, the style.css gives the shape to the document index.html to be aesthetic and responsive.

The logic of the application is located inside the JS folder, in two documents, the countries.js that has the keys of each language and the text strings with which we are going to recognize them in the application, this countries file acts as a dictionary that will contain the languages to which we want to translate the words we write.

The other document is the one that has all the business logic of the Online Translator System in Javascript is the script.js, from this the information sent from the index.html is collected, and through a function addEventListener y se envía con la setAttribute lo que responde la API

The translator system in addition uses an API called Web Speech API to generate the voice from the text that is written, where from the class SpeechSynthesisUtterance the magic of managing the different events that make the text-to-speech option possible is achieved.

If you are interested in the subject, I also have free software where I use a Microsoft API that you can access from the following link (in spanish):

In this blog I will be publishing more javascript applications, which you can access from the following link:

Download and implementation of the project in JavaScript

The following is the repository link where I have the project posted on GitHub:

Online Javascript Translator System

As it is a static page, it is not necessary to use a backend, you do not have to install any server, just download the project and run the page index.html

Upload of the Online Translator System in Javascript to a hosting

In a previous post I explain how to upload a project similar to this to GitHub Pages If you want to upload it to a hosting like hostinger in the following video I explain how to do it (in spanish):

I'm on the lookout for any questions!

One comment

Leave a Reply

Your email address will not be published.