timer gui
Hi,
i have purchased the good theme from bootstrap themes and am trying to integrate it into a django project for a business internal data tracking app - I am a novice to webapp.
Is there a component i can use to add a stopwatch component to either count down or count up for form entries?
we are using it to store data on a session where we count the number of times something has occured, the person entering the data will hit a counter function within say the minute of the task, so we will like to display the count down timer with a button for the data entry person to hit during the fixed time frame.
another use will be to add a count up timer for them to record how long a task was taken, so they will start the session and hit start on the button, and stop when the session is done, and i will like to pass the recorded time down to the form.
Thank you in advance!
Replies (3)
Hi,
Thank you for choosing Good.
Please refer to the related components of Good:
Countup component
Input Dialer component
If you need any further help please let us know and provide more details.
Regards,
Sean
Hi Sean,
Many thanks for the direction, is there some sort of component that looks like a clock? or has a start, stop function that reflects time in mins and seconds?
Best Regards,
ZhiXuan
Hi,
You can try to use below quick custom solution:
<pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Timer</title> <style> .timer { font-size: 2rem; margin-bottom: 20px; } </style> </head> <body> <div class="timer" >00:00</div> <button >Start</button> <button >Reset</button> <script> let time = 0; // Time in seconds let interval; let running = false; const timerDisplay = document.getElementById('timer'); const startStopBtn = document.getElementById('startStopBtn'); const resetBtn = document.getElementById('resetBtn'); function updateDisplay() { const minutes = Math.floor(time / 60).toString().padStart(2, '0'); const seconds = (time % 60).toString().padStart(2, '0'); timerDisplay.textContent = `${minutes}:${seconds}`; } function startTimer() { interval = setInterval(() => { time++; updateDisplay(); }, 1000); } function stopTimer() { clearInterval(interval); } startStopBtn.addEventListener('click', () => { if (running) { stopTimer(); startStopBtn.textContent = 'Start'; } else { startTimer(); startStopBtn.textContent = 'Stop'; } running = !running; }); resetBtn.addEventListener('click', () => { stopTimer(); time = 0; updateDisplay(); running = false; startStopBtn.textContent = 'Start'; }); </script> </body> </html> </pre>
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
