Implemented colorization of bits

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, '<span class="zero">0</span>')
+                .replace(/1/g, '<span class="one">1</span>');
+        });
+    }
+
 })(window.app);
 

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 }