Need help with countdown component

[isaac-souza]

Hi guys,

Can someone please some a simple example how to change the countdown value?

I googled how to change a css variable using js and found these,

https://www.w3schools.com/css/css3_variables_javascript.asp
https://css-tricks.com/updating-a-css-variable-with-javascript/

I tried to use setInterval and change the --value variable as the links above shows, but I still can get the counter to work.

setInterval(() => {
    counter.value++
    document.documentElement.style.setProperty('--value', counter.value)
    
    console.log(counter.value)
}, 1000)

I have never done something like this using js, so I have no clue where the mistake is.

Can someone give a help here, thanks.

BTW, DaisyUI is freaking awesome, I love it.

[saadeghi]

Here's an example: https://codepen.io/saadeghi/pen/jOazxMz?editors=1010

[isaac-souza]

Thanks man!!!

[Michael-indochat]

@saadeghi This is my example, https://codepen.io/michael-indochat/pen/ZEjQvGX?editors=1011
The initialization is 10, and 1 will be subtracted every second. In the example, when rendering for the first time, 00 will appear, and then 09. How should I fix it? Thanks!

[Michael-indochat]

Is there a way to not see the initial 00 ?
https://codepen.io/michael-indochat/pen/ZEjQvGX?editors=1011

[saadeghi]

@Michael-indochat you can put the CSS variable with your initial value inside the HTML.

[Michael-indochat]

Here's the example you provided, could you try to write a version that counts down from 10 to 0? Thanks!
https://codepen.io/saadeghi/pen/jOazxMz?editors=1010

[saadeghi]

@Michael-indochat https://codepen.io/saadeghi/pen/jOazxMz?editors=1010

[Michael-indochat]

Thanks, this solved my issue!

[yesworld]

How to remove the leading zero at the number? I want to get 1 number, not 01
Thanks

[saadeghi]

You can add this to your CSS file:

.countdown>*:before {
  content: "0\a 1\a 2\a 3\a 4\a 5\a 6\a 7\a 8\a 9\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a 60\a 61\a 62\a 63\a 64\a 65\a 66\a 67\a 68\a 69\a 70\a 71\a 72\a 73\a 74\a 75\a 76\a 77\a 78\a 79\a 80\a 81\a 82\a 83\a 84\a 85\a 86\a 87\a 88\a 89\a 90\a 91\a 92\a 93\a 94\a 95\a 96\a 97\a 98\a 99\a"
}

[yesworld]

@saadeghi oh, I see, thank u!