Basic watch face

[agsurf5]

I am starting to work on creating my watch face. I am not a developer, just playing around a bit with some coding knowledge.

Here is what I coded. I would like to know the opinion of more experienced developers if this is a good starting point for building on it. Also I am going to test battery drainage, I had some issues before adding the display event.

import clock from "clock";
import { display } from "display";
import document from "document";
import * as util from "../common/utils";

// Update the clock every minute
clock.granularity = "minutes";

let myDate = document.getElementById("myDate");
let myTime = document.getElementById("myTime");

display.addEventListener('change', function() {
 if(display.on) {

 updateClock();

 function updateClock(){

 clock.ontick = function(evt) {
 myDate.innerText = (evt.date.toString().slice(0,10));
 myTime.innerText = ("0" + evt.date.getHours()).slice(-2) + ":" +
 ("0" + evt.date.getMinutes()).slice(-2);
 };
 };
 } else {
 // nothing happens after this
 }
});

[JonFitbit · Accepted solution]

A few points:

You don't need to use the `change` event, the `tick` event only fires when the screen is on anyway.

You shouldn't nest your functions inside the events. Declare them once, then make calls to them from within the events.

[agsurf5]

Thanks @JonFitbit !

I'll change and see if the battery drainage from the other post doesn't happen. So far it was working well.