damons/index.html

## index.html
<!-- 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>

## script.js
//==========
// 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 = "";
});

## style.scss
* {
    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;
    }
}

## web-terminal.markdown

      
    Raw
  

              web-terminal.markdown
            
          
    Web Terminal

A Pen by Damon Sicore on CodePen.
License.
	<!-- 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;
	}
	}