For this demonstration, though, we don't want you to have to wait
until Christmas to see the special Christmas theme, so instead of using
slow-changing numbers like the month and day, we'll use a fast-changing
number, namely the second from a
To be specific, when you loaded this page, the time was HH:MM:SS, so all of our calculations and customizations will be based on the seconds, namely SS.
For fun, we'll use a Hogwarts theme, like the magical re-decorating of the Great Hall when Gryffindor overtakes Slytherin in the Quidditch Cup:
More specifically, when Slytherin wins:
Slytherin Rules and Gryffindor Droolsis inserted onto the page.
Otherwise, when Gryffindor wins:
Gryffindor Wins Againis inserted onto the page.
Just so you know:
insert taunt here
With many thanks to:
If we step back for a moment and think about this more abstractly, this page demonstrates how to customize the content (text and images) and style of a page. I'm sure you can think of other ways to customize a page, but they are likely to be based on changing the content or style.
There are lots of ways this could be done. Here's how we did the effects:
.html()method to insert the text into the
figcaptionas the children of the
#honored_personelement using jQuery's
The effects above are chosen by code that depends on
Date object, using methods to extract the number of
seconds and conditionals (
if statements) to choose
the code to run.
view source on this page to see exactly how we did