<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Snippts</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
    <div class="container">
        <!--Text area to give input-->
        <textarea id="inputPart" placeholder="Enter dummy data..."></textarea>
        <!--Submit Data-->
        <button id="submitInput">Submit</button>

        <div id="loading"></div>
        <!--Showing output-->
        <h1 id="showOutput"></h1>
    </div>
    <script src="./index.js" type="text/javascript"></script>
</body>

</html>
.container {
    max-width: 550px;
    margin: auto;
    padding: 0 1rem;
}
textarea {
    width: 100%;
    height: 8rem;
}
button {
    margin: 2rem 0;
    width: 100%;
    padding: 8px 0;
    cursor: pointer;
}

/* creating css loader */

#loading {
    width: 2rem;
    height: 2rem;
    border: 5px solid #f3f3f3;
    border-top: 6px solid #9c41f2;
    border-radius: 100%;
    margin: auto;
    visibility: hidden;
    animation: spin 1s infinite linear;
}
#loading.display {
    visibility: visible;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
// selecting dom element
const textInput = document.querySelector("#inputPart");
const textOutput = document.querySelector("#showOutput");
const btn = document.querySelector("#submitInput");

// adding event listener to button
btn.addEventListener("click", fetchHandler);

// selecting loading div
const loader = document.querySelector("#loading");

// showing loading
function displayLoading() {
    loader.classList.add("display");
    // to stop loading after some time
    setTimeout(() => {
        loader.classList.remove("display");
    }, 5000);
}

// hiding loading 
function hideLoading() {
    loader.classList.remove("display");
}

// dummy url
var url = "https://lessonfourapi.tanaypratap.repl.co/translate/yoda.json"

function fetchHandler(event) {
    displayLoading()
    var input = textInput.value;
    var finalURL = buildURL(input);

    fetch(finalURL)
        .then(response => response.json())
        .then(json => {
            hideLoading()
            textOutput.innerText = json.contents.translated;
        })
}
// creating url format
// we need 
// https://lessonfourapi.tanaypratap.repl.co/translate/yoda.json?text="your input"

function buildURL(inputData) {
    return `${url}?text=${inputData}`;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.