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 :)

Comments

[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

[Naveen Kamath]

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

[Priyanshu]

Easy & short explanation which can help beginners!

[Naveen Kamath]

thanks bro , For any confusions view source Code :)

[nickpythonluajava]

how do i create a custom json?