{"size": 999, "ext": "js", "max_stars_repo_path": "timer.js", "max_stars_repo_name": "tberghuis/upwork-job-highlight", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "timer.js", "max_issues_repo_name": "tberghuis/upwork-job-highlight", "max_issues_repo_issues_event_min_datetime": "2020-07-17T05:44:49.000Z", "max_issues_repo_issues_event_max_datetime": "2020-07-17T05:44:49.000Z", "max_forks_repo_path": "timer.js", "max_forks_repo_name": "tberghuis/upwork-job-highlight", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 24.3658536585, "max_line_length": 77, "alphanum_fraction": 0.5915915916}
const templateRoot = document.createElement("div");
templateRoot.setAttribute("id", "ujh-timer");
document.body.appendChild(templateRoot);

const leftPad = num => {
  if (num < 10) {
    return "0" + num;
  }
  return num;
};

new Vue({
  el: "#ujh-timer",
  template: `<div id="ujh-timer">
    <span>{{timer}}</span>
  </div>`,
  data: function() {
    return {
      seconds: 0
    };
  },
  computed: {
    timer() {
      const hrs = Math.floor(this.seconds / (60 * 60));
      const hrsRemainder = this.seconds % (60 * 60);
      const mins = Math.floor(hrsRemainder / 60);
      const secs = hrsRemainder % 60;
      return `${leftPad(hrs)}:${leftPad(mins)}:${leftPad(secs)}`;
    }
  },
  created: function() {
    const vi = this;
    // this is not accurate as chrome limits execution when tab in background
    // however this uses less resources that creating new Date every second.
    // Also not a critical feature.
    setInterval(() => {
      vi.seconds += 1;
    }, 1000);
  }
});
