In this tutorial, you\u2019ll learn how to craft your own Advent Calendar using object-oriented JavaScript<\/strong>. This project uses plain JavaScript, making it simple to integrate into your website.<\/p>\n <\/i> View demo<\/span><\/a>\n<\/i> Download source<\/span><\/a><\/p>\n Our digital Advent Calendar features 24 interactive doors set against a festive background. Each door, when clicked, reveals a Christmas-themed quote in an alert message. True to tradition, doors can only be opened on their respective dates, mimicking the suspense of a physical Advent Calendar. Active doors are distinguished with a white border and background, while inactive ones are light green. We leverage HTML5, CSS3, and JavaScript to craft this engaging holiday countdown.<\/p>\n To begin, select a fitting background image. For my project, I opted for a portrait-oriented image from Pixabay<\/a>, arranging the calendar in 4 columns and 6 rows<\/strong>. You can choose a landscape orientation if preferred \u2013 simply adjust the door positions in the JavaScript code to 6 columns and 4 rows<\/strong>.<\/p>\n Once you have your image, create a folder named \/images<\/strong> in your project directory and save the image there. This will be our sole image resource for the project.<\/p>\n Next, prepare the JavaScript files by creating a \/scripts<\/strong> folder in the root directory. Add two empty files named calendar.js<\/strong> and messages.js<\/strong>. Calendar.js<\/strong> will manage the calendar\u2019s functionality, while messages.js<\/strong> will store the pop-up messages for each day.<\/p>\n Additionally, create two empty files named index.html<\/strong> and style.css<\/strong> in the root directory for your HTML and CSS code, respectively.<\/p>\n With these resources and file structure in place, you\u2019re all set to start building your Advent Calendar. Here\u2019s what your root folder should look like:<\/p>\n The HTML structure for our Advent Calendar is straightforward. The CSS stylesheet is linked within the <head><\/strong> section, while the two JavaScript files are placed at the bottom of the <body> section<\/strong> to ensure they load after the HTML elements they manipulate. This setup prevents execution errors that occur if scripts are loaded before the HTML elements they reference.<\/p>\n The core of the Advent Calendar is contained within an <article><\/strong> semantic tag<\/a>. The festive background image is embedded directly using an <img><\/strong> tag rather than as a CSS background to facilitate easier DOM manipulation.<\/p>\n Below the image, an empty unordered list with the ID \u201cadventDoors\u201d<\/strong> is prepared. This list will be dynamically filled by the JavaScript. For users without JavaScript enabled, they will see only the static Christmas image, ensuring basic functionality remains intact.<\/p>\n To bring our Advent Calendar to life, we need 24 festive quotes. I\u2019ve selected my favorites from GoodReads<\/a>. You can choose your own source for quotes that resonate with the holiday spirit.<\/p>\n In the scripts\/messages.js<\/strong> file, we will separate these quotes from the main functionality. Each quote is stored within a nested array structure in the messages<\/strong> array, with each element consisting of a quote and its author. Populate your array using the following structure:<\/p>\n Before scripting the door functionality, we need to establish the visual design using CSS. Envisioning the final layout, we will organize the doors into 4 columns and 6 rows. To achieve this, we use position: relative<\/strong> for the container and position: absolute<\/strong> for each door, allowing precise control over their placement through additional CSS properties specified in the JavaScript.<\/p>\n It\u2019s also crucial to distinguish between active and inactive doors. The .disabled<\/strong> class will be applied dynamically by JavaScript to inactive doors. Below, you\u2019ll find the CSS needed for the enabled state (white border and text with a translucent white background on hover) and the disabled state (light green text and border with a translucent light green background). Feel free to adjust the colors and styles to match your design preferences.<\/p>\n From this point, our focus shifts exclusively to the scripts\/calendar.js<\/strong> file. We need to define two global variables essential for our Advent Calendar\u2019s functionality.<\/p>\n The myCal<\/strong> variable represents the calendar image, now a JavaScript object. This image was embedded in the index.html<\/strong> file back in Step 2. We\u2019ll be positioning doors over this image in Step 7. We identify the image in our script using the getElementById()<\/a> method, making myCal<\/strong> an HTMLImageElement<\/a> DOM object.<\/p>\n The currentDate<\/strong> variable captures today\u2019s date, which helps our script determine which doors should be active or inactive. This is achieved by creating a new instance of the Date<\/a> class.<\/p>\n Insert this code at the beginning of your calendar.js<\/strong> file:<\/p>\n Our calendar will feature 24 doors, each represented by an instance of a \u201cDoor\u201d class. This class takes two parameters: calendar<\/strong>, the background image, and day<\/strong>, the specific day in December it represents.<\/p>\n The values for these parameters will be assigned during the final instantiation phase in Step 8. Here, we outline the five properties and one method that constitute the Door class. The method content()<\/strong> will be discussed in the next step.<\/p>\n The width<\/strong> and height<\/strong> properties dynamically adjust to the size of the background image. We use multipliers to leave space for margins between doors and along the edges of the calendar.<\/p>\n This property stores the quote and author for each door, retrieved from the messages[]<\/strong> array based on the current date. For example, on December 1st, messages[0]<\/strong> is accessed since arrays in JavaScript are zero-indexed.<\/p>\n The x<\/strong> and y<\/strong> properties determine the precise position of each door, aiding in setting the CSS top<\/strong> and left<\/strong> properties. These calculations use margins and multipliers to ensure proper placement within the grid structure defined in Step 4.<\/p>\n The content()<\/strong> method is crucial as it dynamically displays doors within the browser. We start by creating a new DOM node, node<\/strong>, to generate the <li><\/strong> elements. Each of these elements represents a door within the unordered list #adventDoors<\/strong>, previously defined in our HTML.<\/p>\n Once the Door class is instantiated 24 times (as we\u2019ll do in Step 8), we will have 24 corresponding <li> elements. These are added to the unordered list using the appendChild()<\/a> method.<\/p>\n Each door\u2019s unique identifier is set using the node.id<\/strong> property, formatting each as id=\u201ddoor1\u2033<\/strong>, id=\u201ddoor2\u2033<\/strong>, etc. This setup is vital for the looping mechanism in the next step.<\/p>\n The door\u2019s inline style is defined via the node.style.cssText<\/strong> property, incorporating CSS rules directly within our HTML. This application uses positional attributes and dimensions defined in Step 6.<\/p>\n An <a><\/strong> tag is embedded within each door to make them interactive, using the innerNode<\/strong> variable. This link is appended to the corresponding list item and displays the door number using the innerHTML<\/strong> property. The href=\u201d#\u201d<\/strong> attribute ensures that the links are clickable but do not navigate away from the page.<\/p>\n In the final conditional check, we determine whether a door should be enabled or disabled based on the current date and whether it\u2019s December, utilizing JavaScript\u2019s getMonth()<\/strong> method. Doors corresponding to future dates are disabled, and an appropriate CSS class is applied to indicate this state. Conversely, enabled doors will display an Advent message upon clicking.<\/p>\n We initialize the Door class 24 times using an Immediately Invoked Function Expression (IIFE). This method is ideal as it executes immediately without needing to store the result in a variable.<\/p>\n We create an array, doors[]<\/strong>, to hold our Door objects. Looping from 1 to 24, we instantiate each Door and invoke its content method, thereby preparing all the doors for display.<\/p>\n \n<\/i> View demo<\/span><\/a>\n<\/i> Download source<\/span><\/a> <\/p>","protected":false},"excerpt":{"rendered":" Advent marks a period of anticipation leading up to Christmas, starting four Sundays before December 25. Traditionally, this time is tracked using an Advent Calendar or an Advent Wreath. While Advent doesn\u2019t have a set start date, Advent Calendars typically kick off on December 1. Advent Calendars vary widely depending on local traditions but often…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[2889,4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nDesigning Your JavaScript Advent Calendar<\/h2>\n
![\"Advent](\"https:\/\/assets.hongkiat.com\/uploads\/advent-calendar-javascript\/calendar-screenshot.jpg\")
<\/figure>\nStep 1: Setting Up File Structure and Resources<\/h2>\n
![\"Advent](\"https:\/\/assets.hongkiat.com\/uploads\/advent-calendar-javascript\/calendar-background.jpg\")
<\/figure>\n![\"Advent](\"https:\/\/assets.hongkiat.com\/uploads\/advent-calendar-javascript\/file-structure.jpg\")
<\/figure>\nStep 2: Assembling the HTML Structure<\/h2>\n
\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Advent Calendar<\/title>\r\n \r\n <!-- Mobile-friendly viewport -->\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n \r\n <!-- Style sheet link -->\r\n <link href=\"style.css\" rel=\"stylesheet\" media=\"all\">\r\n<\/head>\r\n\r\n<body>\r\n\r\n <article>\r\n <h1>Advent Calendar<\/h1>\r\n \r\n <img src=\"advent-calendar-javascript\/background.jpg\" alt=\"Advent Calendar\" id=\"adventCal\">\r\n \r\n <ul id=\"adventDoors\"><\/ul>\r\n <\/article>\r\n \r\n <!-- Scripts at the end to ensure HTML elements load first -->\r\n <script src=\"scripts\/messages.js\"><\/script>\r\n <script src=\"scripts\/calendar.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Step 3: Filling the \u201cMessages\u201d Array with Quotes<\/h2>\n
\r\nvar messages = [\r\n [\"Quote 1\", \"Author 1\"],\r\n [\"Quote 2\", \"Author 2\"],\r\n ...\r\n [\"Quote 24\", \"Author 24\"]\r\n];\r\n<\/pre>\n
Step 4: Crafting Basic CSS Styles for the Doors<\/h2>\n
\r\nul#adventDoors {\r\n position: relative;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n#adventDoors li {\r\n position: absolute;\r\n}\r\n#adventDoors li a {\r\n color: #fff;\r\n width: 100%;\r\n height: 100%;\r\n font-size: 24px;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n text-decoration: none;\r\n border: 1px solid #fff;\r\n}\r\n#adventDoors li a:not(.disabled):hover {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n}\r\n#adventDoors li a.disabled {\r\n border-color: #b6fe98;\r\n background-color: rgba(196, 254, 171, 0.15);\r\n color: #b6fe98;\r\n cursor: default;\r\n}\r\n<\/pre>\nStep 5: Initializing Global Variables<\/h2>\n
\r\nvar myCal = document.getElementById(\"adventCal\");\r\nvar currentDate = new Date();\r\n<\/pre>\n
Step 6: Defining the \u201cDoor\u201d Class<\/h2>\n
Properties: \u201cwidth\u201d & \u201cheight\u201d<\/h3>\n
Property: \u201cadventMessage\u201d<\/h3>\n
Properties: \u201cx\u201d & \u201cy\u201d<\/h3>\n
\r\nfunction Door(calendar, day) {\r\n this.width = calendar.width * 0.95 \/ 4 - (calendar.width * 0.1);\r\n this.height = calendar.height * 0.95 \/ 6 - (calendar.height * 0.1);\r\n this.adventMessage = 'Day ' + day + ': \"' + messages[day - 1][0] + '\" by ' + messages[day - 1][1];\r\n this.x = calendar.width * 0.04 * (day % 4);\r\n this.y = Math.floor(day \/ 4) * (calendar.height * 0.11);\r\n\r\n this.content = function() {\r\n \/\/ Content method details to follow in the next step\r\n };\r\n}\r\n<\/pre>\nStep 7: Implementing the \u201cContent()\u201d Method for Displaying Doors<\/h2>\n
\r\nthis.content = function() {\r\n var node = document.createElement(\"li\");\r\n document.getElementById(\"adventDoors\").appendChild(node);\r\n node.id = \"door\" + day;\r\n node.style.cssText = \"width: \" + this.width + \"px; height: \" + this.height +\r\n \"px; top: \" + this.y + \"px; left: \" + this.x + \"px;\";\r\n\r\n var innerNode = document.createElement(\"a\");\r\n document.getElementById(node.id).appendChild(innerNode);\r\n innerNode.innerHTML = day;\r\n innerNode.href = \"#\";\r\n\r\n if ((new Date().getMonth() + 1) < 12 || new Date().getDate() < day) {\r\n innerNode.className = \"disabled\";\r\n innerNode.onclick = function() { return false; };\r\n } else {\r\n var adventMessage = this.adventMessage;\r\n innerNode.onclick = function() { alert(adventMessage); return false; };\r\n }\r\n};\r\n<\/pre>\nStep 8: Instantiating the \"Door\" Objects<\/h2>\n
\r\n(function() {\r\n var doors = [];\r\n\r\n for (var i = 0; i < 24; i++) {\r\n doors[i] = new Door(myCal, i + 1);\r\n doors[i].content();\r\n }\r\n\r\n return doors;\r\n})();\r\n<\/pre>\n