My wife and I are traveling over the next 2 months, and as an exercise I created a page to let our families and friends know our location (roughly).
The result is quite neat, and I’ll explain a few of the finer points.
The Javascript Flipping Clock is a direct borrow from a NetTuts tutorial. Javascript wizard I ain’t, but it looks pretty swell.
The current activities are stored in one array per activity for a total of 6. To determine which array to pull from, I did a fairly straight forward elseif tree:
22 23 24 25 26 27 28 29 30 31 32 33 34 35 | $array_to_use = ''; //always initialize if ($now < 1258783201) { $array_to_use = $boston; } elseif (1258783201 < $now && $now < 1258956001 ) { $array_to_use = $driving; } //many other elseif else { $array_to_use = $default; //in case the page is viewed later } $quote = $array_to_use[rand(0,count($array_to_use)-1)]; //picks one from the array |
Some key points are highlighted, and these lead to robust code: Always initialize your variables and provide default values. There’s a potentially confusing part at the end to choose the actual phrase to display.
To access an array element, you provide it with an index. The first element in $Array is $Array[0], for example. This uses several nested functions. First it counts the elements in $array_to_use and subtracts 1 (to make the first element = 0). Then it picks a random number from 0-(# of elements in array), and uses that as the index for the array. The result is that each time to access the page, it shows a pseudo-random phrase.
The timeline was all displayed using CSS and HTML. It’s hard to be semantic for something so abstract, but the code is there for your inspection. There was a fair amount of math to ensure the chart was actually to scale, and I believe I wound up at roughly 8px per day. The final bit was making the yellow indicator move (slowly) as time passed. The HTML is a fairly straightforward
118 | <div id="ticker" style="left:<?php echo $diff;?>px;"></div> |
$Diff is calculated by some subtraction and scaling of times, like so:
5 6 7 | $start = 1258092001; //midnight start date $now = time() + 3600; //plus an hour for EST $diff = round(($now-$start)/10800); //division puts it in the 3hrs/pixel range |
This is a good demonstration of some basic PHP scripting. Let me know if you have any questions about it.