Tag Archives: digital clock

Javascript Digital Clock

In this assignment you have to build a javascript digital clock that will keep displaying the current time in digital format ie. : 09:39:15 PM.

Javascript Digital Clock : Functional Requirement

The clock should functiona as below :

  • Show the current time from the users system in 12 hours format when the page is loaded
  • Keep updating time after every seconds
  • It should show AM / PM depending on the hours
  • Incase of hours/minutes/seconds less than 10, it should prepend ‘0’ before it. It will always appears like 00:00:00 AM

Javascript Digital Clock : Hints

You will make use of the following javascript concepts:

  • Events
  • Set Interval
  • Date Objects
  • If/else construct
  • Operators
  • Functions

Javascript Digital Clock : Planning the logic

YOu will need to perform the following tasks

  • Get the current time of the user system
  • Check if the hours is less than 12 than Append AM else Append PM at the end
  • Upate the seconds every second, Increment Minute if the second count reaches 60.
  • Increment Hours if the Minutes count reach 60
  • Reset Seconds and Minutes to 0 if it counts more than 60
  • Reset Hours to 12 if it reaches more than 13
  • Prepend 0 if the count of hours, minutes or seconds is less than 10
  • Finally display the clock on the page in any HTML element

Find this challenging? Give it a spin.

Trying solving the assignment using any of the online editors and send me an email if you need any help or feedback on your code.