top of page

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)

    }

}

bottom of page