How to Animate the Twelve Days of Christmas: Update a Simple Christmas Rhyme with a Little Javascript Code

"The Twelve Days of Christmas" is popular throughout Europe and America; the words to the rhyme were first published in 1780 but the tune has been around since at least the 16th century. Now, of course, it can be brought into the 21st century by placing it on a web site and using Javascript to animate this well known Christmas carol.

The lyrics for the "The Twelve Days of Christmas" could, of course, be displayed as static text on a web page; however, it's easy to make the web page more interesting by using Javascript to:

Laying Out the Web Page

<body>

<tr>

<td id=box_1 width=8.33% align=center

onmouseover="show_days(1)" onmouseout="hide_days()">1</td>

<td id=box_2 width=8.33% align=center

onmouseover="show_days(2)" onmouseout="hide_days()">2</td>

<td id=box_3 width=8.33% align=center

onmouseover="show_days(3)" onmouseout="hide_days()">3</td>

<td id=box_4 width=8.33% align=center

onmouseover="show_days(4)" onmouseout="hide_days()">4</td>

<td id=box_5 width=8.33% align=center

onmouseover="show_days(5)" onmouseout="hide_days()">5</td>

<td id=box_6 width=8.33% align=center

onmouseover="show_days(6)" onmouseout="hide_days()">6</td>

<td id=box_7 width=8.33% align=center

onmouseover="show_days(7)" onmouseout="hide_days()">7</td>

<td id=box_8 width=8.33% align=center

onmouseover="show_days(8)" onmouseout="hide_days()">8</td>

<td id=box_9 width=8.33% align=center

onmouseover="show_days(9)" onmouseout="hide_days()">9</td>

<td id=box_10 width=8.33% align=center

onmouseover="show_days(10)" onmouseout="hide_days()">10</td>

<td id=box_11 width=8.33% align=center

onmouseover="show_days(11)" onmouseout="hide_days()">11</td>

<td id=box_12 width=8.33% align=center

onmouseover="show_days(12)" onmouseout="hide_days()">12</td>

</tr>

</table>

On the <span id=day_name></span> day of Christmas,<br />

my true love sent to me</div>

<div id=day_12>Twelve drummers drumming,</div>

<div id=day_11>Eleven pipers piping,</div>

<div id=day_10>Ten lords a-leaping,</div>

<div id=day_9>Nine ladies dancing,</div>

<div id=day_8>Eight maids a-milking,</div>

<div id=day_7>Seven swans a-swimming,</div>

<div id=day_6>Six geese a-laying,</div>

<div id=day_5>Five golden rings,</div>

<div id=day_4>Four calling birds,</div>

<div id=day_3>Three French hens,</div>

<div id=day_2>Two turtle doves,</div>

<div id=day_1><span id=and></span>a partridge in a pear tree!

</center>

</body>

The Javascript Code for the "The Twelve Days of Christmas"

The Function for Revealing Lines of the Song

The function will require an array of the days to be displayed in the first line of the song:

var day_names = new Array (

"blank","first","second","third","forth","fifth","sixth",

"seventh","eighth","ninth","tenth","eleventh","twelfth");

Using the data from the array the function update the first line and then makes it visible:

function show_days(day) {

var day_name = document.getElementById("day_name");

day_name.innerHTML = day_names[day];

document.getElementById("first_line").style.visibility = "";

var box = document.getElementById("box_" + day);

box.style.backgroundColor = "yellow";

if (day == 1) {

document.getElementById("and").innerHTML = "";

} else {

document.getElementById("and").innerHTML = "and ";

}

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

var day_line = document.getElementById("day_" + i);

day_line.style.height = "auto";

day_line.style.visibility = "";

}

The Function for Hiding Lines of the Song

The function simple hides the first line's of the song and a loop hides the line for each day of the song:

function hide_days() {

document.getElementById("first_line").style.visibility = "hidden";

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

var box = document.getElementById("box_" + i);

box.style.backgroundColor = "transparent";

var day_line = document.getElementById("day_" + i);

day_line.style.visibility = "hidden";

day_line.style.height = "0px";

}

And as soon as the page has been loaded the Javascript hides all of the lines of the carol automatically:

hide_days();

</script>

Conclusion

Just by adding two simple Javascript functions the web page developer can turn a simple, static web page into a much more interesting activity for the user.

The copyright of the article How to Animate the Twelve Days of Christmas in Javascript/Java Programming is owned by Mark Alexander Bain. Permission to republish How to Animate the Twelve Days of Christmas in print or online must be granted by the author in writing.