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.
Create a grid of 24 days. Each day must display the day number.
When a day is clicked display a modal with a title, description/code and links to something learnt in 2020.
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.
Create a toggle switch that allows you to click on future dates.
- 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!