gistfile1.txt

Problem: Give the user feedback when she adds a recipe to her favorites or her basket.
(new page)
Solution: Badge icon that displays and catches the users attention through bouncing quickly.
(new page)

  function bindAddTo(destination, badge) {
    $('.add-to-' + destination).on('click', function(e) {
      e.preventDefault();
      var recipeContainer = $(this).closest('.recipe-container');
      badge.add($(this).attr('href'), recipeContainer);
    });
  }

  function bindRemoveFrom(destination, badge) {
    $('.remove-from-' + destination).on('click', function(e) {
      e.preventDefault();
      var recipeContainer = $(this).closest('.recipe-container');
      badge.remove($(this).attr('href'), recipeContainer);
    });
  };
(new page)
Problem: Even after refactoring it was getting out of hand.
(new page)
Solution: Make a Badge class!
  * reusabability
  * separation of concerns
  * prototyping 

  --> Here's the beginning of that class!
(new page)


function Badge(destination) {
  this.destination = destination;
  var self = this;

  this.refresh().done(function(itemCount) {
    self.render(itemCount);
  });
}

Badge.prototype.render = function(itemCount, options) {
  options = options || {}
  var $destinationLink = $('#' + this.destination + '-link');
  if (itemCount === 0) {
    $destinationLink.find('.badger-outter').remove();
  } else {
    var newCount = itemCount.toString();
    $destinationLink.badger(newCount);
    if (options.bounce) {
      $destinationLink.stop().effect('bounce', {times: 1}, "fast");
    }
  }
}

Thank you Badger