Create a simple STOPWATCH TIMER in JavaScript, CSS (SCSS)

Styling and functionality come together beautifully in this project, a simple stopwatch with three controls: start, stop, and reset.

GeekLaunch produces educational videos covering such topics as Linux, web development (including HTML5, CSS 3, JavaScript, and PHP), Java programming, tips for power users, among many others. Subscribe: New video every Wednesday!

Not a geek? Start today!

[johnmartin]

Thank you.
The things I am timing can often go beyond 60 mintues.
How do you add hours?

I tried extrapolating

hours=s.querySelector('span.hours'),



but that didnt work.

[perejoanmateusalva]

What's the css file for if we are doing the css stuff in a scss file?
Also, I son't know why the scss file seems like it's not being read, as the appearance of the stowatch is still the raw html one.

[ragipgashi]

Hello there. I have tried and it works perfectly, but if I navigate to another page in app, it stops running? Do you have any solution please?

[edisvelicanin]

any suggestios what to do if i wanted to save the time of the stop-watch and the logged user?

[carlosferegrino]

Nice tutorial, here you have your like. And could you explain how does we add this chronometer (code) to our wordpress site... Thanks a lot

[jimconnors]

Great tutorial - I am having one issue that - well I'm not a JS guy... so i'm sure its in there. The values in Minutes/Seconds/Cents are not times, they're random values that are not building on one another... ie, cents do not roll up to seconds, seconds dont roll up to mins
below is my JS code... what did I fubar? Start, Stop and Reset all work... its just the time values are borked. :/
var ss =

[].forEach.call(ss, function (s) {
var currentTimer = 0,
interval = 0,
lastUpdateTime = new Date().getTime(),
start = s.querySelector('button.start'),
stop = s.querySelector('button.stop'),
reset = s.querySelector('button.reset'),
mins = s.querySelector('span.minutes'),
secs = s.querySelector('span.seconds'),
cents =

start.addEventListener('click', startTimer);
stop.addEventListener('click', stopTimer);
reset.addEventListener('click', resetTimer);

function pad (n) {
return ('00' + n).substr(-2);
}

function update () {
var now = new Date().getTime(),
dt = now = lastUpdateTime;

currentTimer += dt;

var time = new Date(currentTimer);

mins.innerHTML = pad(time.getMinutes());
secs.innerHTML = pad(time.getSeconds());
cents.innerHTML = / 10));

lastUpdateTime = now;
}

function startTimer () {
if (!interval) {
lastUpdateTime = new Date().getTime();
interval = setInterval(update, 1);
}
}

function stopTimer () {
clearInterval(interval);
interval = 0;
}

function resetTimer () {
stopTimer();

currentTimer = 0;

mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
}

});

[RahulSharma-xvew]

my watch starts from (+ 30 minutes ) when I hit start button.. any recommendations how to fix that??

[afreenanjum]

Can we save this time in SQL database?
Please reply

[Kamal-sbbj]

thanks for tutorial, i download your code from github, but i don`t have ":" between minutes, seconds and centiseconds.i have i need 00:00:00 like on video.

[_baxter]

Can you make the button a toggle -- START/STOP