ASCII DOM

by dumptyd

HTML

<pre id="root"></pre>
<span>&nbsp;&nbsp;</span>
<pre>&nbsp;</pre>

CSS

* {
  font-size: 12px;
  margin: 0;
  padding: 0;
}

JavaScript

let fontSize = 12;

let dom = [];

let helpers = {
	div: ({viewportWidth, viewportHeight, fontSize, spaceWidth, width, height}) => {
  	let numOfHorizontalChars = Math.round((viewportWidth * (width/100)) / fontSize);
    let numOfVerticalChars = Math.round((viewportHeight * (height/100)) / fontSize);
    let numOfHorizontalSpaces = Math.round((viewportWidth * (width/100)) / spaceWidth);
    let horizontal = '＿'.repeat(numOfHorizontalChars);
    let vertical = ('|'  + ' '.repeat(numOfHorizontalSpaces - 2) + '｜\n').repeat(numOfVerticalChars - 1);
    let bottom = ('|'  + '＿'.repeat(numOfHorizontalChars - 1) + '｜\n');

    let resDiv = `${horizontal}\n${vertical}${bottom}`;
    return resDiv;
  }
};

let div = props => {
	let viewportHeight = $(window).height();
	let viewportWidth = $(window).width();

	let height = props.height || 0; // in percent
  let width = props.width || 100; // in percent
  let display = props.display || 'block';
  let spaceWidth = (() => {
  	let span = $('<pre>').css('display', 'inline').html('&nbsp;');
  	$('body').append(span);
    let w = span.width();
    span.remove();
    return w;
  })();
  let resDiv = helpers.div({viewportHeight, viewportWidth, height, width, fontSize, spaceWidth})
 	dom.push({
 		height: height, width: width, content: resDiv, display: display
 	})
  $('#root').text($('#root').text() + resDiv);
  
};

let redrawDom = () => {
	$('#root').text('');
  let tDom = dom.slice();
  dom = [];
	tDom.forEach(d => div(d));
};
div({height: 20, width: 100});
div({height: 20, width: 50});
div({height: 20, width: 50});

$(window).resize(() => redrawDom());