JSFiddle - React, Tailwind, and code Playground
HTML
<div id="console"></div>
<div id="input" contenteditable="true"></div>
CSS
body {
background:#000;
margin:7px;
color:#0A0;
font-size:100%;
font-family:"Courier New";
}
#input:focus {
outline:none;
}
JavaScript
$(function(){
var commands = {
help: (function() {
return 'The available commands are:<br>\
help - Displays a list of commands.<br>\
clear - Removes all text from the console.<br>\
date - Displays the current date and time.<br>\
time - Displays the current time. See Manual for more.<br>\
alert - Outputs the provided text in an alert box. See Manual for more.<br>\
print - Outputs the provided text to the console. See Manual for more.<br>\
math - Calculates the provided equation.<br>';
}),
clear: (function() {
$('#console').text('');
}),
date: (function() {
var date = new Date();
return date + '<br>';
}),
time: (function(options) {
var date = new Date();
if(options.indexOf('-t') > -1) {
var hour,
suffix = date.getHours() > 12 ? 'PM' : 'AM';
if(date.getHours() == '00') {
hour = '12';
} else {
hour = date.getHours()%12;
}
return hour + ':' + date.getMinutes() + ' ' + suffix + '<br>';
} else {
return date.getHours() + ':' + date.getMinutes() + '<br>';
}
}),
alert: (function(options, params) {
alert(params[0].replace(/"/g, ''));
}),
print: (function(options, params) {
return params[0].replace(/"/g, '') + '<br>';
}),
math: (function(options, params) {
return eval(params[0]) + '<br>';
}),
}
terminal = function(input) {
var inputs = input.match(/"[^"]*"|[^\s"]+/g),
command = inputs.shift(),
options = [],
params = [],
...