WebConsole

by onejdc

HTML

<div id="con">
	<p>test 1</p>
	<p class='collapsed'>test 2</p>
	<p class='expand'>This is the result of the console statement</p>
</div>

CSS

html,body{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	background-color:black;
}
dd {
	display: inline-block; width: 15px; background-color:#222;
	margin: 0;
	padding: 5px;
	text-align:right;
	margin-right: 8px;
	color: white;
}
#con {
	background-color:black;
	color:#f5eea2;
	height:100%;
	width:100%;
	padding: 5px;
	  font-family: "Lucida Console", "Courier New", monospace;

}
p { 
	padding: 5px;
	margin: 0;
	
}
p:before {
	content: ' ';
	cursor:pointer;
}
p:nth-child(odd) {
	background-color:#333;
}
p.collapsed:before {
	content : '▼ ';
}
p.expand:before {
	content : '▶ ';
}

JavaScript

const con = document.querySelector('#con');


function addLine(t) {
	let p = document.createElement('p');
	let out = t;
	if (typeof t === 'string') {
		out = t.replace(/&nbsp;/g,"\u00A0");
	}
	p.appendChild( document.createTextNode(out) );
	con.appendChild(p);
}
con.p = function(...args) {
	let indent = "&nbsp;&nbsp;&nbsp;";
	let output = '';
	if (args.length < 1) {
		addLine("&nbsp;");
		return;
	}
	args.forEach( function(v, i, b){
	
		if(typeof v === 'object') {
			if (v.constructor === Array) {
				addLine('array [')
				for (let idx in v) {
					addLine('[' + idx + ']' + ' = ' + v[idx]);
				}
				addLine(']');
			} else {
				addLine('object {')
				for (let property in v) {
					let str = indent + property + " : " + v[property];
					addLine(str);
				}
				addLine('}');
			}
			
		} else {
			output = v;
			addLine(v);
		}
	})

	
	
}
con.pb = function(){addLine('&nbsp;')};

con.p('the quick','brown',123,'fox');
con.p();
con.p(["one","two","three"]);