0%
//CODE
let counter = -1;
let timer;
$w.onReady(function () {
countdown();
$w("#button1").onClick((event) => {
let status = $w("#button1").label;
if (status === "Start" || status === "Resume") {
timer = setInterval(countdown, 100);
$w("#button1").label = "Pause";
$w("#button2").expand();
} else if (status === "Pause") {
clearInterval(timer);
$w("#button1").label = "Resume";
}
})
$w("#button2").onClick((event) => {
counter = 601;
countdown();
});
})
function countdown() {
let circleValue = (628 * counter / 600).toString();
if (counter === -1) { circleValue = "0"; }
$w("#vectorImage1").src = `<svg width="226px" height="226px" viewBox="0 0 226 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1 minute timer</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPad" transform="translate(-236.000000, -213.000000)" stroke-width="25">
<g id="donut-chart" transform="translate(249.000000, 226.000000)">
<circle id="base" stroke="#8a2be2" cx="100" cy="100" r="100"></circle>
<circle id="segment1" stroke="#D8D8D8" stroke-dasharray="${circleValue},628" cx="100" cy="100" r="100" transform="translate(100, 100) rotate(-90) translate(-100, -100) "></circle>
</g>
</g>
</g>
</svg>`;
if (counter % 10 === 0) { $w("#text43").text = `${(counter/6).toFixed(0)}%`; }
counter++;
if (counter > 600) {
clearInterval(timer);
counter = -1;
$w("#button1").label = "Start";
$w("#button2").collapse();
setTimeout(() => {
$w("#text43").text = "0%";
countdown();
}, 200)
}
}