Implements a more modularized and testable code

djGrill · Nov 2, 2013 · b4f0c79 · b4f0c79
1 parent 5914eae
commit b4f0c79
Show file tree

Hide file tree

Showing 11 changed files with 263 additions and 177 deletions.
diff --git a/config.ru b/config.ru
@@ -1,5 +1,5 @@
 use Rack::Static,
-    urls: ["/img", "/js", "/css"],
+    urls: ["/img", "/javascripts", "/css"],
     root: "public"
 
 map "/" do

diff --git a/public/index.html b/public/index.html
@@ -3,9 +3,7 @@
 <head>
   <title>BBC - British Binary Coins</title>
   <link href="/css/main.css" media="all" rel="stylesheet" type="text/css">
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-  <script src="/js/underscore-min.js" type="text/javascript"></script>
-  <script src="/js/functions.js" type="text/javascript"></script>
+  <script data-main="javascripts/main" src="/javascripts/require.js" type="text/javascript"></script>
 </head>
 
 <body>

diff --git a/public/javascripts/Constants.js b/public/javascripts/Constants.js
@@ -0,0 +1,8 @@
+define([], function() {
+  var Constants = {
+    "DECIMAL_MULTIPLIER": 100,
+    "VALID_COINS": [2, 1, 0.5, 0.2, 0.02, 0.01]
+  };
+
+  return Constants;
+});
diff --git a/public/javascripts/FormHelper.js b/public/javascripts/FormHelper.js
@@ -0,0 +1,81 @@
+define(["jquery", "underscore", "SterlingValidator", "FormatHelper", "PenniesCalculator", "Constants"],
+  function($, _, SterlingValidator, FormatHelper, PenniesCalculator, Constants) {
+
+  function FormHelper() {}
+
+
+  /**
+   * Handles the validation of the user input
+   * If the input is valid, run the calculator. If not, show error message
+   * @param {string} input Input text form the user
+   */
+  FormHelper.prototype.processInput = function(input) {
+    var validator = new SterlingValidator(input);
+
+    if (validator.validate()) {
+      var formatHelper = new FormatHelper();
+      var numericInput = formatHelper.roundToDecimalPlace(formatHelper.convertToValidFloat(input));
+      var calculator = new PenniesCalculator(numericInput);
+      this.showResult(calculator.calculate());
+    } else {
+      $("#result").html("Error: wrong format");
+    }
+  };
+
+
+  /**
+   * Loads result in a friendly format into the page
+   * @param {object} result Data to show
+   */
+  FormHelper.prototype.showResult = function(result) {
+
+    /**
+     * Returns the name of the coin in a human-friendly format. For example:
+     * 1 => £1
+     * 0.20 => 20p
+     * @param {string} coin Numeric name of the coin
+     */
+    function getHumanizedCoinName(coin) {
+      if (/\./.test(coin)) {
+        coin *= Constants.DECIMAL_MULTIPLIER;
+        coin += "p";
+      } else {
+        coin = "\xA3" + coin;
+      }
+
+      return coin;
+    }
+
+    function isPence(coinName) {
+      return (/p$/.test(coinName));
+    }
+
+    // reverse the keys order to show result sorted by coin value
+    var resultKeys = Object.keys(result).sort().reverse();
+
+    var $ul = $("<ul>");
+    $ul.addClass("coins");
+
+    _.each(resultKeys, function(key) {
+      var $li = $("<li>");
+      var coinName = getHumanizedCoinName(key);
+
+      var $newCoin = $("<span>");
+      $newCoin.html(coinName);
+      $newCoin.addClass("coin");
+
+      if (isPence(coinName)) {
+        $newCoin.addClass("pence");
+      }
+
+      $li.html(result[key] + " x");
+      $li.append($newCoin);
+      $ul.append($li);
+    });
+
+    $("#result").html($ul);
+  };
+
+
+  return FormHelper;
+});
diff --git a/public/javascripts/FormatHelper.js b/public/javascripts/FormatHelper.js
@@ -0,0 +1,41 @@
+define(["Constants"], function(Constants) {
+
+  function FormatHelper() {}
+
+
+  /**
+   * Converts str and returns a float number with 2 decimal values. For example:
+   * £1.25 => 1.25
+   * 125 => 1.25
+   * 25p => 0.25
+   * @param {string} str String to convert
+   */
+  FormatHelper.prototype.convertToValidFloat = function(str) {
+    var number = /\d+(\.\d+)?/.exec(str)[0];
+
+    // if str has the format "£NUMBER" (pounds only), convert number to "NUMBER.00"
+    if (/^\xA3\d+$/.test(str)) {
+      number += ".00";
+    }
+
+    // if str has the format "NUMBER" or "NUMBERp" (pences only), convert number to
+    // -- the POUND.pence version with decimal numbers (determined by DECIMAL_MULTIPLIER)
+    if (/^\d+p?$/.test(str)) {
+      number /= Constants.DECIMAL_MULTIPLIER;
+    }
+
+    return parseFloat(number);
+  };
+
+
+  /**
+   * Returns the number rounded to de decimal place specified by DECIMAL_MULTIPLIER
+   * @param {number} number Number to convert
+   */
+  FormatHelper.prototype.roundToDecimalPlace = function(number) {
+    return Math.round(number * Constants.DECIMAL_MULTIPLIER) / Constants.DECIMAL_MULTIPLIER;
+  };
+
+
+  return FormatHelper;
+});
diff --git a/public/javascripts/PenniesCalculator.js b/public/javascripts/PenniesCalculator.js
@@ -0,0 +1,43 @@
+define(["underscore", "Constants", "FormatHelper"],
+
+  function(_, Constants, FormatHelper) {
+
+  /**
+   * Calculates the minimum amount of VALID_COINS needed to make the specified amount
+   * @constructor
+   * @param {float} numericInput Valid amount specified by the user
+   */
+  function PenniesCalculator(numericInput) {
+    this.numericInput = numericInput;
+  }
+
+
+  PenniesCalculator.prototype.calculate = function() {
+    // here we'll store the amount of each type of coin needed
+    var resultCoins = {};
+    var formatHelper = new FormatHelper();
+
+    function updateResultCoins(coin) {
+      if (!resultCoins[coin]) {
+        resultCoins[coin] = 1;
+      } else {
+        resultCoins[coin] += 1;
+      }
+    }
+
+    _.each(Constants.VALID_COINS, function(coin, index) {
+      while (this.numericInput >= coin) {
+        updateResultCoins(coin);
+        this.numericInput -= coin;
+
+        // make sure that numericInput is properly rounded
+        this.numericInput = formatHelper.roundToDecimalPlace(this.numericInput);
+      }
+    }, this);
+
+    return resultCoins;
+  };
+
+
+  return PenniesCalculator;
+});
diff --git a/public/javascripts/SterlingValidator.js b/public/javascripts/SterlingValidator.js
@@ -0,0 +1,21 @@
+define([], function() {
+
+  /**
+   * Used to validate an input that represents an Sterling value
+   * @constructor
+   * @param {string} input Input text from the user
+   */
+  function SterlingValidator(input) {
+    this.input = input;
+    this.pattern = /^\xA3?\d+(\.\d*)?p?$|^\d+p?$/;
+  }
+
+
+  // returns true if this.input matches this.pattern
+  SterlingValidator.prototype.validate = function() {
+    return this.pattern.test(this.input);
+  };
+
+
+  return SterlingValidator;
+});
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
@@ -0,0 +1,31 @@
+requirejs.config({
+  paths: {
+    jquery: "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min",
+    underscore: "underscore-min"
+  },
+
+  shim: {
+    underscore: {
+      exports: '_'
+    },
+    jquery: {
+      exports: "$"
+    }
+  }
+});
+
+require(["jquery", "FormHelper"], function($, FormHelper) {
+  $(function() {
+    $("#input-amount").focus();
+
+    $("#form-calculate").submit(function(e) {
+      e.preventDefault();
+      var inputVal = $.trim($("#input-amount").val());
+
+      if (inputVal) {
+        var formHelper = new FormHelper();
+        formHelper.processInput(inputVal);
+      }
+    });
+  });
+});