Build a Coders Advent Calendar

We are going to create a Christmas advent calendar for coders. This will be built in JavaScript, CSS and HTML. When clicking on a day a modal should appear. This modal will display something in web development that you have learnt in 2020. This could be a snippet from a blog post, an embedded video, podcast or other things that have helped you in your 2020. You can use frameworks like Vue or React but bonus points given to those who use vanilla JavaScript and CSS. The code will be reviewed live on Twitch on the 29th of November.

Level 1 Interface

Create a grid of 24 days. Each day must display the day number.

Level 2 Display the modal

When a day is clicked display a modal with a title, description/code and links to something you have learnt in 2020.

Level 3 Embed a video

Embed a video tutorial that has helped you in 2020 to some of the modals. Make sure that the modal is mobile responsive.

Level 4 Keep those modals hidden

Only allow modals to be shown if the day is on or before the current day. For instance you cannot click on the 24th day when it is only the 1st of December.

Level 5 Go into the future

Create a toggle switch that allows you to click on future dates.

Level 6 Animate

  • Animate the days when rolled over.
  • Animate the modal when opened.
  • Automatically open the current day and show the modal in a fancy animation.
  • Make snow!