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>  
<html>  
<head>  
<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="https://code.jquery.com/jquery-1.7.1.min.js"
  integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jq-console/2.7.7/jqconsole.min.js"></script>
 <style>    /* The console container element */
    #console {
      position: absolute;
      width: 400px;
      height: 500px;
      background-color:black;
    }
    /* 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;
    }

  </style>
</head>  
<body>  
 <div id="console"></div>
     <script>

      $(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.
            startPrompt();
          });
        };
        startPrompt();
      });
    </script>
</body>  
</html>  

And you can try it out live on a public jsbin https://jsbin.com/qodugokizi/ for something that will look like: