Fitbit - timer - how to show current time on application

I'm trying to use my fitbit to help know how far into my gym I am more easily. Making this more simple so the solution is easier for people to help with.

I'm using a fitbit and some basic JS.

Using the clock API I can create a timer, but not trigger one with a button.

i.e., this does the job.

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";

import { display } from "display";

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

// Get a handle on the <text> element
const ClockLabel = document.getElementById("timeLabel");
const Timer= document.getElementById("timerLabel");
const myButton = document.getElementById("button-1");
myButton.text = "button";

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  var Timing = 4*60*60
   let today = evt.date;
  var diff = Timing - ((today - start)/1000 |0);
  let hours  = (diff / 3600) | 0;
  let minutes = ((diff - (hours*3600)) / 60) | 0;
  let seconds = diff - (hours * 3600) - (minutes * 60)| 0;

  console.log("hours:"+hours+", minutes:"+minutes+", seconds:"+seconds);


  let hours = today.getHours();
  let minutes = today.getMinutes();
  let seconds = today.getSeconds();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  ClockLabel.text = `${hours}:${minutes}:${seconds}`;
}

However when firing from a button, it doesn't work whatsoever.

myButton.addEventListener("click", (evt) => {
  var start = Date.now()
//also this doesn't work let today = evt.date;

  myButton.text = "Started";
  
  
  var Timing = 4*60*60;
  var diff = Timing - ((Date.now() - start)/1000 |0);
  let hours  = (diff / 3600) | 0;
  let minutes = ((diff - (hours*3600)) / 60) | 0;
  let seconds = diff - (hours * 3600) - (minutes * 60)| 0;

  console.log("hours:"+hours+", minutes:"+minutes+", seconds:"+seconds);
    ClockLabel.text = `${hours}:${minutes}:${seconds}`;

});

This draws me to the conclusion that using this function is probably a better way forward.

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
      'hours': (seconds / 3600)|0,
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};



export default CountDownTimer;

from Fitbit - timer - how to show current time on application