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
Top comments (5)
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.
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 !
Noted!!!!!!
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.
Okay but it's still not what the title claims it is