Yoda Talk Generator — Fun Translation App in JavaScript

talk yoda like

In this blog, we will be creating a translator which will convert the sentences to YODA style of speaking.

Did you know Yoda’s syntax follows a distinctly different pattern. For the most part, his sentences follow the object-subject-verb pattern. Use the translator to convert your text from English to yoda style of speaking.

The app will take input from user and make a server call. We will be making a GET call that is used to get data from server. A mock API as the translation API will be used which has rate limited to 5 requests per hour.

https://api.funtranslations.com/ : This API is collection of several individual APIs under one plan. Refer to the above individual API documentation for more details about the usage.

Code to develop the translation app.

Now, let’s see how can we make this work. Let’s make use of querySelector() to return the elements in to our defined variables.

querySelector(): This method returns the first element within the document that matches the specified selector, or group of selectors.

var btntranslate = document.querySelector('#btn-translate');
var text = document.querySelector('#text-input');
var output = document.querySelector('#output');

Add event listener to the button that on ‘click’ make a function call.

btntranslate.addEventListener('click',clickHandler)

addEventListener : It sets up a function that will be called whenever the specified event is delivered to the target.

Write the callback function click handler for the API call and return the response. We will make use of fetch() to make the server call.
Fetch is built in all modern web browsers to make a call to server.

Read more about fetch here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Fetch takes one mandatory input of the path to the resource we want to fetch.
inputVal is the value/text entered by the user which is then get attached to the URL and makes the API call when translate button is clicked. The method getUrl will return the final path to the resource.

fetch() : It return promises. When the browser receives the data it gives callback inside the .then() of promise.

var url = "https://api.funtranslations.com/translate/yoda.json"
function getUrl(input){
   return url + "?" + "text=" + input;
}

The json() method of the body mixin takes a response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as json .

catch(): The catch method is used for error handling in promise composition. Since it returns a Promise, it can be chained in the same way as its sister method, then() .

function clickHandler(){
   var inputVal = text.value;
   fetch( getUrl(inputVal) )
   .then(response => response.json())
   .then(json => {
   var translatedVal = json.contents.translated;
   output.innerText = translatedVal;
   })
   .catch(errorHandler)
};

Finally, create a error handler method on how we want to handle errors . Here try to catch error and give the alert message.

function errorHandler(error){
//alert('error or request limit exceeded')
   if(error instanceof TypeError){
      alert('requests limit exceeded.Try after sometime.');
   }
   else{
      alert('error');
   }
}

Script.js:

Thank You, we have completed our script for this app.

Hosted Link: https://yoda-talk.netlify.app/

Link to the source code: https://github.com/MdBilal420/yoda-talk-main