Chapter 3 - Make your widget do something

In this chapter, you will learn how to make your widget into a countdown widget, if you aren't looking forward to something cool like a new StarGate episode, then just use your birthday.

Let's start by making a javascript function, let's call it "CountDown". (Javascript is case sensetive.)

function CountDown() { //A function called "CountDown"
}

We will add 4 rows of code to this function.

Row 1

first, you must understand that when one calls for the time in javascript, one calls for a javascript function that counts all the mili seconds from 1970, so to make the mili seconds into days, one must divide them with a formula, the first row of code will be that formula:

var Time = 1000 * 60 * 60 * 24;

You will notice I wrote var time = before the formula, this assign the answer to the formula into a variable named Time. If you don't know what a variable is, think of it as a place to store a value for later use.

Row 2

The next line of code will calculate how many days there has been since 1970

var FutureDate = Math.floor(Date.parse("15 Jul 2005") / Time );

Was this confusing? Let's learn it step by step.

var FutureDate = // you should know what this does, as I said before, it stores the calculation into "FutureDate".

Math.floor(Date.parse("15 Jul 2005")); // This code gets the number of mili seconds from 1970 to 15 July 2005, it's here you will put your Future date, for example, if you want a countdown to 14/8 2005, just write "14 aug 2005" instaid.

To make mili seconds into days, just divide it with your variable Time, like this:

var FutureDate = Math.floor(Date.parse("15 Jul 2005") / Time );

Row 3

The next line will tell us how many days there has been until today, it's pretty much the same as the line before, but instaid of writing a date, you add a function that knows which date it is today, you can see the different function for your self.

var Today = Math.floor((new Date()).getTime() / Time);

A short repetition of what it does:

Math.floor((new Date()).getTime()); // Todays date
Time // The calculation to make mili seconds into days
var Today = // stores the answer to the calculation into the variable Today

Row 4

The last line is quite simple, it takes your Futura Date and substract Today. To clerify: The amount of days there is between 1970 and the date you wrote minus the days the number of days between 1970 and today.

It looks like this: return FutureDate - Today;

Returns the value of FutureDate - Today.

The code should look like this:

function CountDown() {
var Time = 1000 * 60 * 60 * 24; //Formula for making mili seconds into days
var FutureDate = Math.floor(Date.parse("15 Jul 2005") / Time ); //Calculates how many days that has past from 1970 to the specefied date
var Today = Math.floor((new Date()).getTime() / Time); //Calculates how many days that has past from 1970 to today
return FutureDate - Today; // if one takes the "FutureDate" and substract "Today", one get the days left :), this returns the right value
}

Now we need to link this function to the html document so the actual value will show. To do so, you will need to open your HTML document again and write the following code in the <body> tag.

This tells your HTML document that you want to use javascript in that section.

And the javascript your will need is:

document.write(CountDown());>

The code should look like this:

<html>
<head>
<script type='text/javascript' src='javascript.js' /> // Includes the javascript code in document javascript.js, in other words, your javascript function
<style type="text/css">
@import "stylesheet.css";
</style>
</head>
<body>

<script type='text/javascript'> // Defines a javascript part of your document
document.write(CountDown()); // document.write = write in document. Write the function CountDown in document
</script>

</body>
</html>

Dashdev.net