Coding Advent Calendar Challenge Details

Advent Calendar Nov/Dec 2020

Create a Christmas advent calendar for coders. Build in JavaScript, CSS and HTML. When clicking on a day a modal should appear. This modal will display something in web development learnt in 2020. This could be a snippet from a blog post, an embedded video, podcast or other things that have helped in 2020. Frameworks like Vue or React can be used but bonus points given to those who use vanilla JavaScript and CSS.

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 learnt in 2020.

Level 3 Embed a video

Embed a video tutorial that has helped 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!

Additional functionality

Additional functionality added outside of the challenge brief:

  • Christmas lights animation in modal
  • Hand drawn graphics