Creative Computing: Week 10

Clock Work Day

Class Notes

You can find a reference for the Date library here. To get the current date, use the following code:

var myDate = new Date();

Everything else you'll need from the Date library, like the getMinutes() or getHours() functions, can be accessed from that.

We covered a few possible strategies you might use for building your clock. All of them rely on code that periodically checks the time and updates your program accordingly:

function checkTime() {
    var currentDate = new Date();
}

setInterval(checkTime, 500);

The checkTime() function is where most of your logic will go. setInterval is there to call the checkTime() function roughly every 500 milliseconds.

One strategy for handling the logic of your program is checking for specific time values. For example, if something about your program depends on a certain hour, your code might look like this:

function checkTime() {
    var currentDate = new Date();
    var currentHours = currentDate.getHours();

    if (currentHours == 12) {
        // this will be true between 12:00:00 and 12:59:59
    } else if (currentHours == 13) {
        // this will be true between 13:00:00 and 13:59:59
    } else {
        // this will be true all other times
    }
}

setInterval(checkTime, 500);

Alternatively, you might want to check for ranges of time:

function checkTime() {
    var currentDate = new Date();
    var currentHours = currentDate.getHours();

    if (currentHours >= 12) {
        // this will be true for all "PM" times
    } else {
        // this will be true for all "AM" times
    }
}

setInterval(checkTime, 500);

Another case we covered is that you don't care exactly what the time is, you just want to know that one second, minute or hour has passed by:

var lastMinute = 0;

function checkTime() {
    var currentDate = new Date();
    var currentMinute = currentDate.getMinutes();

    if (currentMinute != lastMinute) {
        // we have reached a new minute!

        // update the value of lastMinute so we can carry on checking
        lastMinute = currentMinute;
    }
}

setInterval(checkTime, 500);

Your program's logic might vary, but the general idea is that your code will check the time and act accordingly. The use of comparison operators will help you form your program's logic. Your program might even involve a combination of different logical comparisons to control different aspects of your clock.

If you're having trouble, it might help to write down everything your clock needs to do and at what times it has to do them. Being able to describe your program's logic to another human is the first step towards describing your logic to a computer. For example, I could tell my friend:

My clock will be black from 6PM to 6AM and white all other times. It will also flash red every hour.

Then I could rephrase that logic to be a little closer to the JavaScript commands we've learnt:

If the time is before 6AM, my clock will be black. Otherwise, if the time is before 6PM, my clock will be white. Otherwise, my clock will be black. Finally, if the minute is different than it was the last time I checked the time, my clock will be red.

Finally, you can translate that into code:

var lastMinute = 0;

function checkTime() {
    // get all the information we need to do our comparisons
    var currentDate = new Date();
    var currentHour = currentDate.getHours();
    var currentMinute = currentDate.getMinutes();

    if (currentHour < 6) {
        // if it's before 6am, make it black
    } else if (currentHour < 18) {
        // otherwise, if it's before 6pm, make it white
    } else {
        // otherwise, make it black
    }

    if (currentMinute != lastMinute) {
        // regardless of anything else, if it's a new minute, make it red
        lastMinute = currentMinute;
    }
}

setInterval(checkTime, 500);

Once you have your clock logic established, you can fill in all of the DOM manipulation you need to change the display of your clock.