Web-Based Application Design and Development (ITIS 3135)

Activity Clock: Develop a Clock Application

In this exercise, you’ll create an application that displays the current time in
hours, minutes, and seconds. The display should use a 12-hour clock and indicate
whether it’s AM or PM. The application will look like this:

Part 0: Download files

1. Download activity-clock.html, activity-clock.css and activity-clock.js.
2. Then, run the application to verify there are no errors in the HTML and CSS files.
3. Rename the files to Lastname- activity-clock.html, Lastname- activity-clock.css and
Lastname- activity-clock.js.

Part 1: Make the following modifications

1. In the JavaScript file, note that four functions are supplied. The $ function. The start of a
displayCurrentTime() function. The padSingleDigit() function that adds a leading zero to single
digits. And the start of an onload event handler.
2. In the displayCurrentTime() function, add code that uses the Date object to determine the current
hour, minute, and second. Convert these values to a 12-hour clock, determine the AM/PM value,
and display these values in the appropriate span tags.
3. To convert the computer’s time from a 24-hour clock to a 12-hour clock, first check to see if
the hours value is greater than 12. If so, subtract 12 from the hours value and set the AM/PM
value to “PM”. Also, be aware that the hours value for midnight is 0.
4. In the onload event handler, code a timer that calls the displayCurrentTime() function at 1 second
intervals. Also, make sure that the current time shows as soon as the page loads.
5. Verify there are no errors.

Part 3: Upload files to your Exercise folder in your webpages account

Verify that your final webpage is accessible by going to
https://webpages.uncc.edu/yourUsername/Exercise/ Lastname- activity-clock.html

Part 4: Turn in your activity

1. Log in to Canvas.

Page 1 of 2
Web-Based Application Design and Development (ITIS 3135)

2. Go to the Activity-Clock Submission link on the Canvas page. Upload the upload the .html, .css and
.js files to the submission page.
3. In the Comments textbox of Canvas provide:
a. the URL of your html file on the web server. You must provide the correct URL to get credit.

Page 2 of 2