DEV Community

Discussion on: Improving my counter

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited
  1. Consider using String.prototype.padStart: developer.mozilla.org/en-US/docs/W....

  2. You don't currently do anything with hours in the JavaScript, so that's why it's not changing. You're only setting the minutes and seconds. You'll need to get a reference to the hours label like you did with minutes and seconds and then set it to be parseInt(totalSeconds / 3600).

  3. Why do this? if (!!document.getElementById("counter"). Just do this: if (document.getElementById("counter")). Applying the negation operator twice is the same thing as not applying it at all.

Regarding this concern:

The numbers jump around

What do you mean? It may be helpful to include a link to a jsfiddle with all of your HTML, CSS, and JS so we can run it on our end.

One final thing to note: You don't need totalMinutes. Given a number of seconds, the number of minutes it represents is equal to parseInt(totalSeconds / 60) % 60. Since you're tallying the seconds, you don't need to also tally the minutes.

Improved code: jsfiddle.net/41o7tz3n/6/.

Collapse
granttransition profile image
Grant Smith Author • Edited

This is fantastic, thank you. As for the numbers jumping around, I posted a gif at the top of the post. It is hopefully attached below, although this isn't that important.

One important thing though (customer request), I need the numbers to start from 01:34:06. Using your method, how would you set the starting numbers?

New Timer

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

how would you set the starting numbers

Just in the HTML, if it's a fixed start. Otherwise you can just use JS to allow users to enter a start time.

Thread Thread
granttransition profile image
Grant Smith Author • Edited

Yeah, that is exactly what I have done. Page loads with 01:32:20 and then changes the timer to 00:00:20.

<div class="column is-8 counter_container">
 <span id="hours" class="counter_number">01</span>
 <img class="divider" src="dist/svg/counter-divider.svg" alt="Counter divider" width="16" height="60">
 <span id="minutes" class="counter_number">32</span>
 <img class="divider" src="dist/svg/counter-divider.svg" alt="Counter divider" width="16" height="60">
 <span id="seconds" class="counter_number">20</span>
</div>

I'll keep working at it, the help is much appreciated, thank you