Skip to content
Sign upLog in
← Back to Community

How do i make a countdown timer?

Profile icon
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