Skip to content

Instantly share code, notes, and snippets.

@damons
Created May 22, 2019 00:09
Show Gist options
  • Save damons/01507ac39f52478765ae9b3573eb6ed9 to your computer and use it in GitHub Desktop.
Save damons/01507ac39f52478765ae9b3573eb6ed9 to your computer and use it in GitHub Desktop.
Web Terminal
<!-- web-interactive-terminal -->
<!-- https://github.com/mattConn/web-interactive-terminal -->
<body>
<div id="web-terminal-ctn">
<div id="web-terminal"></div>
<form id="web-terminal-form">
<input id="web-terminal-input" type="text" placeholder="$" autocomplete="off" autofocus />
<input type="submit" />
</form>
</div>
<script src="index.js"></script>
<script src="script.js"></script>
</body>
//==========
// index.es6
//==========
let terminalCtn = document.querySelector("#web-terminal-ctn"); // get terminal container element
let terminal = document.querySelector("#web-terminal"); // get terminal element
let terminalInput = document.querySelector("#web-terminal-input"); // get input element
let terminalForm = document.querySelector("#web-terminal-form"); // get input form element
let display = function (html) { //write to terminal
terminal.insertAdjacentHTML("afterbegin", html);
};
let htmlElement = (element,text) => `<${element}>${text}</${element}>`;
let printf = function (string, newline = true) { //format, write to terminal
let nl = newline ? "<br>" : "";
display(`${htmlElement("span",string)}${nl}`);
}
let fontHeight = 15;
let cls = function () { // clear screen
for (let i = 0; i <= terminal.clientHeight/fontHeight; i++) {
printf("");
}
}
let bufferHistory = [];
let bhIndex = 0;
let bhManage = function(){ // manage buffer history on input submit
bufferHistory.shift();
bufferHistory.unshift(buffer);
bufferHistory.unshift("");
bhIndex = 0;
};
// cycle through terminal history
document.onkeydown = keyCheck;
function keyCheck(e)
{
let keycode = window.event.keyCode;
switch (keycode)
{
case 38: // up arrow
if(bhIndex < bufferHistory.length-1){
bhIndex++;
terminalInput.value = bufferHistory[bhIndex];
}
break;
case 40: // down arrow
if(bhIndex > 0){
bhIndex--;
terminalInput.value = bufferHistory[bhIndex];
}
break;
}
}
//==========
// script.js
//==========
var buffer; // store user input
// initial message
printf("This is a basic web REPL boilerplate. Type in the box and press enter to echo your input. Enter \"clear\" to clear the terminal.");
// handle buffer submit
terminalForm.addEventListener("submit", function (e) {
e.preventDefault();
buffer = terminalInput.value;
bhManage(); // manage buffer history
/*============================================*/
/* Replace this block with your submit actions */
if(buffer == "clear")
cls()
else
printf(buffer); // echo input
/* */
/*============================================*/
terminalInput.value = "";
});
* {
box-sizing: border-box;
}
body {
background-color: #333;
}
#web-terminal-ctn {
display: block;
width: 735px;
margin: 80px auto;
}
$fontHeight: 15px;
$terminalRows: 24;
#web-terminal {
padding: 20px;
color: white;
font-family: monospace;
background-color: #14121f;
overflow-y: scroll;
height: $fontHeight * $terminalRows;
}
#web-terminal-form, #web-terminal-input {
display: block;
width: 100%;
border: none;
color: white;
font-family: monospace;
background-color: #14121f;
}
#web-terminal-input {
border-top: solid 1px white;
}
#web-terminal-form {
input[type=submit] {
width: 0px;
display: none;
}
input[type=text]:focus {
outline: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment