Christmas Countdown

Right now, my kids are counting down to December 1, when they can open their Lego Advent calendar. Since they will soon enough be counting down to the main event, I went ahead and whipped up this very simple little counter in html to show the C-minus day. I embedded it in my LAN splash page using an iframe, but you could also just put it on the desktop and open it directly. The code is posted on GitHub.

Don't worry about my math. I forced it to 25 days for the screenshot!

Views: 116

Tags: Christmas, HTML, Hacking the Holidays, JavaScript

Comment

You need to be a member of GeekDad to add comments!

Join GeekDad

Comment by Nathan Barry on November 30, 2012 at 9:17am

Thanks Brian. The problem is the font I need to use isn't actually a web font and we don't have the license to make it one - would have to pony up some more money. It's also rotated and has some effects on it which is why I did it as a graphic. Maybe I'll just change the font for now.

Comment by Brian Gillespie on November 29, 2012 at 6:31pm

Nathan,

Thanks! You can change the font in CSS. Just add or link in an @font-face rule to your hosted font and change the font-family property to match. The code would look something like this: https://gist.github.com/4172535 . You can then delete the link to the Google web font in the html file.

Comment by Nathan Barry on November 29, 2012 at 6:58am

Very cool. I only have a very basic understanding of JS, but could this code be adapted to use graphics for the number? I'd love to use it on our Magic Belles site, but we use a very specific font that you can't get as a web font.

© 2013   Created by GeekDad.

Badges  |  Report an Issue  |  Terms of Service