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 (4)
I wanted to explore online pokies for fun and came across Pokiesurf Casino. The website is very beginner-friendly, with lots of games to choose from. For Australians, they offer generous bonuses that make playing even more exciting. I love how straightforward the site is, and it’s quickly become one of my favorite places to play online.
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:
<!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>
