Added model binding and some visual aides

partials/intro.html

@@ -1,7 +1,23 @@
<h2>Welcome!</h2>
<div>
<div class="center">
    <label for="generated-binary">Generated binary</label>
    <input type="text" id="generated-binary" ng-model="binary" />
    <select name="generated-length" ng-model="binaryLength">
        <option ng:repeat="length in allowedLengths">{{length}}</option>
    </select>
    <label for="generated-length">bits long</label><br />
    
    <input type="text" id="generated-binary" ng-model="binary" disabled="disabled" class="center" style="width: 80%;" /><br />
    
    <button class="button blue" ng-click="generate()">Generate Binary</button>
    <button class="button red" ng-click="solve()">Translate to Hex</button>
</div>
<div class="center" ng-show="displayResults()">
    <div ng:repeat="part in parts" style="margin: 2em;" fadey="1000">
        <span class="part" fadey="1500">{{part.binary}}</span>
        <span fadey="1800">is now</span>
        <span class="part" fadey="2100">{{part.hex}}</span>
    </div>
    
    <label for="solved-hex">Hex</label><br />
    <input type="text" id="solved-hex" ng-model="hex" disabled="disabled" class="center" style="width: 80%;" /><br />
</div>

scripts/app.js

@@ -13,4 +13,28 @@ angular.module("hexmeh", [])
            templateUrl: "partials/intro.html"
        });
        //.otherwise({ redirectTo: "/" });
    }]);
    }])
    .directive('fadey', function() {
        return {
            restrict: 'A',
            link: function(scope, elm, attrs) {
                var duration = parseInt(attrs.fadey);
                
                if (isNaN(duration)) {
                    duration = 500;
                }
                
                elm = jQuery(elm);
                elm.hide();
                elm.fadeIn(duration)
                
                scope.destroy = function(complete) {
                    elm.fadeOut(duration, function() {
                        if (complete) {
                            complete.apply(scope);
                        }
                    });
                };
            }
        };
    });;

scripts/controllers.js

@@ -1,11 +1,43 @@
'use strict';
function MainController($scope, $routeParams) {
  $scope.allowedLengths = [4, 8, 16, 32, 64, 128, 256];
  $scope.binaryLength = 64;
  $scope.binary = generateBinary($scope.binaryLength);
  $scope.binaryLength = 128;
  $scope.parts = [];
  $scope.hex = "";
  
  $scope.displayResults = function () {
      return $scope.hex.length > 0;
  };
  
  $scope.generate = function () {
      $scope.binary = generateBinary($scope.binaryLength);
      $scope.parts = [];
      $scope.hex = "";
      
      return false;
  };
  
  $scope.solve = function () {
      $scope.parts = [];
      $scope.hex = "";
      
      var original = $scope.binary;
      
      while (original.length > 0) {
          // Find the 16 bytes we need.
          var part = original.substr(-4);
          var character = binaryToHex(part);
          
          // Divvy this stuff up.
          $scope.parts.push({ "binary": part, "hex": character });
          $scope.hex = character + $scope.hex;
          
          // Remove the last four.
          original = original.substr(0, original.length - 4);
      }
      
      return false;
  };
}

scripts/utilities.js

@@ -25,7 +25,7 @@ function padLeft(number, length) {
    }
    return str;
};
}
function binaryToHex(binary) {
    var character = null;
@@ -41,7 +41,7 @@ function binaryToHex(binary) {
    }
    return character;
};
}
function generateBinary(length) {
    var binary = '';
@@ -57,4 +57,4 @@ function generateBinary(length) {
    }
    return binary;
};
}

styles/hexmeh.css

@@ -44,6 +44,10 @@ textarea, select, input, button {
    border-radius: 4px;
}
.center {
    text-align: center;
}
.right {
    float: right;
}
@@ -67,6 +71,14 @@ div[role="main"] {
    margin: 3em 2em;
}
.part {
    padding: 0.35em 1em;
    border: 1px dotted #000;
    border-radius: 4px;
    font-weight: bold;
    background-color: #eee;
}
/**
 * Buttons
 */