Se dan dos campos de entrada "minuto" y "segundo". El valor del campo "segundo" puede exceder los 60. Es necesario crear un cronómetro a partir de los tiempos anteriores.

P.ej. Si el minuto es 5 y el segundo es 30. El cronómetro comenzará desde las 5:30 y luego continuará hasta que tanto el minuto como el segundo lleguen a 0.

P.ej. Si el minuto es 5 y el segundo es 90. El cronómetro comenzará a partir de las 6:30 y luego continuará hasta que tanto el minuto como el segundo lleguen a 0.

Habrá tres botones con los botones "RESET", "PAUSE/RESUME" y "START".

RESET restablecerá el cronómetro al campo proporcionado por el usuario. PAUSE pausará el cronómetro y, si se vuelve a hacer clic, lo reanudará. START iniciará el cronómetro en el recorrido inicial.

Me resulta difícil crear un temporizador de este tipo. Por favor ayuda.

 import { useState } from "react"; import "./styles.css"; export default function App() { const [min, setMin] = useState(0); const [sec, setSec] = useState(0); const [pause, setPause] = useState(true); const totalSeconds = min * 60 + sec; function startTimer(duration, display) { if (pause === true) { var timer = duration, minutes, seconds; const interval = setInterval(function () { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; console.log(minutes + ":" + seconds); setMin(minutes); setSec(seconds); timer = timer - 1; if (timer < 0) { clearInterval(interval); } }, 1000); } } function pauseToggle() { setPause(!pause); console.log(pause); } return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <div> <input type="number" value={min} onChange={(e) => setMin(e.target.value)} /> <input type="number" value={sec} onChange={(e) => setSec(e.target.value)} /> </div> <div> <button onClick={() => { startTimer(totalSeconds); }} > START </button> <button onClick={() => { pauseToggle(); }} > PAUSE/RESUME </button> <button>RESET</button> </div> {min}:{sec} </div> ); }