Advent Calendar

An interactive advent calendar featuring daily tips and resources throughout December.

Features

• Outside of December shows generic card (day 0)
• Calendar windows unlock each day in December as the dates arrive and shows that tip
• Click on open days to reveal tips (Highlighted)
• Each tip can include description, image, icon, and recommended content creators to follow

December Behavior

• Calendar windows unlock on their corresponding date (e.g., Day 5 unlocks on December 5th)
• The current day's tip automatically opens when you visit the page
• Click any unlocked window to view that day's tip
• Navigate between days using the "Previous" button in the modal

Testing

• Use the URL parameter ?day=X (where X is 1-24) to test any specific day
• Example: index.html?day=15 will open Day 15's tip
• Update const monthNo=11; to current month to test loading of correct day

Project Structure

advent-calendar/
├── index.html 
├── styles.css    
├── script.js     
├── tips.json       *
├── imgs/           *
│   ├── [tip images]
│   └── [type badges]
└── background.png  *

*Customizate with your content

Adding/Editing Tips

Edit the tips.json file to customize the daily content:

{
  "day": 1,
  "tip": "Your tip text here",
  "image": "path/to/optional/image.jpg",
  "creatorName": "Content Creator Name",
  "creatorUrl": "https://creator-website.com",
  "imageAlt": "Image description",
  "typeImage": "imgs/type.svg"
}

Note if image blank then image will not show

Push Notifications

Push notifcations can also be added, I rcommend https://onesignal.com/, it has generous free account and can be added with a script file and small script added to the index file.

License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).

You are free to:

• Share — copy and redistribute the material in any medium or format
• Adapt — remix, transform, and build upon the material

Under the following terms:

• Attribution — You must give appropriate credit, provide a link to this repository, and indicate if changes were made
• NonCommercial — You may not use the material for commercial purposes

For commercial use, please contact the repository owner.