Time for action – making the clock functional

The final step in creating a clock is to make it actually show the current time. In JavaScript, we can query the current time using the Date object:

var currentDate = new Date()
var hours   = currentDate.getHours()
var minutes = currentDate.getMinutes()
var seconds = currentDate.getSeconds()

Therefore, the first thing that comes to mind is to use the preceding code to show the current time on the clock:

Item {
  id: clock
  property int hours:   currentDate.getHours()
  property int minutes: currentDate.getMinutes()
  property int seconds: currentDate.getSeconds()
  property var currentDate: new Date()
  // ...
}

This will indeed show the current time once you start the application, but the clock will not be updating itself as the time passes. This is because new Date() returns an object representing one particular moment in time (the date and time at the moment when the object was instantiated). What we need instead is to have the currentDate...