JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<fieldset>
  <legend>
  Test Messages
  </legend>
<button onclick="Logging.trace('trace msg');">TRACE</button>
<button onclick="Logging.debug('debug msg');">DEBUG</button>
<button onclick="Logging.info('info msg');">INFO</button>
<button onclick="Logging.warning('warning msg');">WARNING</button>
<button onclick="Logging.error('error msg');">ERROR</button>
<button onclick="Logging.severe('severe msg');">SEVERE</button>
</fieldset>
<div id="Log">

</div>

CSS

.log {
	font-size: 11pt;
	font-family: 'URW Gothic L'
}

.log .time {
	display: inline-block;
	width: 6.5em;
}
.log .severity{
	width: 5.5em;
	display: inline-block;
}

.log.log-trace {
	color: #ccc;
}
.log.log-debug {
	color: #999;
}
.log.log-info {
	color: #69f;
}
.log.log-warning {
	color: #fc0;
}
.log.log-error {
	color: #f44;
}
.log.log-severe {
	color: #f00;
}

JavaScript

var LogSeverity = {
	TRACE:    {
		value: 0,
		name: 'TRACE'
	},
	DEBUG:    {
		value: 1,
		name: 'DEBUG'
	},
	INFO:     {
		value: 2,
		name: 'INFO'
	},
	WARNING:  {
		value: 3,
		name: 'WARNING'
	},
	ERROR:    {
		value: 4,
		name: 'ERROR'
	},
	SEVERE:   {
		value: 5,
		name: 'SEVERE'
	}
};

var LoggingUtils = {
		
	padLeft: function(v, paddingValue) {
		return String(paddingValue + v).slice(-paddingValue.length);
	},
	padRight: function(v, paddingValue) {
		return String(v + paddingValue).slice(0, paddingValue.length);
	},
	
	formatTime: function(time) {
		var h = time.getHours();
		var m = time.getMinutes();
		var s = time.getSeconds();
		var ms = time.getMilliseconds();
		
		var hStr = LoggingUtils.padLeft(h,"00");
		var mStr = LoggingUtils.padLeft(m,"00");
		var sStr = LoggingUtils.padLeft(s,"00");
		var msStr = LoggingUtils.padLeft(ms,"000");
		
		return hStr + ':' + mStr + ':' + sStr + '.' + msStr;
	}
};

var ConsoleAppender = function() {
	this.append = function(time, inSeverity, message) {
		if (console && console.log) {
			//console.dir(inSeverity);
			console.log(time + ' ' + LoggingUtils.padRight(inSeverity.name + ':','        ') + ' ' + message);
		}
	}
};

var HtmlAppender = function(cfg) {

	var logContainerId = cfg.logContainerId;
	
	this.append = function(time, inSeverity, message) {
		var element = document.getElementById(logContainerId);
		var e = document.createElement('div');
		e.innerHTML = '<span class="log log-' + inSeverity.name.toLowerCase() + '"><span class="time">' + time + '</span> <span class="severity">' + inSeverity.name + '</span> <span class="message">' + message + '</span></span><br/>';

		while(e.firstChild) {
			element.appendChild(e.firstChild);
		}
	}
};

var Logger = function(cfg) {
	
	var severity = LogSeverity.INFO;
	var appender = new ConsoleAppender();
	
	this.reconfigure = function(newConfig) {
		if (newConfig == null) {
			return;
		}
		
		if (newConfig && newConfig.severity) {
			severity =...