Skip to content
← Back to Community
How do i make a countdown timer?
Profile icon
h
has Hacker Plan
icelite

I need help with making a countdown timer and notification system when it goes off, could anyone help? comment pls if you can!

Answered by Whacko [earned 5 cycles]
View Answer
Voters
Profile icon
SonicWave
Profile icon
replitAamol
Profile icon
jjrice2233
Profile icon
McJoe21
Profile icon
icelite
Comments
hotnewtop
Profile icon
Whacko
var timer = 60 /* Change it to whatever you want */ var countdown = setInterval(function() { if (timer == 0) { clearInterval(); /* End */ } else { timer -= 1 /* Countdown */ }; }, 1000 /* Miloseconds */);

Using the setInterval() JavaScript code, you can make a countdown.

Profile icon
icelite

ok, thnx! then... what HTML do i do? @JavaMaster1

Profile icon
Whacko

@Ravens0606

<script> var timer = 60 /* Change it to whatever you want */ var countdown = setInterval(function() { if (timer == 0) { clearInterval(); /* End */ } else { timer -= 1 /* Countdown */ }; }, 1000 /* Miloseconds */); </script>

It's JavaScript, so you need to use <script>.

Profile icon
Whacko

@Ravens0606 easy peasy, lemon squeezy

Profile icon
icelite
Profile icon
Whacko

@Ravens0606 Did it help? I can give you a code that way a <p> element shows the countdown.

Profile icon
icelite

yes! i would like the

pls too! @JavaMaster1

Profile icon
icelite

but thnx! @JavaMaster1

Profile icon
Whacko

@Ravens0606 K, here's the code:

<p id="countdown">60</p> <script> var timer = 60 /* Change it to whatever you want */ var timerText = document.getElementById("countdown"); var countdown = setInterval(function() { if (timer == 0) { clearInterval(); /* End */ timerText.value = "Out of time!"; } else { timer -= 1 /* Countdown */ timerText.value = timer; }; }, 1000 /* Miloseconds */); </script>

Does it work? I used document.getElementById().

Profile icon
icelite

Im sorry, but it didnt work! @JavaMaster1

Profile icon
Whacko

@Ravens0606 Lemme just double-check my code...
JavaScript isn't easy!

Profile icon
icelite

Ok! and... I agree! @JavaMaster1

Profile icon
Whacko

@Ravens0606 Oops... I used value instead of innerHTML.
Here's the working code:

<p id="countdown">60</p> <script> var timer = 60 /* Change it to whatever you want */ var timerText = document.getElementById("countdown"); var countdown = setInterval(function() { if (timer == 0) { clearInterval(); /* End */ timerText.innerHTML = "Out of time!"; } else { timer -= 1 /* Countdown */ timerText.innerHTML = timer; }; }, 1000 /* Miloseconds */); </script>

Now it should work.

Profile icon
Whacko

@Ravens0606 Also, you should practice your JavaScript. This website is really good. It might even help you with html!

Profile icon
icelite

Thanks! Can i alter that in any way and have it like the person using it can choose the set time? @JavaMaster1

Profile icon
icelite
Profile icon
Whacko

@Ravens0606 K, here's the code with the user input:

<div id="userInput"> <p>How many seconds do you want the timer to be? </p><input type="text" id="timerValue"><button onclick="setTimer()">Set Timer</button> </div> <button onclick="window.location = ''" style="display: none" id="restart">Restart</button> <p id="countdown">0</p> <script> function setTimer() { var userInput = document.getElementById("userInput"); userInput.style.display = "none"; var restart = document.getElementById("restart"); restart.style.display = "block"; var timerValue = document.getElementById("timerValue"); var timer = timerValue.value; var timerText = document.getElementById("countdown"); clearTimeout() var countdown = setInterval(function() { if (timer == 0) { clearInterval(); /* End */ timerText.innerHTML = "Out of time!"; } else { timerText.innerHTML = timer; timer -= 1 /* Countdown */ }; }, 1000 /* Miloseconds */); } </script>

Yeesh, that's a lot of code! Sorry I took so long. Does it work?

Profile icon
icelite

it works PERFECTLY! Thank you!! @JavaMaster1

Profile icon
Whacko

@Ravens0606 Do I get the cycles?

Profile icon
icelite

yep! you get 5 cycles! @JavaMaster1

Profile icon
Whacko

@Ravens0606 Thanks!

Profile icon
NISHoriginal

In Python, you can also use the time library:

import time sec = int(input("How many seconds do you want to countdown? : ")) for i in range(1,sec+1): print(i) time.sleep(1) print("Time Up!!")

I hope it helped.

Profile icon
icelite
Profile icon
RavenDad

Not at school

Profile icon
Bookie0

Hi what language?

Profile icon
icelite
Profile icon
Bookie0
Profile icon
icelite

Thanks! @Bookie0

Profile icon
icelite

@Bookie0 Also, do you know how to make the person set the timer?

Profile icon
Bookie0
Profile icon
icelite

do you know how to make the person set the timer? @Bookie0

Profile icon
Coder100

you can use new Date() for that @Ravens0606

Profile icon
Coder100
Profile icon
Bookie0

i guess you can input the user to choose the timer...?

maybe this can help:

https://stackoverflow.com/questions/54658075/javascript-set-a-timer-based-on-user-input

@Ravens0606

Profile icon
icelite

ok... i am a pretty new coder.. have you ever made a timer that i can refrence? @Bookie0

Profile icon
Coder100
Profile icon
icelite

ok thnx @Coder100

Profile icon
icelite

ok... where is the countdown code? @Coder100

Profile icon
Coder100

script.js @Ravens0606

Profile icon
Coder100

line 44 is approx it @Ravens0606

Profile icon
icelite
Profile icon
Coder100

np did it work @Ravens0606

Profile icon
Bookie0

duh you gave it to him lmao @Coder100

Profile icon
Coder100
Profile icon
Coder100

well just making sure lol @Bookie0

Profile icon
Bookie0

yea ofc ;) @Coder100

Profile icon
icelite

nope, but thnx! @Coder100

Profile icon
Coder100

@Ravens0606 send repl

Profile icon
icelite
Profile icon
Coder100
Profile icon
icelite