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>
Previous article
How to create a simple JavaScript percentage graph (or chart)
Next article
