Creating a terminal UI on the browser

Recently I wanted to create a terminal like UI on the browser. I know vintage is cool. And what can be cooler that have one of those dark terminales on your web page.

Well I found a great library called jq-console.

The library is very easy to use. I only had some issues with the jquery version. I had to use the 1.7.1 version or I would get a weird opera not found or undefined error.

I simple one page demo will just need something like:

<!DOCTYPE html>
<meta name="description" content="This bin shows a running example of the jq-console module">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src=""></script>
 <style>    /* The console container element */
    #console {
      position: absolute;
      width: 400px;
      height: 500px;
    /* The inner console element. */
    .jqconsole {
        padding: 10px;
    /* The cursor. */
    .jqconsole-cursor {
        background-color: gray;
    /* The cursor color when the console looses focus. */
    .jqconsole-blurred .jqconsole-cursor {
        background-color: #666;
    /* The current prompt text color */
    .jqconsole-prompt {
        color: #0d0;
    /* The command history */
    .jqconsole-old-prompt {
        color: #0b0;
        font-weight: normal;
    /* The text color when in input mode. */
    .jqconsole-input {
        color: #dd0;
    /* Previously entered input. */
    .jqconsole-old-input {
        color: #bb0;
        font-weight: normal;
    /* The text color of the output. */
    .jqconsole-output {
        color: white;
 <div id="console"></div>
      $(function () {
        var jqconsole = $('#console').jqconsole('Hi\n', '>>>');
        jqconsole.Write('Welcome to jq-console. Orellabac Demo\r\n. This demo just repeats input\r\n','jqconsole-output');
        var startPrompt = function () {
          // Start the prompt with history enabled.
          jqconsole.Prompt(true, function (input) {
            // Output input with the class jqconsole-output.
            jqconsole.Write( "wait while processing "+ input + '\n', 'jqconsole-output');
            // Restart the prompt.

And you can try it out live on a public jsbin for something that will look like: