diff --git a/app/views.js b/app/views.js index 659a73f..145020b 100644 --- a/app/views.js +++ b/app/views.js @@ -17,9 +17,11 @@ expr.resultBinary = formatter.toBinaryString(expr.result, maxLen); var templateId = /<<|>>/.test(expr.sign) ? 'shiftExpressionView' : 'binaryExpressionView'; - var html = document.getElementById(templateId).innerHTML; - return $html.element(html, expr); + var el = $html.element(html, expr); + + colorizeBits(el); + return el; } }); @@ -44,6 +46,7 @@ binCell.innerText = formatter.toBinaryString(o, maxLen); }); + colorizeBits(table); return table; } }); @@ -74,5 +77,15 @@ } }); + function colorizeBits(container) { + var list = container.querySelectorAll('.bin'); + Array.prototype.forEach.call(list, function(el){ + var bin = el.innerText; + el.innerHTML = bin + .replace(/0/g, '0') + .replace(/1/g, '1'); + }); + } + })(window.app); diff --git a/css/styles.css b/css/styles.css index 3eb52a7..8e49eff 100644 --- a/css/styles.css +++ b/css/styles.css @@ -12,8 +12,8 @@ code { font-size: 1.2em; font-weight: bold; } .expression .label { font-weight: bold; padding-right: 5px; text-align: right; } .expression .bin { letter-spacing: 3px; } -.expression .one { color: #6d9ad3 } -.expression .zero { color: #70d351 } +.expression .one { color: black } +.expression .zero { color: #848586 } .expression .result td { border-top: dotted 1px gray; } .expression { font-size: 1.5em; font-family: monospace }