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 }