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