HTML/CSS - Hacker Terminal #hackerterminal Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Hacker Terminal</title>
</head>
    <canvas id="c"></canvas>
<div class="main-container">
    <progress id="progress" value="1" max="100" class="hidden"></progress>
    <textarea id="textArea" disabled>
    </textarea>
   
    <form id="submitForm">
        <input id="myInput" type="text" disabled="true">
    </form>
</div>
</body>
</html>

css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color:  #2de327;
}
.hidden {
    visibility: hidden;
}
html{
    background-color:  #333;
    background: url('https://images.unsplash.com/photo-1510511459019-5dda7724fd87?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74450f7cf15b30e723c1a6d49abcc62c&auto=format&fit=crop&w=1950&q=80') no-repeat center center fixed; 
  background-size: auto;
}
.main-container {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color:  #000;
    width: 400px;

// load JS after DOM is generated
document.addEventListener("DOMContentLoaded", function () {
    const input = document.querySelector("#myInput");
    const submitForm = document.querySelector("#submitForm");
    const progressBar = document.querySelector("#progress");
    window.onload = function () {
        goProgress();
    };
    const textArea = document.querySelector("#textArea");
    textArea.value = `Connecting... Please wait. `;
    // setup progress bar
    const goProgress = function () {
        progressBar.classList.remove("hidden");
        input.disabled = true;
        input.value = "";
        textArea.value = `Connecting... Please wait. `;
        progressBar.interval = setInterval(increaseVal, 20, progressBar);
    };
    // fill up progress bar
    const increaseVal = function (progressBar) {
        if (progressBar.value < 100) {
            progressBar.value = progressBar.value + 1;
        } else {
            clearInterval(progressBar.interval);
            progressBar.classList.add("hidden");

BROWSER

Console