I have a python program running on heroku/flask. Basically, I receive two webhooks. The first webhook starts a stopwatch. The second webhook should grab the current value of the stopwatch.
I am struggling to grab the current value of the stopwatch. It seems there are two options. Grab the value from the actual variable via webscraping or print the values to the console and grab them from there. I was thinking about using Beautiful soup but was not sure how to grab the actual value when the stopwatch is running.
The code below shows you my html file that I am rendering using python. How can I grab the specific 'sec' variable from the program when the stopwatch is running? Or how can I grab information that is being printed to the console?
<!DOCTYPE html>
<html>
<body>
<div id="stopwatch-container">
<div id="stopwatch">00:00:00</div>
<button onclick="pause()">Stop</button>
</div>
<script>
var stopwatch = document.getElementById("stopwatch");
var startBtn = document.getElementById("start-btn");
var timeoutId = null;
var ms = 0;
var sec = 0;
var min = 0;
start();
/* function to start stopwatch */
function start(flag) {
if (flag) {
startBtn.disabled = true;
}
timeoutId = setTimeout(function() {
ms = parseInt(ms);
sec = parseInt(sec);
min = parseInt(min);
console.log(sec) // here you can see I am logging the sec value.
ms++;
if (ms == 100) {
sec = sec + 1;
ms = 0;
}
if (sec == 60) {
min = min + 1;
sec = 0;
}
if (ms < 10) {
ms = '0' + ms;
}
if (sec < 10) {
sec = '0' + sec;
}
if (min < 10) {
min = '0' + min;
}
stopwatch.innerHTML = min + ':' + sec + ':' + ms;
// calling start() function recursivly to continue stopwatch
start();
}, 10); // setTimeout delay time 10 milliseconds
}
/* function to pause stopwatch */
function pause() {
clearTimeout(timeoutId);
startBtn.disabled = false;
}
/* function to reset stopwatch */
function reset() {
ms = 0;
sec = 0;
min = 0;
clearTimeout(timeoutId);
stopwatch.innerHTML = '00:00:00';
startBtn.disabled = false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="stopwatch-container">
<div id="stopwatch">00:00:00</div>
<button onclick="pause_timer()">Stop</button>
<button onclick="start_timer()">Start</button>
</div>
<script>
var stopwatch = document.getElementById("stopwatch");
var startBtn = document.getElementById("start-btn");
const date = new Date;
var second = 0;
var minute = 0;
var hour = 0;
var second_timer;
var pause=true;
function seconds(){
if(pause==false){
second++;
if(second>=60){second=0;minute++;}
if(minute>=60){minute=0;hour++;}
if(hour>=24){hour=0;}
if(second<10){second="0"+second.toString();}
if(minute<10){minute="0"+minute.toString();}
if(hour<10){hour="0"+hour.toString();}
stopwatch.innerText = hour+":"+minute+":"+second;
second=parseInt(second);
minute=parseInt(minute);
hour=parseInt(hour);
}
}
function start_timer(){
var second_timer=setInterval(seconds,1000);
pause=false;
}
function pause_timer(){
clearInterval(second_timer);
pause=true;
}
</script>
</body>
</html>