JS Console

Overrides the standard "console.log" function to display the console contents in the results pane. Handles all basic console output functionality and anything that supports toString().

by Taylor Lopez

HTML

<div id="content"></div>

CSS

html, body 
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* Background Color */
    background-color: black;
}

#content
{
    padding: 10px;
    font-family:"Lucida Console", "Courier New", "Courier";
    /* Console Text Color */
    color: #0F0;    /* Lime Green */
}

/* console span properties */
.consoleLine
{
}

.consoleInput
{
    font-size: 1em;
    font-family:"Lucida Console", "Courier New", "Courier";
    color: #0f0;
    padding: 0;
    margin: 0;
    background-color: black;
    border: none;
    width: 100%;
}

JavaScript

///* START CONSOLE FUNCTIONALITY -- DON'T TOUCH */
// This function intercepts the console.log() calls and prints the output to the result pane to the right like a standard console instead of the hidden console. Just pretend like this isn't heeeereee. ooooooooooohhh. *spooky*
var _console = document.getElementById("content");
var _body = document.getElementsByTagName("body")[0];
var $inputTextbox;
console.log = function (object)
{
    var output = object === undefined ? "" : object.toString();
    output = output.replace(/ /g, "&nbsp;");
    while (output.search("\r\n") !== -1)
        output = output.replace("\r\n", "<br />");
    while (output.search('\n') !== -1)
        output = output.replace('\n', "<br />");
    while (output.search('\r') !== -1)
        output = output.replace('\r', "<br />");
    _console.innerHTML += ("<span class='consoleLine'>" + output + "</span><br />");
    window.scrollTo(0, _body.scrollHeight);
};

console.readline = function()
{
    $("#content").append('<input type="text" class="consoleInput" />');
    var inputText = "";
    $inputTextbox = $(".consoleInput");
    $inputTextbox[0].focus();
    $inputTextbox.keydown(function (event)
    {
        switch (event.which)
        {
        case 13:
            inputText = $inputTextbox[0].value;
            console.log(inputText);
            this.parentElement.removeChild(this);
            break;
        }
    });
};

$("body").click(function()
{
    $inputTextbox[0].focus();
});

/* END OF CONSOLE FUNCTIONALITY */

/****************************** YOUR CODE START ******************************/

console.log("Hello world.");
console.readline();