A Christmas Advent Calendar displaying small videos and images, made with vanilla JavaScript, HTML and CSS as part of a coding challenge for Social Sync/Social Mind.
This page:
-
Allows the user to manually enter a date that simulates the current day of December.
-
Diplays to the user 25 “windows” where each represents a day of the month.
-
Allows the user to click and open each window and see one random video clip or one image behind each.
-
Videos may be played by the user only after a door has been opened by them.
-
The user is only allowed to click on the window when the door representing the day of the month is exactly, or after, the simulated current date (i.e. you can only open the door for the 14th of December, if the simulated date is on or after the 14th of december).
-
Track which users have opened which doors between refreshes by loading and saving the state to the browser’s localStorage. Optional:
-
The door opening may be animated, but that’s not mandatory!
You can view a live version of the Advent Calendar either by clicking at the GitHub page latest deployment at the right. Alternatively, save the repo locally and view all the folders and files by entering the command "git clone" followed by the url of this repo at the CLI of your choice.