[CONCEPT] Chronometer

[LePhenix47]

Chronometer

How to create a chronometer

To begin, there are a few distinct features:

• You can pause the chronometer

• You can start/resume a chronometer

• You can get the partials by clicking on the flag

• You can restart the chronometer

It is also important to note:

• You cannot add a partial when the chronometer is paused

• The partials are reset whenever the chronometer is restarted

• The chronometer shows up the centiseconds (csec) and deciseconds (dsec)

• For this app, we can drag and drop the partials to fit them in a particular order

How to create the chronometer in JS

To begin with, we are going to need of one variable: currentAmountOfSeconds (CAoS) set to 0 Then we're going to add an interval that will increment the counter every 0.010 s (10 ms)

let CAoS = 0;

let increment = function (number){ number++};

let chronoInterval = setInterval(increment(CAoS), 10);

Then we'll need to set the time variables for t:

//...
let centiseconds= CAoS * 100 % 1_000; 
//Includes the dsecs, so we're just going to take the first two values of the csec

let seconds = CAoS * 100;

let minutes = CAoS % 60;

let hours = CAoS % 3_600;

Now if either of these values are under 10, then add 1 zero or more depending on the unit:

// ex: 1.09 → 1.090
let dSecsAreUnderTen = centiseconds < 10;
if(dSecsAreUnderTen){
 centiseconds = `00${centiseconds}`
}

//ex: 1.9 → 1.09
let dSecsAreUnderAHundred = centiseconds < 10;
if(dSecsAreUnderAHundred){
 centiseconds = `0${centiseconds}`
}

ex: 9h8min → 09h08mins
let valueIsUnderTen = (value)=>{ 
if(value < 10){
return `0${value}` 
}
}

We'll talk about the partials in a separate conecpt post

[LePhenix47]

CSS tip for #3 and #2

In order to make the numbers always take the exact same width and height, we can use the CSS property font-variant-numeric:

.chronometer{
 //...
  font-variant-numeric: tabular-nums;
}

[LePhenix47]

How to compute the time of a partial

First, we need to take the total previous time, then the time now, subtract to get the difference