JavaScript Terminal

Ciprian on Tuesday, May 17, 2022 in JavaScript Arrays & Objects

NEW! Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Today’s tutorial is about creating a terminal screen together with lime terminal characters in JavaScript.

Let’s start with the CSS:

<style>
textarea {
    background-color: #000000;
    color: #14FC03;
    border: 1px solid #111;
}
</style>

JavaScript is next:

<script>
const tl = new Array(
    "Initializing script",
    "Activating engine",
    "Running queries...",
    "Throwing errors...",
    "Catching errors",
    "",
    "END OF SCRIPT"
);
let speed = 60,
    index = 0,
    text_pos = 0,
    str_length = tl[0].length,
    contents,
    row;

function type_text() {
    contents = '';
    row = Math.max(0, index - 7);

    while (row < index) {
        contents += tl[row++] + '\r\n';
    }

    document.forms[0].elements[0].value = contents + tl[index].substring(0, text_pos) + "_";

    if (text_pos++ == str_length) {
        text_pos = 0;
        index++;
        if (index != tl.length) {
            str_length = tl[index].length;
            setTimeout("type_text()", 1500);
        }
    }
    else {
        setTimeout("type_text()", speed);
    }
}
</script>

And, finally, the HTML:

<form>
    <div align="center">
        <textarea rows="10" cols="80" wrap="soft"></textarea>
    </div>
</form>

Related posts

Leave a Reply

You have to agree to the comment policy.