How to Create an Advent Calendar with Javascript

Count Down the Days before Christmas on a Web Site

Nov 16, 2008

A Javascript Advent Calendar, Mark Alexander Bain

Millions of children will be opening a door on an Advent calendar throughout December as Chistmas approaches. Make that a web page with just a few images and Javascript

The Advent calendar, as we know it, has existed since the 19th century, and has been used by generations of children; however children in the 21st century are as (if not more) likely to be looking for a cyber Advent calendar as they are a cardboard one. However, that's not a problem because a web site developer can easily add an Advent calendar on to a web page - by using Javascript.

However, before starting programming it's worth considering exactly what the Advent calendar will do:

24 pictures will be displayed on the page, but by default these will be covered by a numbered door
any picture for previous days will be uncovered
the user will not be able to view the pictures for days in the future
the picture for the current day will be hidden behind one of the numbered doors, but the user should be able to see the picture by placing their mouse over the correct door
the Advent calendar will only work during December

Creating Pictures for the Advent Calendar

The pictures for the Advent Calendar are traditionally in a Christmas theme, for example:

Nativity scenes
Christmas trees
angels
Christmas presents

Obviously these pictures can be as detailed as required, but for simple pictures icon editors such as KIconEdit will do the job nicely (for more information on creating and using icons have a read of How to Use Javascript to Animate Snowflakes).

Placing the Pictures on a Web Page

Every web site designer will have played images on a web page, and there are a few ways to to this:

use a simple HTML table to lay out the images
modify the image's style and set its position, top and left properties

In this case the style option is the most useful because both the 'door' and the picture that it hides must occupy the same space. With that in mind it's time to start thinking about the Javascript code.

Javascript Code for an Advent Calendar Web Page

In this example a multidimensional array is used to store the coordinates of each Advent calendar item - the coordinates will be a pair of values representing the image's top and left properties.

The Javascript will also need to provide functions that will:

calculate what the current date is
open the appropriate door when the mouse is placed over it
close the appropriate door when the mouse is moved away from it

A Javascript Multidimensional Array for Storing Coordinates

The coordinate array is simple an array with 24 elements (the number of days) each element of which is another array with 2 more elements ( the top and the left of the image to be displayed):

var coords = new Array();

coords[1] = new Array(100,100);

coords[2] = new Array(140,220);

Obviously, coordinates for days 3 to 22 will be required as well

coords[23] = new Array(100,140);

coords[24] = new Array(220,60);

A Javascript Function to Calculate the Current Day

The function for calculating the current must take the following into account:

only days in December are valid
the Javascript date object counts January as 0 and December as 11

function current_day () {

var today = new Date();

var month = today.getMonth() + 1 ;

if (month == 11 ) {

return today.getDate();

} else {

return 0;

}

Javascript Function to Open and Close Advent Calendar Door

The functions for opening and closing the doors use the current_dayfunction to decide which door may be opened and then hide or reveal the appropriate images:

function open_door (day) {

if (day == current_day()) {

var door = document.getElementById("door" + day);

door.style.visibility = "hidden";

var present = document.getElementById("present" + day);

present.style.visibility = "visible";

}

function close_door (day) {

if (day == current_day()) {

var door = document.getElementById("door" + day);

door.style.visibility = "visible";

var present = document.getElementById("present" + day);

present.style.visibility = "hidden";

}

Laying out an Advent Calendar with Javascript

A simple Javascript loop can now be used to place each of the images in its correct location:

for (var i=1;i<=24;i++) {

document.write(

"<img id=present" + i +

" src=" + i + ".png style=position:absolute;top:" +

coords[i][0] + ";left:" + coords[i][1] +

";z-index:1;visibility:hidden " +

"onmouseout='close_door(" + i + ");'>");

document.write(

"<div id=door" + i +

" style=position:absolute;top:" + coords[i][0] +

";left:" + coords[i][1] +

" onmouseover='open_door(" + i + ");' >" +

"<b style=z-index:1;position:absolute>" + i + "</b>" +

"<img src=door.png " +

"style=position:absolute id=innerdoor" + i + "></div>"

);

}

Opening Advent Calendar Doors from Earlier Days

And finally any door from previous days in the month can be opened automatically - again by using a simple loop:

for (var d=1; d < current_day(); d++){

var present = document.getElementById("present" + d);

present.style.visibility = "visible";

var innerdoor = document.getElementById("innerdoor" + d);

innerdoor.style.visibility = "hidden";

}

Conclusion

The Javascript code required to create an Advent calendar for a web page is very simple - but the end result is very effective; and simple changes (such as changing the images or the image coordinates) mean that the same basic code can be repeated to give different Advent calendars on different web pages.

The copyright of the article How to Create an Advent Calendar with Javascript in Javascript/Java Programming is owned by Mark Alexander Bain. Permission to republish How to Create an Advent Calendar with Javascript in print or online must be granted by the author in writing.