1
0

Updated Timer

This commit is contained in:
Christer Warén 2021-01-04 20:02:38 +02:00
parent 1c635092be
commit fe6b12b34e
2 changed files with 28 additions and 13 deletions

View File

@ -1,17 +1,16 @@
.app { .timer {
text-align: center; text-align: center;
background-color: #282c34;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
color: white; color: white;
flex: 1;
} }
.time { .time {
font-size: 3rem; font-size: 3rem;
padding: 2rem;
} }
.button { .button {

View File

@ -1,19 +1,23 @@
// I used code as basis to this Timer // Timer is based on these with changes
// Build a React Timer Component Using Hooks by James King // Build a React Timer Component Using Hooks by James King
// https://upmostly.com/tutorials/build-a-react-timer-component-using-hooks // https://upmostly.com/tutorials/build-a-react-timer-component-using-hooks
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
const Timer = () => { const Timer = () => {
const [seconds, setSeconds] = useState(0); const [startTime, setStartTime] = useState(0);
const [elapsedTime, setElapsedTime] = useState("0.0");
const [isActive, setIsActive] = useState(false); const [isActive, setIsActive] = useState(false);
function toggle() { function toggle() {
setStartTime(new Date());
setIsActive(!isActive); setIsActive(!isActive);
} }
function stop() { function stop() {
setSeconds(0); setStartTime(0);
setElapsedTime("0.0");
setIsActive(false); setIsActive(false);
} }
@ -21,18 +25,30 @@ const Timer = () => {
let interval = null; let interval = null;
if (isActive) { if (isActive) {
interval = setInterval(() => { interval = setInterval(() => {
setSeconds(seconds => seconds + 1); let epochElapsedTime = new Date() - startTime;
}, 1000);
} else if (!isActive && seconds !== 0) { let elapsedTime = {
minutes: new Date(epochElapsedTime).getMinutes(),
seconds: new Date(epochElapsedTime).getSeconds(),
milliseconds: new Date(epochElapsedTime).getMilliseconds()
};
if(elapsedTime.minutes !== 0){
setElapsedTime(elapsedTime.minutes + ":" + elapsedTime.seconds + "." + elapsedTime.milliseconds);
} else {
setElapsedTime(elapsedTime.seconds + "." + elapsedTime.milliseconds);
}
}, 10);
} else if (!isActive && startTime !== 0 && elapsedTime !== "0.0") {
clearInterval(interval); clearInterval(interval);
} }
return () => clearInterval(interval); return () => clearInterval(interval);
}, [isActive, seconds]); }, [isActive, startTime, elapsedTime]);
return ( return (
<div className="timer"> <div className="timer">
<div className="time"> <div className="time">
{seconds}s {elapsedTime}
</div> </div>
<div className="row"> <div className="row">
<button className={`button button-primary button-primary-${isActive ? 'active' : 'inactive'}`} onClick={toggle}> <button className={`button button-primary button-primary-${isActive ? 'active' : 'inactive'}`} onClick={toggle}>