DEV Community

Cover image for How to Make Language Translator in JavaScript
ReactJS Guru
ReactJS Guru

Posted on • Originally published at


How to Make Language Translator in JavaScript

In this article, we will make a language translator in JavaScript. In here, we will provide two fields for text, one for text input and another for output text. To get translate the language, we will use an API of mymemory. Using this API, we will also add other languages for selection, and also we provide a button to listen the text in the speech form. Lastly, we have added another button to copy the text, and also we will provide a button to translate the text.

This is going to be an interesting and cool project to do. So let’s make it step-by-step.

Creating Skeleton

For this project, we need to basically three files. First will be our index.html, in this we will add our elements, and you can simply say we will create the skeleton of the project using HTML file. Then for designing purpose we will be adding our style.css file, with this we will add some styles to our HTML, this is going to be purely based on you, like you can customize it any way. And lastly, our script.js file, this will be our main file because we will add functionality so that we can translate the text using the JavaScript file.

Now in HTML, we have firstly added a font-awesome link to use icons. Then in body part, we have added two text-area for input and output text. In output text-area, we have added an attribute name readonly-disabled class, which is actually used to disable modification for the specific class. Simply, it will make output text-area which will be unchangeable.

After that, we have added two icons for volume and copy icons. Then we have added a select menu which is currently empty, but we will fill it using JS code. Also for output field, we again added same icons and select menu. Lastly, we have added a button to translate text from one language to targeted language.Read More

Latest comments (5)

jonrandy profile image
Jon Randy 🎖️

I get so tired of articles like this, opening them thinking they're actually going to be way more interesting than they actually are.

You're making an interface to an existing language translator, not an actual language translator.

projektorius96 profile image
Lukas Gaucas

I think author could make more appropriate title for this, e.g. "how-to-make-language-translator-INTERFACE-in-javascript" or "how-to-make-language-translator-VIEW-in-javascript" or relevant, than you could simply go around without dropping by, otherwise I can imagine it's quite annoying as you might have limited time manually searching , unless scraping, sparing extra time filtering what is useful & what is not whatsoever !

reactjsguru profile image
ReactJS Guru


reactjsguru profile image
ReactJS Guru

Thanks for your precious feedback, one thing I would like to tell you that these are beginner friendly projects and If you yad read those articles you will know that it's written in very simple language, so beginners can actually understand about project. I'm also creating some large projects which you might find interesting in it.

darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Okay but it's still not what the title claims it is


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!