Skip to content

Instantly share code, notes, and snippets.

@aaronott
Created March 17, 2016 03:17
Show Gist options
  • Save aaronott/9930672ecf56e4bb6dd1 to your computer and use it in GitHub Desktop.
Save aaronott/9930672ecf56e4bb6dd1 to your computer and use it in GitHub Desktop.
lifeblocks
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment