A Pen by Damon Sicore on CodePen.
Created
May 22, 2019 00:09
-
-
Save damons/01507ac39f52478765ae9b3573eb6ed9 to your computer and use it in GitHub Desktop.
Web Terminal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//========== | |
// 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 = ""; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
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