Simple Countdown Timer with JavaScript
Вставка
- Опубліковано 8 вер 2024
- 👉 Daily Coding Challenges: iCodeThis.com/...
In this tutorial, we're going to build a simple #Countdown timer using #JavaScript. This will be added as a browser source in OBS in the next video: • How to add a Countdown...
#31Days31Videos
📹 Playlist: • Playlist
---
Follow me on:
📃 Website/Blog: florin-pop.com
👉 Twitter: / florinpop1705
👉 Linkedin: / florinpop17
👉 Instagram: / florinpop17
👉 Twitch: twitch.com/flo...
time--;
time = time < 0 ? 0 : time;
to avoid getting negative numbers
👍🏻
//virtual clap
Thks
You just saved me
thanks buddy, for newbies who asking what is that syntax, ternary operator
Great job! You explained it so simply... unlike all the other sources I looked at (stack overflow, etc.).
So true
It's been a year since you posted this comment. I bet it was when you were starting to learn to code. If you continued on the journey, now, a year later, you'd be feeling a lot differently about StackOverflow and all the other sources you had in mind. They are also great and very useful when you know what you're looking for.
Thank u so much, I have a deadline tomorrow and countdown is the thing I only needed
Hi, thanks for sharing. You need a validation for negative numbers.
let time = 0.25 * 60; //minutes * 60 seconds
let refreshIntervalId = setInterval(updateCountdown, 1000); //update every 1 second
function updateCountdown() {
const minutes = Math.floor(time / 60); // rounds a number DOWN to the nearest integer
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
const contdownEl = document.getElementById("f1");
contdownEl.innerHTML = `${minutes}:${seconds}`;
time--;
if (time < 0) { //stop the setInterval whe time = 0 for avoid negative time
clearInterval(refreshIntervalId);
}
}
Thank you so much!
how can we ask for user input for the minutes ?
Thank you very much
thanks bro, you saved my life today
Can you please tell what is 1000 in argument of setInterval() ?
Subtitles help a lot in understanding the simply perfect video. Thank U!
Thanks. Simple one. It's working fine.
With small change as minutes+":"+seconds instead of '${minutes}:${seconds}'
And time = time < 0 ? 0: time
Thank you so much, the code of him dont work a little crazy. But you safed me thanks bro
Thanks a lot. This solved my struggle.
Hello, Romania ! Greetings from Serbian border with Romania !
Hey 👋
Great, straightforward, and easy to follow - thanks!
you aren't actually guaranteed that setinterval calls the function every 1000ms, so if theres some heavy processing the timer won't be accurate.
Thank you for this tutorial!
Thanks for doing these tutorials.I just wanna know how to use these tutorials wisely becuase when i create a project from these tutorials after a while i can't do the same project that i did before.i would really appreciate if you mention a solution for this issue.🌹🌹🙏🙏🙏😃
incredible lesson!
Very cool, and simple. Nice job!
Thanks great tutorial
if refresh the page countdown timing will be continue ....?
Nice tutorial
Thank you so much!
You're welcome!
Appreciate it, keep doing what you're doing!
How can it be done for the counter when it reaches 0, can it be reset by itself?
@sidhanth rathod it doesn't work(((
All my respect!
✌️
🦮
To the Point. Thank you
super thanks
thanks bro
Hi can someone help me my countdown won't start i don't know why :/ i need help for my project
Neat algorithm
what's the font from google fonts??
short and simple.. thanks
Glad it helped
How do you stop the countdown from going negative?
Put an if statement and check if it’s less than 0, then set it back to 0.
Good job !
what about adding user input to it?
The countdown timer in JavaScript works when active on the timer tab but when I switch to another tab while the timer is running, it starts from 59:59. What am I doing wrong?
thanks
great video, could you please tell me which font of vscode you are using in your video . ...
I think it’s the default
Say hello to ma little fren! xD
which editor are you using ?
Visual studio code
Nothing changes when I add the body and p text to the CSS file
tysm for the tutorial
🔥🔥🔥🔥
💦 💦 💦 💦
Turning down your fire 😂
appriciate your work!
It's as easy as that! Mine took roughly 50 lines of code to complete :(
very cool, but the @import url didn't work for me.
have any tips?
If I make new page and open so it restart the counter again... Why is that so?
I want to set reverse counter and should open in all tabs or pages.
What have you written in {} brackets? ?
how to go about if the starting time is hours instead of minutes
What is i wanted to have 2 zeros? Instead of 9:2, having 09:02
Awesome man
if reload page then countdown not stop. continue running if i logged out?
for some reason I can't get the innerHTML statements to work.
Do I have something set wrong in my editor?
What kind of error do you get in the console?
@@FlorinPopUncaught TypeError : Cannot set properties of null (setting’innerHTML’) at updateCou ntdown
hi what does percentile do?? and `${minutes}:${seconds}` its like jquerry i dont understand to that? can you please explain
The backticks ` ` is template literal
The percentile gives the remainder, so time % 60 will give you however many seconds are left. The part that looks like jquery is just a different way to display the code without having to use +. For example, another way to write it is minutes + ":" + seconds; That will give you the same thing. It's really just a preference in this case. You can't use the single quote, though, it needs to be the backtick which is the the left of the number one usually. and looks a bit different ` (that's the backtick) and this ' is the single quote. Looks almost the same but the single quote acts differently.
@@FlorinPop I was wondering why that didn't work!
I'm trying to build this but with a button that can pause/resume the countdown... any suggestions? thank you.
Udemy has given it am currently done want the code?
@@kenmutesh4265 yes
so helpfull
Hey florin pop
In style.css file what you have import sir
It doesn't stop after 10 minutes and counts in negative digits
can you do one with a Custom Animated Number Counter?
Please help! Can timer restart by itself? How to do it?
how about hours and minutes?
whcih link you have put in style.css???
Thanks a lot. Your code is precise . how follow you on your tutorial
how to stop timer after 0(without going negative)?
The countdown doesn't work in my browser i need help
Love it and usefull, thanks !
My pleasure 😇
What if I want to include hours?
this code is not work sir plz tell me what is the mistake
const startingMinutes = 10;
let time=startingMinutes * 60;
let counter = document.getElementById('clock');
setInterval(updateCountdown,1000);
function updateCountdown(){
const minutes = Math.floor(time/60);
let seconds = time % 60;
seconds =seconds
Why doesnt work on my project?instead of counting the tjme down i got printet ${minutes}:${seconds}; ,exactly like that
You might have used quotes instead of backticks?
@@FlorinPop i got it instead of innerHTML i used innerText=minutes:seconds;
what is wrong with my code
const startingMinutes = 10;
let time = startingMinutes * 60;
const countdownEl = document.getElementById('countdown');
setInterval(updateCountdown, 1000);
function updateCountdown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
countdownEl.innerHTLM = `${minutes}:${seconds};`;
time--;
}
Hi @
Florin Pop , how can we add pause countdown in this..please help!
😂😂 mil gyi help
:D
it's running in negative too how to stop that?
You need to add a condition. And if statement which will check if the seconds is less then 0
The output is $minutes only displayed to me
thx
it doesnt stop at zero
a small m instead capital M in Math function costs me an hour...lol
LOL
Pls which text editor is this?
visual code studio
ayy
where is the source code ?
I'm new in js ispent hours thinking ` is same as ' F
This is not worked 😑 what problem 😐 I don't know 😕
`
That’s terrible.
`setInterval` is not accurate. It will drift and not be accurate.
HTTP 203 covered the correct way to do this.
First🎆🎆
💪🏻💪🏻💪🏻
Your timer will go below zero
Good catch 👍🏻
instead of time-- use time !== 0 ? time-- : time;
@@codeswithankit4316 thanks 😊
function ifzero(){
if(time === 0){
time = strttime * 60;
}
}
how do you do it so it shows a zero on the left when the time is under 10min?
so:
10:00
09:59
09:58
etc
instead of
10:00
9:59
9:58
Check to see if the number is less then 10. If it is then add a 0 at the beginning
i was wondering how you could make it so it doesnt show blank on refresh but just starts with the numbers immediately?