JSFiddle - React, Tailwind, and code Playground

by JamesPattison

HTML

<div id="app"></div>

React

const Countdown = () => {
	const [timeLeft, setTimeLeft] = React.useState(25*60);
	const [active, setActive] = React.useState(false);

	const minutes = React.useMemo(() => {
	  return Math.floor(timeLeft/60).toFixed(2)
	}, [timeLeft]);

	const seconds = React.useMemo(() => {
	  return (timeLeft%60).toFixed(2)
	}, [timeLeft]);
	
	initiateCountdown = () =>{
	  const timer=setTimeout(() => {
		if (active) {
		  setTimeLeft(timeLeft-1);
		}
	  }, 1000);
	}

	return (
		<div>
			<div>
				<span>
					{minutes()}:{seconds()}
				</span>
			</div>
			<button
				type="button"
				onClick={() => setActive(true)}>
				Inicia um ciclo
			</button>
		</div>
	)
};

ReactDOM.render(<Countdown />, document.querySelector("#app"))