Tag: SVG clock

Coding an Advent Calendar: Day 4

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 4

JavaScript Countdown clock with SVGs
After browsing some other Codepens tagged "advent", and "calendar", and "clock", I decided to add a countdown clock to my calendar. I had a few ideas:

  1. Make SVG presents that would get filled to a higher percentage as the time toward Christmas approached (like a fund-raising campaign’s thermometer)
  2. Make SVG circles that filled in a clockwise manner – as a countUP to Christmas (Christmas Day would show all four circles as fully filled)
  3. Do the traditional countDOWN clock, making the SVGs reduce their fill percentage as the time went on

I settled on #3 and used CSS-Tricks.com’s How to Make Charts with SVG post and Codepen to help create the clocks (I borrowed the code from Chris Johnson’s Codepen which uses jQuery Easing to switch the numbers). I also made the stroke-dasharray (basically, the circle’s border) value equal the full radius of the circle. This makes it look more like a pie chart or clock hand that extends outward from the center of the clock.

Assign Year text dynamically
Using JavaScript’s built-in Date() class, I made JS retrieve the current year and write that text to the page in the “Remaining ’til Christmas …” heading (I’d also originally placed it in the “Advent Calendar” heading as well, but thought it was too much). I then build the FULL JavaScript date using the current year’s value and pass THAT into the countdown clock function.

Thus, theoretically, the clock should start all over again on January 1 EACH year with a value of 358 or so days. I guess we’ll see in about a month~~

CSS-only slider  
The next step was to create a slider that would literally “slide” through the daily presents as I clicked on the available ones, or the “previous” and “next” arrows. Again, I looked at many CSS sliders on Codepen, and used one as inspiration to help make my slider functional as well.

The only problem was that, for some reason, something in my CSS or design was causing each “slide” to be offset an extra 5px to the right. I’d used 100% (or even 100vw) width for the slides – which was 1089px at that time. Yet, when I scrolled to the following slide, the offset was 1094px – and this kept up for ALL 25 days! (Needless to say, that was a pretty noticable mistake by the time Christmas came ’round.)

So, this is an area that will need to be revisited. I have 3 options so far:

  1. Use Bootstrap: except I haven’t yet used it, so it messes up some of my CSS when I import those CSS styles – and I don’t want to depend on it for everything
  2. Use hidden input radio buttons: I’ve seen this done in some other sliders and it looks like it might provide a good option
  3. Use JavaScript: Obviously, JavaScript would give me a little more control over ALL the pieces of this slider (like the presents underneath, and the “previous/next” buttons) – so I may eventually need to use some JS anyway

Work Completed (to date)

  • December 4, 2016
    • Countdown clock (JS Date class & jQuery Easing) with SVGs
    • Dynamic text output for Year based on the current date
    • CSS only slider (off by 5px each slide)
  • December 3, 2016
    • CSS bow & ribbon
    • Footer with FontAwesome presents
    • Hover, active, and “Christmas Day” styles for footer presents
  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu