How to Create an Advent Calendar with JavaScript?

[MELTRONICS]

I am trying to make a web page having the advent calender.!! I have done many programs in JavaScript (i like JavaScript very much). Now I am making a advent calender with a few images on the web page. I am creating this for generations of children. So that they can they can open a door on an Advent calendar. But I don't know the exact way for creating the calender. Can anyone tell me how to create an Advent Calender with JavaScript?
Expecting some help from you guys sooner.!!

[Modifier]

Before doing the scripting for the Advent Calender I would like to suggest you to understand that calender very neatly. An Advent Calendar is a traditional object associated with Christmas and mostly children love them very much. For Christians, Advent is the four Sunday period before Christmas Day. The following logic will be more helpful while creating some coding for that. Some families representing each day from December, 1st to December, 24th with a numbered window in an advent calender. The corresponding window is open, revealing a surprise every day. Now this surprise can be candy, a little gift, a drawing,etc. Hope that you will get some help from this.

[Katty]

I would like to tell you something that can make your advent calender more attractive. The following methods explains the same :

1. It would be better if you use virtual Calendars that should offer virtual surprises. For doing this you can use an images.
2. The calender will become more attractive if you use an animated images, sounds or films related to same.
3. You will need to establish a functional specification and an architecture encompassing all the internal modules.
4. The Calendar should take the center of the page, and the other links should be at the bottom.

[Praetor]

I think that before starting with the program you should decide what all things the advent calender is going to do. Your advent calender should able to do the following things :

• Since Christmas comes on 25th, you should have 24 pictures which should be displayed on the page. You will have to take care that by default these will be covered by a numbered door.
• Then any picture of the previous days will be uncovered.
• The one who is using the calender will not be able to view the pictures for days in the future.
• The user should be able to see the picture by placing their mouse over the correct door which will be hidden behind one of the numbered doors.
• The last thing is that you will have to make sure that the the Advent calendar will only work during December.

[void]

I have provided you with the coding. If you want to calculate the current day, the following JavaScript function would be useful :

function current_day () {

var today = new Date();

var month = today.getMonth() + 1 ;

if (month == 11 ) {

return today.getDate();

} else {

return 0;

}

}

Hope that you will get some help from the above code.

[CodGuru]

For making the advent calender you will need to open and close the doors of the advent calender. So I thought providing the code for that would be useful to you. The code mentioned below in JavaScript will help you to open and close the advent calender doors :

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";
}