Console Small project I worked on the other day

Check it out below. It's all made in JavaScript and presently there is no interaction with the server etc.

Presently it has the following (very limited) features:

  • Command history: arrow up and down or type 'history'
  • List directory: 'ls' to display list of files (hard coded)
  • View content of file: 'cat' to view content of file (hard coded)
  • Clear screen: 'clear' to clear the screen

HTML

<div id="screen"></div>
<form action="#" method="post">
  <span class="fakeInput"></span>
  <input id="exec" aria-label="Console Panel" type="text" spellcheck="false"
  autocapitalize="none" autocorrect="off" autocomplete="off" autofocus placeholder="Ready for inputs" />
</form>

CSS


#exec {
  font-family: monospace;
  font-weight: bold;
  margin-left: 0px;
  height: auto;
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  color: #ff8700;
  height: 34px;
  line-height: 40px;
  outline: 0 none;
  overflow: hidden;
  resize: none;
  width: 400px;
  font-size: 34px;
}

.fakeInput::before, #exec::before {
  color: #ff8700;
  content: "> ";
  font-family: monospace;
  font-weight: bold;
  line-height: 40px;
  margin-left: 5px;
  font-size: 34px;
}

#screen, .fakeInput {
  font-family: monospace;
  font-weight: bold;
  line-height: 40px;
  margin-left: 5px;
  font-size: 34px;
}

.fakeInput {
  color: #ff8700;
}

#screen {
  margin: 50px 0 0 0;
}

JS


$(document).ready(function(){
$('form').submit(
  function() {
    return false;
  });

var history = [''];
var historypos = 0;

$('#exec').on("keydown", function(e) {

  // Enter
  if (e.which == 13) {
    // Push to history
    if ($('#exec').val() != "") {
      history.push($('#exec').val());
      historypos = history.length;
    }
  // Create 'fake' input field
    $('#screen').append($("<div></div>").html($('#exec').val()).addClass("fakeInput"));
  
  // Clear placeholder field
  $('#exec').attr("placeholder","");
    
    
  // Commands
  if ($('#exec').val() == "clear") {
      $('#screen').html("");
    }
    else if ($('#exec').val() == "history") {
      $.each(history, function(index, value) {
        if (index != 0) $('#screen').append(index + ": " + value + "<br />");
      });
    }
    
    else if (/^([Bb]rian)/.test($('#exec').val())) {
      $('#screen').append("That is me");
    }
    
    else if (/^(ls|ll|dir)/.test($('#exec').val())) {
      $('#screen').append("index.php<br />cv.txt");
    }
    
    else if (/^(cat|less|tail|vim)/.test($('#exec').val())) {
      $('#screen').append("The inside of this file");
    }
    
    else if (/^(rm|mv|del)/.test($('#exec').val())) {
      $('#screen').append("Delete some file <span class='glyphicon glyphicon-heart-empty' aria-hidden='true'></span>");
    }
    
    else if ($('#exec').val() != "") {
      $('#screen').append("<p style='color: red'><span class='text-danger'>'" + $('#exec').val() + "'</span> command not found</p>");
    }

  // Reset input field
    $('#exec').val("");
  }
  
  
  // Arrow up - history scroll
  else if (e.which == 38) {
    e.preventDefault();
    if (historypos > 0) historypos--;
    $('#exec').val(history[historypos]);
  }
  
  // Arrow down - history scroll
  else if (e.which == 40) {
    e.preventDefault();
    if (historypos <= history.length - 1) historypos++;
    $('#exec').val(history[historypos]);
  }

});
});