aaronott/lifeblocks.html

## lifeblocks.html
<html>
  <head>
    <title>life in blocks</title>

    <style>
      span {
        width:5px;
        height:8px;
        border:1px solid black;
        display:block;
        float:left;
        margin: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
      }

      .past {
        background-color: #CCE;
      }

      .retire {
        background-color: #ECC;
      }

      #div_form {
        margin: 10px 0;
        clear: both;
      }
    </style>
  </head>
  <body>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
    $(document).ready(function(){
      var years=90;
      var weeks_in_a_year=52;
      var retire = 65;

      function calculate( past ) {
        $('#block_square').empty();
        for (var i=0; i < years * weeks_in_a_year; i++) {
          var newSpan = document.createElement( "span" );
          if (i < past) {
            $(newSpan).addClass('past');
          }
          else if (i > (years - (years - retire)) * weeks_in_a_year) {
            $(newSpan).addClass('retire');
          }
          $('#block_square').append( newSpan);
        }
      }

      calculate(0);

      $('#submit').click(function(e){
          e.preventDefault();
        var d = $('#date').val();
        var a  = new Date();
        var b = new Date(d);
        var weeks = Math.round((a-b)/ 604800000);
        alert(weeks);
        calculate(weeks);
      });
    });

  </script>
    <div id="block_square">
    </div>

    <div id="div_form">
      <label>Add your birthday in the form of YYYY-MM-DD</label>
      <input type="text" id="date" />
      <input type="submit" id="submit" value="Go" />
  </div>
  </body>
</html>
	<html>
	<head>
	<title>life in blocks</title>

	<style>
	span {
	width:5px;
	height:8px;
	border:1px solid black;
	display:block;
	float:left;
	margin: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	}

	.past {
	background-color: #CCE;
	}

	.retire {
	background-color: #ECC;
	}

	#div_form {
	margin: 10px 0;
	clear: both;
	}
	</style>
	</head>
	<body>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	$(document).ready(function(){
	var years=90;
	var weeks_in_a_year=52;
	var retire = 65;

	function calculate( past ) {
	$('#block_square').empty();
	for (var i=0; i < years * weeks_in_a_year; i++) {
	var newSpan = document.createElement( "span" );
	if (i < past) {
	$(newSpan).addClass('past');
	}
	else if (i > (years - (years - retire)) * weeks_in_a_year) {
	$(newSpan).addClass('retire');
	}
	$('#block_square').append( newSpan);
	}
	}

	calculate(0);

	$('#submit').click(function(e){
	e.preventDefault();
	var d = $('#date').val();
	var a = new Date();
	var b = new Date(d);
	var weeks = Math.round((a-b)/ 604800000);
	alert(weeks);
	calculate(weeks);
	});
	});

	</script>
	<div id="block_square">
	</div>

	<div id="div_form">
	<label>Add your birthday in the form of YYYY-MM-DD</label>
	<input type="text" id="date" />
	<input type="submit" id="submit" value="Go" />
	</div>
	</body>
	</html>