In this article, we are going to make a sentence translator app with the help of API using JavaScript.
Basic setup: Open VS Code and open a folder from your drive where you want to create this project and give the name Translate-Sentence(folderName). After opening create the following files:
- index.html
- translate.js
- style.css
Project Structure: It should look like this:
HTML File: This is the main index page which is connected to the style.css file for styling and translate.js for the logical operations in the website.
The HTML file contains basically three parts:
- Header
- Main Container: It contains two parts:
- Input Textarea
- Output Textarea
- Footer
index.html
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <nav class="header">Translate It</nav> <div class="main"> <div class="translation-box"> <textarea id="input-text" placeholder="Enter the sentence"> </textarea> </div> <button id="btn-translate">Translate</button> <div id="translated-box"> <textarea id="output-text" placeholder="Here you will se translated text"> </textarea> </div> </div> <footer class="footer">About Us</footer> <script src="translate.js"></script></body></html> |
JavaScript File: This javaScript file takes the id of the button and inputs text and outputs text to a variable.
Note: API can be used for 5 calls per hour. By using the above API sentence will be translated to the minion language
The main approach of the logic in javascript is:
- On clicking the button a function clickHandler will be called.
- The clickHandler function takes input from the input Textarea and updates the apiUrl.
- Next, the fetch method is called which converts the inputText to minion language and it is reflected to output TextArea.
Fetch method: Fetch takes the Url as an argument and then returns a promise that resolves the response object and then from that response object the outputText takes the translated content.
translate.js
JavaScript
var inputText = document.querySelector('#input-text');var outputText = document.querySelector('#output-text');var buttonTranslate = document.querySelector('#btn-translate');function errorHandle(error) { // In case error occurs the errorHandle // function will be called alert('Error occurred') console.log("error occurred", error);}function clickHandler() { // When someone clicks on translate // button clickHandler will be called var text = inputText.value; var updatedUrl = apiUrl + "?text=" + text; fetch(updatedUrl).then(response => response.json()).then(json => outputText.innerText = (json.contents.translated)).catch(errorHandle);}buttonTranslate.addEventListener("click", clickHandler); // Adding the event listener click |
CSS File: This file is responsible for the styling of the HTML page.
style.css
CSS
textarea { display: block; margin: 1rem; width: 70vw; height: 20vh; padding: 1rem; box-sizing: border-box; justify-content: center; } * { box-sizing: border-box; } .header { font-size: 50px; text-align: center; background-color: #f77e38; padding: 1rem; } #btn-translate { background-color: #f77e38; border-radius: 12px; height: 5vh; width: 20vw; font-size: larger; margin-left: 25vw; cursor: pointer; } .main { box-sizing: border-box; margin-left: 15vw; } .footer { font-size: 40px; align-items: center; margin-top: 8rem; height: 7rem; background-color: #f77e38; text-align: center; } |
Output: Install live server extension in VS Code. Click on Live Server and our App is ready now.
