Skip to content

Instantly share code, notes, and snippets.

@daniellevass
Last active December 19, 2015 17:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save daniellevass/7f8e4d53b794f25e4161 to your computer and use it in GitHub Desktop.
Save daniellevass/7f8e4d53b794f25e4161 to your computer and use it in GitHub Desktop.
christmas countdowns

#Christmas Countdowns

we're going to look at making a count down timer that you can use with the littlebits or put on a website

1. JSFiddle

Start a new JSFiddle

2. JQuery

Add in jQuery by clicking the little cog in the JavaScript square

3. Console

Right click anywhere on your screen - you should be able to see a thing called "inspect" or "inspect element" - this will open up a new bit on your browser. Here you should be able to find a tab called console. This is what we're going to use to make sure our numbers are correct!

Imgur

4. Dates

Next we need to get two dates and log them to our shiney new console:

var today = new Date().getTime();
var christmas = new Date("12/25/2015").getTime();

console.log(today);
console.log(christmas);

Imgur

5. Comparing dates

Now we can calculate how many seconds there are between today and christmas!

var seconds = (christmas.getTime() - today.getTime())/1000;

console.log(seconds);

Now you know how many seconds until Santa comes!

Imgur

6. calculating days left

Now for a bit of maths! How many seconds are there in a minute? How many minutes are there in an hour? how many hours are there in a day?

var days = Math.floor(((seconds / 60)/60)/24);

Imgur

6. Remainders

Now we've calculated how many days left, we need to take that number of seconds away from our total seconds!

seconds = seconds - (((days * 60)*60)*24);

Imgur

7. hours / minutes / seconds

Have a go at calcualting how many hours and minutes there are remaining until christmas similar to how we calculated the days left!

If you get super stuck you can take a look at my JSFiddle here: https://jsfiddle.net/xzcz1goo/

8. Finishing!

Put these numbers in somewhere prettier - make your own website!

Imgur

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment