AngularJS Example:

by whtevn

HTML

<script src="http://code.angularjs.org/1.0.3/angular.js"></script>
<div ng-app="lifeCoach">
    <div id="ActivityCtl" ng-controller="ActivityCtl">                                   
      <form id="newActivityForm" ng-model="activity" ng-submit="addActivity()">          
        <div>
          <input type="text" ng-model="name" name="name" placeholder="activity name" />  
          <input type="text" ng-model="duration" name="duration" placeholder="duration" />
          <input type="text" ng-model="period" name="period" placeholder="period" />     
        </div>
        <div>                                                                            
          <input type="submit" />
        </div>                                                                           
      </form>                                                                            
      <ul id="activityList">
        <li ng-repeat="activity in activities">                                          
          {{activity.name}} - {{activity.completed*100}}%                                
          <a href="#" ng-click="activity.completeBy(0.25)">25%</a>                       
          <a href="#" ng-click="activity.completeBy(0.50)">50%</a>                       
          <a href="#" ng-click="activity.completeBy(0.75)">75%</a>                       
          <a href="#" ng-click="activity.completeBy(1)">100%</a>                         
        </li>
      </ul>
    </div>                                                                               
  </div>

JavaScript

var lifeCoach = angular.module("lifeCoach", []);
                                                                                         
lifeCoach.service("ActivityMgt", function(){
  var activityMgt = {};
  activityMgt.activities = [];

  activityMgt.newActivity = function(){
    // give activities a list of completions
    // activity.completions = [];
    // each time a completion rolls to 100%, a new completion with a 0% completed
    var completeBy = activityMgt.completeBy;
    var activity = {};
    activity.name        = this.name;
    activity.duration    = this.duration;
    activity.period      = this.period;                                                  
    activity.completed   = 0;
    activity.completeBy  = function(percent){
      completeBy(this, percent)
    }   
    activityMgt.activities.push(activity);
  }       
        
  activityMgt.completeBy = function(activity, percent){
    ((activity.completed += percent) > 1) && (activity.completed = 1);                       
  }     
          
  return activityMgt;
});       
          
lifeCoach.controller("ActivityCtl", ['$scope', 'ActivityMgt', function($scope, ActivityMgt){
  $scope.activities = ActivityMgt.activities;                                            
  $scope.addActivity = ActivityMgt.newActivity;                                          
}]);