Way back last year, I wanted to have some sort of countdown to Christmas. However, I wanted something digital, so no paper chains or advent calendars; so I decided to find a minimalistic countdown to the big day itself. Unfortunately, they all either wanted money or the text was too small and the page was too flashy, so I then decided to make my own.
I have almost no experience with HTML, JS, or CSS.
Fortunately, I knew just enough and had access to the internet, so I went and got the code for a countdown timer from W3 Schools' website and used that for the core. I then used some limited CSS skills to position the countdown to the center of my page and put some flair text above it, hardcoding the font sizes in px. I also added some text so that if it was on or after December 25th (until Jan 1) it would say "Merry Christmas!"
This was great, until I realized that I wouldn't want to have this only on a 1080p display, especially of this size, so I looked up other measurements and found the relative viewport size unit, and made it nearly identical in size on the same monitor to keep the same sizing I had meticulously tweaked before. I tested this out on another screen, with responsive design mode, and on an actual phone, and it just worked!
I later published this to the Wallpaper Engine workshop and put it on my GitHub site, which can be accessed with http://owoyiff.me/notacountdown.html
Don't ask about the domain name.
Top comments (0)