itsgreggreg/tracker.html

## tracker.html
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
        <script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
        <link rel="stylesheet" href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css">
        <script src="tracker.js"></script>
        <script id="activity-template" type="text/x-handlebars-template">
            <div class="activity">
              <h3>{{activity}}</h3>
            </div>
        </script>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Track your Time</legend>
                <div>
                    <input type="text" placeholder="Start Time" name="start">
                </div>
                <div>
                    <input type="text" placeholder="End Time" name="end">
                </div>
                <div>
                    <input type="text" placeholder="Activity Name" name="activity">
                </div>
                <div>
                    <input type="submit" value="Submit!">
                </div>
            </fieldset>
        </form>
        <h2>All Activities</h2>
        <div id="activities"></div>
    </body>
</html>

## tracker.js
$(document).on("ready", function(){
  var activitySource   = $("#activity-template").html();
  var activityTemplate = Handlebars.compile(activitySource);

  var options = {
      step: 15,
      disableTextInput: true
  };

  $('input[name=start]').timepicker(options);
  $('input[name=end]').timepicker(options);

  $("form").on("submit", function(event){
      event.preventDefault();

      var newActivity = {
          start: $('input[name=start]').val(),
          end: $('input[name=end]').val(),
          activity: $('input[name=activity]').val()
      }
      $('#activities').prepend(activityTemplate(newActivity));
      console.log(activityTemplate);

  });

});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
	<link rel="stylesheet" href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css">
	<script src="tracker.js"></script>
	<script id="activity-template" type="text/x-handlebars-template">
	<div class="activity">
	<h3>{{activity}}</h3>
	</div>
	</script>
	</head>
	<body>
	<form>
	<fieldset>
	<legend>Track your Time</legend>
	<div>
	<input type="text" placeholder="Start Time" name="start">
	</div>
	<div>
	<input type="text" placeholder="End Time" name="end">
	</div>
	<div>
	<input type="text" placeholder="Activity Name" name="activity">
	</div>
	<div>
	<input type="submit" value="Submit!">
	</div>
	</fieldset>
	</form>
	<h2>All Activities</h2>
	<div id="activities"></div>
	</body>
	</html>
	$(document).on("ready", function(){
	var activitySource = $("#activity-template").html();
	var activityTemplate = Handlebars.compile(activitySource);

	var options = {
	step: 15,
	disableTextInput: true
	};

	$('input[name=start]').timepicker(options);
	$('input[name=end]').timepicker(options);

	$("form").on("submit", function(event){
	event.preventDefault();

	var newActivity = {
	start: $('input[name=start]').val(),
	end: $('input[name=end]').val(),
	activity: $('input[name=activity]').val()
	}
	$('#activities').prepend(activityTemplate(newActivity));
	console.log(activityTemplate);

	});

	});