Sollicitatievraag bij Nutanix
Round 2: Stopwatch Problem Statement: // develop Stop Watch functionality which should have below requirements // a). Start/Stop/Reset // b). When we click Reset button, it should store in the page. // c). Max 5 timers should be visible // d). When we reset 6th, the oldest should be removed from UI // e). add some hover effect on UI
Antwoord op sollicitatievraag
Anoniem
import "./App.css"; import React, {useState, useEffect} from "react"; const App = () => { const [seconds, setSeconds] = useState(0); const [miliSeconds, setMiliSeconds] = useState(0); const [timerState, setTimerState] = useState(2); const [timerObj, setTimerObj] = useState([]); const [timerId, setTimerId] = useState(''); useEffect(()=>{ setSeconds(prev=>{ if(miliSeconds===0 && timerState===0) { return prev+1; } else { return prev; } }) },[miliSeconds]); const resetTimer = () => { setTimerObj(prev=>{ if(prev.length===5) prev.splice(0,1); return [...prev, (seconds*1000+miliSeconds)]} ); setTimerState(2); setMiliSeconds(0); setSeconds(0); }; const convertToFormat = (time) => { return `${Math.floor(time/1000)}:${time%1000}`; } const stopTimer=() => { setTimerState(1); clearInterval(timerId); setTimerId(''); }; const startTimer = () => { setTimerState(0); const timer = setInterval(()=>{ setMiliSeconds(prev=>{ if(prev<100) { return prev+1; } else { return 0; } }); },10); setTimerId(timer); }; return ( {seconds}:{miliSeconds} startTimer()} disabled={timerState===0}>Start stopTimer()}>Stop resetTimer()}>Reset {timerObj.map((timer, index)=>( Time for player {index+1} is {convertToFormat(timer)} ))} ); }; export default App;