That's really cool.
Allow me to save the source:
<html>
<head>
<style>
.harry {
color: #ff0000;
}
.short {
color: #0000ff;
}
.novel {
color: #00aa00;
}
table, td {
border: solid thin black;
}
</style>
</head>
<body>
<script type="text/javascript">
function year_calc(data) {
var year = parseInt(data.year.value);
var age = parseInt(data.age.value);
var yearpre = year + 25 - age;
var result = "<table style\"width:100px;\">\n"
+ "<tr><td style=\"width:400px;\">Story/Event</td><td style=\"width:600px;\">Estimated Date</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry Dresden is Born</strong></td><td style=\"width:600px;\">October 31st, " + (yearpre - 26) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Malcolm Dresden dies (6)</strong></td><td style=\"width:600px;\">After October 31st, "
+ (yearpre - 20) + ", before October 31st, " + (yearpre-19) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry learns shielding (10)</strong></td><td style=\"width:600px;\">After October 31st, "
+ (yearpre - 16) + ", before October 31st, " + (yearpre-15) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry learns shielding (12)</strong></td><td style=\"width:600px;\">After October 31st, "
+ (yearpre - 14) + ", before October 31st, " + (yearpre-13) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry kills Justin (16)</strong></td><td style=\"width:600px;\">After October 31st, "
+ (yearpre - 10) + ", before October 31st, " + (yearpre-9) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry leaves Ebenezzar (19)</strong></td><td style=\"width:600px;\">After October 31st, "
+ (yearpre - 7) + ", before October 31st, " + (yearpre-6) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry arrives in Chicago</strong></td><td style=\"width:600px;\">[Sometime in "
+ (yearpre - 6) + " or " + (yearpre - 5)+ "]</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry joins Ragged Angel</strong></td><td style=\"width:600px;\">[Sometime in "
+ (yearpre - 5) + ", possibly " + (yearpre - 6) + "]</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Restoration of Faith</u></em></td><td style=\"width:600px;\">Sometime in [late] "
+ (year - 3) + " or [early] " + (year - 2) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Harry starts his own detective agency</strong></td><td style=\"width:600px;\">[Sometime in "
+ (year - 2)+ "]</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Welcome to the Jungle</u></em></td><td style=\"width:600px;\">Sometime in "
+ (year - 1) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Storm Front</td><td style=\"width:600px;\">March " + year + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Fool Moon</td><td style=\"width:600px;\">October " + year + " (during Full Moon)</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>B is for Bigfoot</u></em></td><td style=\"width:600px;\">Sometime in " + (year + 1) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Ghoul Goblin</u></em></td><td style=\"width:600px;\">After October "
+ (year) + ", before October " + (year+1) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Grave Peril</td><td style=\"width:600px;\">October " + (year+1) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Summer Knight</td><td style=\"width:600px;\">June " + (year+2) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Death Masks</td><td style=\"width:600px;\">Late February " + (year+3) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"harry\"><strong>Maggie is born</strong></td><td style=\"width:600px;\">Tail end of " + (year+3) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Vignette</u></em></td><td style=\"width:600px;\"> Sometime in " + (year+3) + " or " + (year+4) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Blood Rites</td><td style=\"width:600px;\">Late Autumn " + (year+4) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Dead Beat</td><td style=\"width:600px;\">October 31st, " + (year+5) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>I Was a Teenage Bigfoot</u></em></td><td style=\"width:600px;\">November(?) " + (year+5) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Somthing Borrowed</u></em></td><td style=\"width:600px;\"> Spring/Summer " + (year+6) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Proven Guilty</td><td style=\"width:600px;\">July " + (year+6) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">White Night</td><td style=\"width:600px;\">May " + (year+7) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>It's My Birthday, Too</u></em></td><td style=\"width:600px;\">February 14th, " + (year+8) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Heorot</u></em></td><td style=\"width:600px;\">October " + (year+8) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Small Favor</td><td style=\"width:600px;\">Late November " + (year+8) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Backup</u></em></td><td style=\"width:600px;\">Early March " + (year+9) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Day Off</u></em></td><td style=\"width:600px;\">[Spring?] " + (year+9) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>The Warrior</u></em></td><td style=\"width:600px;\">Summer " + (year+9) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Curses</u></em></td><td style=\"width:600px;\">Summer [late July or August]" + (year+9) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>AAAA Wizardry</u></em></td><td style=\"width:600px;\">Between May " + (year+9) + " and Summer " + (year+10) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u></u>Last Call</em></td><td style=\"width:600px;\">March " + (year+10) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Turn Coat</td><td style=\"width:600px;\">Summer " + (year+10) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Bigfoot On Campus</u></em></td><td style=\"width:600px;\">mid-October " + (year+10) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Even Hand</u></em></td><td style=\"width:600px;\">March " + (year+11) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Love Hurts</u></em></td><td style=\"width:600px;\">September " + (year+11) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Changes</td><td style=\"width:600px;\">October " + (year+11) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Aftermath</u></em></td><td style=\"width:600px;\">October " + (year+11) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Ghost Story</td><td style=\"width:600px;\">May 9th, " + (year+12) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"short\"><em><u>Bombshells</u></em></td><td style=\"width:600px;\">between May 10th and October 30th " + (year+12) + "</td></tr>\n"
+ "<tr><td style=\"width:400px;\" class=\"novel\">Cold Days</td><td style=\"width:600px;\">October 31st, " + (year+12) + "</td></tr>\n"
+ "</table>";
var change = document.getElementById('output');
output.innerHTML = result;
return result;
}
</script>
<h3>Dresden Timeline Adjuster</h3>
<p>Based on the timeline found <a href="http://www.jimbutcheronline.com/bb/index.php/topic,1592.0.html">here</a>, I've tried to place a year to the
novels and short stories (I'll attempt to expand this, eventually). Just insert the year you believe <em><strong>Storm Front</strong></em> takes
place in and hit the button - this page will handle the rest.</p>
<p>Text in <text class="harry">red</text> represents key moments in Harry's life before Storm Front, plus a few extra items.
Text in <text class="novel">green</text> are the spots for full-length novels.
Text in <text class="short">blue</text> represents all of the other short stories and graphic novels published to date or known to be coming out.</p>
<p>Any text in brackets is personal extrapolation.</p>
<form>
Year for Storm Front:<input name="year" type="text" value=2000> Harry's Age:<input name="age" type="text" value=25><br/>
<input type="submit" value="Calculate" onClick="year_calc(this.form); return false;"><br />
</form>
<p>
<div id="output" style="width:1000px;">
<br />
</div>
</p>
</body>
</html>