Pad with zeroes

package.json

@@ -43,6 +43,7 @@
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "body-parser": "^1.15.2",
+    "lodash": "^4.17.2",
     "react": "^15.4.0",
     "react-dom": "^15.4.0"
   }

src/app/calc.js

@@ -0,0 +1,26 @@
+import should from './should';
+
+export default calc = {
+        numberOfBits: function (num) {
+            if(num < 0) {
+                return 32;
+            }
+            should.bePositiveInteger(num);
+            return Math.floor(Math.log(num) / Math.log(2)) + 1;
+        },
+
+        maxNumberOfBits: function (arr) {
+
+            var counts = [], num;
+            for (var i = 0; i < arr.length; i++) {
+                num = arr[i];
+                counts.push(this.numberOfBits(num));
+            }
+
+            return Math.max.apply(null, counts);
+        },
+
+        calcExpression: function (expr) {
+            return eval(expr.expressionString);
+        }
+    };

src/app/components/results/ListOfNumbersExpressionView.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import formatter from '../../formatter';
 
 export default class ListOfNumersExpressionView extends React.Component {
     render() {
         const expr = this.props.expression;
-        const numberViews = expr.numbers.map((n, i) => <OperandView key={i} operand={n} />) 
+        const numberViews = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={expr.maxBitsLegnth} />) 
         return <table className="expression" cellspacing="0">
                     {numberViews}        
                </table>
@@ -13,12 +14,12 @@ export default class ListOfNumersExpressionView extends React.Component {
 class OperandView extends React.Component {
     render() {
         const op = this.props.operand;
-        console.log(op);
+        console.log(this.props);
         // const bitsSize = this.propsю;
          // .padLeft(m.bitsSize, '0')
         return  <tr data-kind={op.kind}>
             <td className="label">{op.input}</td>
-            <td className="bin">{op.bin}</td>
+            <td className="bin">{formatter.padLeft(op.bin, this.props.maxBitsLegnth, '0')}</td>
             <td className="other">{op.other}</td>
         </tr>
     };

src/app/expression.js

@@ -1,3 +1,5 @@
+import * as _ from 'lodash';
+
 var expression = {
         factories:[],
         canParse: function(string) {
@@ -119,6 +121,7 @@ export class Operand {
             this.bin = this.value < 0 ? (this.value >>> 0).toString(2) : this.value.toString(2);
             this.kind = this.input.indexOf('0x') > -1 ? 'hex' : 'dec';
             this.other = this.kind == 'dec' ? this.hex : this.dec;
+            this.lengthInBits = Operand.getBitLength(this.value);
         }
                 
         getLengthInBits() {
@@ -154,6 +157,10 @@ export class Operand {
         return this.input;
     }
     
+    static getBitLength(num) {
+        return Math.floor(Math.log(num) / Math.log(2)) + 1
+    }    
+    
     static getBase(kind){
         switch (kind){
             case 'bin': return 2;
@@ -223,6 +230,7 @@ export class ListOfNumbersExpression {
     constructor(expressionString, numbers) {
         this.expressionString = expressionString;
         this.numbers = numbers;
+        this.maxBitsLegnth = _.chain(numbers).map(n => n.lengthInBits).reduce((n , c) => n >= c ? n : c, 0).value();
     }
 }
 

src/app/formatter.js

@@ -0,0 +1,26 @@
+export default {
+        formatString: function(num, kind) {
+            return num.toString(getBase(kind || "bin"));
+        },
+        padLeft: function (str, length, symbol) {
+            var sb = Array.prototype.slice.call(str), symbol = symbol || "0";
+
+            if(length == null) {
+                return str;
+            }
+
+            while(length > sb.length) {
+                sb.unshift(symbol);
+            }
+
+            return sb.join('');
+        }
+    };
+
+    function getBase(kind) {
+        switch (kind){
+            case 'bin': return 2;
+            case 'hex': return 16;
+            case 'dec': return 10;
+        }
+    }