DEV Community

Cover image for Make Your Own Translator App in TEN Minutes
Naveen Kamath
Naveen Kamath

Posted on • Updated on

Make Your Own Translator App in TEN Minutes

Hello Guys, In this Blog I will tell You how to make a Minion Translator Web App ,Enjoy :)

Entire Code is Available on Github

Follow these Steps to get started :

  • # Setup :
    1. Create a New Repository in Git.
    2. Initialize index.html file in vs code or any other text editor.
    3. Put Title ,Heading in place.
    4. Initial commit ,Publish repo.

If you Dont know Github check my blog :How to Host Your First Website.

  • # Adding a Button :
    • Create a Button in Html . <button id="btn-translate">Translate</button>
    • Reference the button in Js using query Selector. let btnTranslate=document.querySelector('#btn-translate');
    • Add Event Listener to Button. btnTranslate.addEventListener('click',clickEventHandler); function clickEventHandler(){ console.log('clicked');;

Thats it Button is Ready.

  • # Add TextArea Input :
    • put a TextArea input Tag in html. <textarea class="txt-input" placeholder="Enter the Sentence to Translate"></textarea>.
    • Read that is Js: let txtInput=document.querySelector('.txt-input');;
    • Read the value of the Tag : console.log("Input: ",txtInput.value);;

We are done with Input Area .

  • # Add a Div to show Output :
    • Create a Output Div . <div class="txt-input" id="output"></div>
    • Reference in Js: let outputDiv=document.querySelector('#output');
    • Use innerText to write div when button click happens outputDiv.innerText=(text in input div);

Final Thing Left is Calling Api from Fun Translations

  • Call a mock server using fetch() method.
  • Add fetch call in app and Update the outpur from .then() of the fetch call.

For Example:

let url='https://api.funtranslations.com/translate/minion.json'

fetch(url)

.then(response=>response.json)

.then(json=>{
transText=json.contents.translated;
outputDiv.innerText=transText;
})

Finally your Minion Translation APP is ready .

For source code check : Github

Thank You , Have a Nice Day :)

Top comments (5)

Collapse
 
promikecoder2020 profile image
ProMikeCoder2020

Good article altought it is not a real translator app😂... Even so it may help begginers understand the connection between JavaScript, html, the backend and github

Collapse
 
naveenkamath profile image
Naveen Kamath

For any confusion , you can view source code in Github :)

Collapse
 
priyanshu769 profile image
Priyanshu

Easy & short explanation which can help beginners!

Collapse
 
naveenkamath profile image
Naveen Kamath • Edited

thanks bro , For any confusions view source Code :)

Collapse
 
nickpythonluajava profile image
nickpythonluajava

how do i create a custom json?