One of the cool things you can do with JavaScript is to use it to customize your page, in style and content. This page describes and demonstrates using JavaScript to customize a page to depend on the date. In real life, you might use this ability to change the style of the page based on the seasons (fall colors in September and October, and so forth). You might show a different picture based on the month or the day of the week. In principle, there are lots of different kinds of things you could do, and lots of different time conditions you could use.
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 Date
object.
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:
.addclass()
method.
.html()
method to insert the
text into the #taunt
element.
img
and a figcaption
as the children of the #honored_person
element using
jQuery's .append()
method.
The effects above are chosen by code that depends on
a Date
object, using methods to extract the number of
seconds and conditionals (if
statements) to choose
the code to run.
Use view source
on this page to see exactly how we did
it.