One-minute timer?

Ask the community
, ,
1

774×443 14.5 KB

Help!! How can I code this design in WIX Corvid?
Is it possible to change the Styling of the current countdown timer, and make it reset to 1 minute segments, with a sound effect at the end of the timer? If not, how can I design this for my client in WIX? I’ve noticed it’s hard to get regular javascript coding to run it.

Thank you for your help! :pray:t3::sparkles:

2

I think it is impossible, so you can add html

3

How to do it with HTML?

4

@victoria64453 if you know how to use svg, you can put a circle shape on your page and do something like:

$w.onReady(function () {
$w("#button1").onClick((event) => {
let counter = 60;
let timer = setInterval(countdown, 1000);
function countdown(){
    let circleValue = (628 * counter/60).toString();
 $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>donut-chart</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="#D8D8D8" cx="100" cy="100" r="100"></circle>
                <circle id="segment1" stroke="#FFD900" stroke-dasharray="${circleValue},628" cx="100" cy="100" r="100" transform="translate(100, 100) rotate(-90) translate(-100, -100) "></circle>
            </g>
        </g>
    </g>
</svg>`
 counter--;
 if(counter < 0){clearInterval(timer)}
}
})
})

But you’ll have to make adjustments

5

See an example:
https://jonatandor35.wixsite.com/test/timer

6

I will test out my own version, and share it if I can’t seem to get it to work. your example is Exactly what I want! Just without the “%” sign. :slight_smile:

THANK YOU!

7

@jonatandor35 this is really great! do you know if there is a way for it to play audio on the timer completion? like a ding or something like that?

8

also i’m noticing that the percentage load is skipping numbers sometimes (goes up by 2) do you know why that is?

9

@deedmallard yes. it’s because I decided to show the new round percentage every 1 second. And since a second is 1.6% of a minute, it accumulates to 2% over time.
If you want, you can make it show the new percentage every half a second (for example) and then it won’t skip anything.

10

Or you can decide to show the percentage every time it has decimal of x.00; that will also work.

11

@deedmallard
See here:
https://jonatandor35.wixsite.com/test/timer-audio
I’ve implemented 2 changes:

  1. It doesn’t skip percentages.
  2. It plays sound when it hits the zero (to do that I’ve added an audio element, linked it to an external mp3 alarm sound, made it collapsed on load (so it won’t have any graphic), and added a command to play once it hits the zero.
12
  • I made it easier to change the timer duration (just change the durationInSeconds variable)
13

@jonatandor35 Thank you JD this looks so great!! I’m having an issue with it playing audio on mobile right now - do you know why that might be?

14

@deedmallard Many mobile browsers don’t allow automatic playing without any user action. It’s a kind of security policy, so websites won’t be able to play without an explicit permission.

15

But you can make some research maybe there’re some workarounds and bypasses.

16

@jonatandor35 Yes, but isn’t the button a direct click for permission?

17

@victoria64453 The audio is too far from the click. But you can try to find a longer audio file, start playing it at volume 0 onClick, and then when the timer hits the zero, turn the volume up. Maybe that will work.