Visual Javascript console logging

visual-console.js

// draw a nice box
// colors: http://flatuicolors.com/
(function () {
    var consoleBox = document.createElement('div');

    consoleBox.id = 'console-box';
    consoleBox.style.backgroundColor = '#bdc3c7';
    consoleBox.style.opacity = '0.80';
    consoleBox.style.borderRadius = '5px';
    consoleBox.style.position = 'fixed';
    consoleBox.style.left = '50px';
    consoleBox.style.top = '50%';
    consoleBox.style.bottom = '50px';
    consoleBox.style.width = '500px';
    consoleBox.style.padding = '10px';
    consoleBox.style.fontFamily = 'mono-spaced';

    document.body.appendChild(consoleBox);
}());

console = {
    box: document.getElementById('console-box'),

    lines: 0,

    addline: function (msg, color) {
        var line = document.createElement('p');

        this.lines += 1;

        line.style.color = color;
        line.textContent = this.lines + ': ' + msg;

        this.box.appendChild(line);
    },

    log: function (msg) {
        this.addline(msg, '#2c3e50');
    },

    error: function (msg) {
        this.addline(msg, '#e74c3c');
    }

}
console.log('apple');
console.error('pear');