Lesson 4: Building a JavaScript Clock Part 2

Overview

In the previous lesson, you used JavaScript to add a clock that displays the current time on your web page. In this lesson, you will enhance your clock so that it looks better and has better functionality.

Learner Outcomes

At the completion of this exercise:

Building Applications: The Design Phase

Consider the clock that you created in the previous lesson. How could it be improved? Without peeking at the next section, make a list of features that would make this clock better. Don't worry about how to make the improvements. Just imagine all possibilities for now.

In the world of software development and web design, this process is known as the design phase. Since you already have a product (your clock), you are essentially brainstorming ideas on how this product can be improved (your next generation product, Clock 2.0). Every idea is a good idea during this phase. Then, once you have a long list of desired features, you begin the process of prioritizing that list and identifying which features are currently possible, given your skill set, available resources, and timeline.

Activities

Here's a list of features that you'll be adding to your clock in this lesson:

  1. Convert 24-hour time to 12-hour time, and add AM or PM.
  2. Add a leading zero to minutes and seconds if they're less than 10.
  3. Add functionality that makes the clock continue to update as the time changes.
  4. Stylize the clock so it looks more like a clock.

Were any of these items on your feature list? If there are additional items on your feature list, we won't be covering those in this lesson, but that doesn't mean you can't implement them on your own. As you learn more about JavaScript, you will gradually develop the skills to make many of the features on your wish list do-able.

Features #1 and 2: A 12-hour Clock with Leading Zeros

Depending on what time of day you created and tested your clock, you may or may not have noticed that the hours are expressed using the 24-hour clock, and that none of the numbers have leading zeros if their values are less than 10. For example, 11:04:09 pm is displayed as: 23:4:9.

To change this, you need to add a few new commands to your updateTime() function. Add the following code, after you have defined the hours, minutes, and seconds variables, but before you splice them back together to make the new currentTime variable:

  // add leading zero's to minutes and seconds
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  // get time of day (am or pm)
  if (hours >= 12 && hours < 24) {
    var timeOfDay = 'pm';
  }
  else {
    var timeOfDay = 'am';
  }

  // convert hours from 24-hour time to 12-hour time
  if (hours > 12) {
    hours = hours - 12;
  }

With this new code, you are using if/then/else loops, a common feature of most programming languages. If/then/else loops process logic like this: If the specified condition is true, then do something, else do something else.

In the first new loop, you're doing this: If the value of minutes is less than 10, then redefine minutes so that it has a 0 in front of it. In the second new loop, you're doing the same thing, but with seconds.

In the third new loop, you're doing this: If the value of hours is greater than or equal to 12 and it's not 24, then the time of day is "pm". Otherwise, it's "am". You had to add the second if condition ("and it's not 24") because if you didn't, the function would think 24 o'clock (midnight) is pm, but it's actually 12am.

In the final loop, you convert hours to 12-hour time by subtracting 12 from any value that's greater than 12 (i.e., 12 o'clock or higher)

The only other step that's necessary to complete this feature is to add the new timeOfDay variable when you splice together all the parts. That revised command should look like this:

var currentTime = hours + ':' + minutes + ':' + seconds + '  ' + timeOfDay;

Test this new functionality to be sure it's working. To test different times of day, you can set new values to the hours, minutes, or seconds variables after the point in which they're currently defined. For example if you add the following lines, you can test how your clock with display 12:00 midnight (should be "am"), plus you can check to be sure leading zeros are being added properly to minutes and seconds:

  hours = 24;
  minutes = 7;
  seconds = 3;

Once your clock is working, proceed to the next feature.

Feature #3: Continually update time

So far, the clock you've created only displays the time when the web page is loaded. Fortunately, it's actually easy to modify our clock so it continually updates the time. We just need to call the updateTime() function every second. To do that, you can change the onload attribute on your <body> element so that it uses the setInterval() method, like this:

<body onload="setInterval('updateTime()',1000)">

With this change to the onload attribute, the setInterval() method will run the updateTime() function every 1000 milliseconds (i.e., every second).

Once your clock is working, proceed to the next feature.

Feature #4: Better-looking clock

To make your clock look more like a clock, you don't need JavaScript. JavaScript is all about behavior and functionality. To change presentation and style of an element, use CSS.

Add a new <style> section to the head of your web page, and create a style declaration for div#clock, like this:

  <style>
    div#clock {
      /* your style declarations go here */
    }
  </style>

Alternatively, you could add the new style declarations to your external CSS file. However, since you're only going to display a clock on the current web page, not every page on the site, it's arguably better to define the style in the one place it's going to be used.

Try playing around with different CSS properties to see what effect they have on the appearance of your clock. Here are some suggestions for properties you might try:

If you need more ideas about CSS you can try, refer to the W3Schools CSS Reference. For a refresher on the basics of CSS, see Unit 3 of this curriculum.

All done?

Share your web page with your instructor. Then, if all is well, proceed to the next lesson.