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 :
- Create a New Repository in Git.
- Initialize index.html file in vs code or any other text editor.
- Put Title ,Heading in place.
- 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');
;
- Create a Button in Html .
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);
;
- put a TextArea input Tag in html.
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);
- Create a Output 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)
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
For any confusion , you can view source code in Github :)
Easy & short explanation which can help beginners!
thanks bro , For any confusions view source Code :)
how do i create a custom json?