Add remainder display and wire up checkboxes

Option amounts are too small to cause visualization to change.

grid.js

@@ -85,6 +85,9 @@ function gridData(cost) {
     console.log('accumulated cost: ' + accumulatedCost);
     document.getElementById('totalDisplay').innerHTML = "$" + commify(accumulatedCost);
 
+    var remaining = totalCost - accumulatedCost;
+    document.getElementById('remainder').innerHTML = "$" + commify(remaining);
+
     fillBoxes = accumulatedCost / costPerSquare;
     console.log('fills boxes: ' + fillBoxes);
 
@@ -195,6 +198,10 @@ for (var i=0; i < options.length; i++) {
     checkbox.name = opt.name;
     checkbox.value = opt.cost;
     checkbox.id = i;
+    checkbox.onclick = function() {
+        console.log('clicked for ' + opt.name);
+        gridData(opt.cost);
+    }
 
     var label = document.createElement('label')
     label.htmlFor = i;

index.html

@@ -35,6 +35,7 @@ <h1>The Opportunity Cost of Gun Violence</h1>
     <div id="spendOptions"></div>
     <button id="updateBtn">Update</button>
     <p>Total Spent: <a id="totalDisplay">0</a></p>
+    <p>Total Remainder: <a id="remainder"></a></p>
     </script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>