Open In App

How to create Sentence Translator using HTML, CSS, and JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Ptoject Structure

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.

https://api.funtranslations.com/translate/minion.json

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:

  1. On clicking the button a function clickHandler will be called.
  2. The clickHandler function takes input from the input Textarea and updates the apiUrl.
  3. 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.



Last Updated : 05 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads