Learn JS and JQ

Silly project to learn JS and JQ

by Palpatim

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
  <div id="content" class="col-md-4">
    <div class="visit-tracker">
      <h1>David Visits&nbsp;&nbsp;<span class="label label-default click-tracker-result" id="count">0</span></h1>
      <div class="progress">
        <div id="percent" class="progress-bar click-tracker-progress" role="progressbar" style="width: 0"></div>
      </div>
      <button id="button1" class="btn click-tracker-increment">Add Visit</button>
      <button id="button2" class="btn click-tracker-decrement">Remove Visit</button>
    </div>
    <div class="visit-tracker">
      <h1>Joey Visits&nbsp;&nbsp;<span class="label label-default click-tracker-result" id="count2">0</span></h1>
      <div class="progress">
        <div id="percent2" class="progress-bar click-tracker-progress" role="progressbar" style="width: 0"></div>
      </div>
      <button id="button3" class="btn click-tracker-increment">Add Visit</button>
      <button id="button4" class="btn click-tracker-decrement">Remove Visit</button>
    </div>
    <div class="visit-tracker">
      <h1>Times CS Leaves Early for no Reason&nbsp;&nbsp;<span class="label label-default click-tracker-result" id="count3">0</span></h1>
      <div class="progress">
        <div id="percent3" class="progress-bar click-tracker-progress" role="progressbar" style="width: 0%"></div>
      </div>
      <button id="button5" class="btn click-tracker-increment">Add Early Leave</button>
      <button id="button6" class="btn click-tracker-decrement">Remove Early Leave</button>
    </div>
  </div>
</body>

JavaScript

$(document).ready(function() {
  $('.visit-tracker').each(function(i, el) {
    ClickTracker(el);
  });
});

/**
 Given a DOM element `container`, instrument it to track clicks of an "increment" and "decrement" button.

 The ClickTracker initializer will take the following actions
   * Add a click handler to `click-tracker-increment`
   * Add a click handler to `click-tracker-decrement`
   * Upon a click, adjust the count appropriately, and:
     * Replace the innerHTML of `click-tracker-result` with the new integer value
     * Update the `click-tracker-progress` value


  - parameter container: A DOM element with one child for each of the following classes: 
                         click-tracker-increment, click-tracker-decrement, and click-tracker-result
 */
function ClickTracker(container, minCount, maxCount) {
  // Any `var`s or `function`s we define inside "ClickTracker" will be scoped
  // to just one instance of ClickTracker. They will also be available to any
  // functions declared within ClickTracker.

  // The current count of this ClickTracker instance.
  var currentCount = 0;

  // Set sane defaults for the optional "minCount" and "maxCount" arguments
  minCount = typeof minCount === 'number' ? minCount : 0;
  maxCount = typeof maxCount === 'number' ? maxCount : 10;

  var $el = $(container);
  var $result = $el.find('.click-tracker-result');
  var $progress = $el.find('.click-tracker-progress');
  var $incButton = $el.find('.click-tracker-increment');
  var $decButton = $el.find('.click-tracker-decrement');

  // NOTE: It would be possible to do some validation at this point, to ensure the presence of 
  // all required elements. We're going to ignore that for this exercise.

  /**
   Updates the `click-tracker-result` element's innerHTML with the current count
   */
  function updateResult() {
    $result.html(currentCount);
  }

  /**
   Updates the `click-tracker-progress` element's style according to the current count.
   */
  function...