Simple Countdown Timer with JavaScript
HTML-код
- Опубликовано: 20 янв 2020
- 👉 Daily Coding Challenges: iCodeThis.com/?ref=ytb-js-cou...
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/florinpop17 
Наука
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, straightforward, and easy to follow - thanks!
Thank u so much, I have a deadline tomorrow and countdown is the thing I only needed
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.
Subtitles help a lot in understanding the simply perfect video. Thank U!
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() ?
Very cool, and simple. Nice job!
Thank you for this tutorial!
incredible lesson!
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.
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.🌹🌹🙏🙏🙏😃
To the Point. Thank you
Appreciate it, keep doing what you're doing!
you aren't actually guaranteed that setinterval calls the function every 1000ms, so if theres some heavy processing the timer won't be accurate.
Hello, Romania ! Greetings from Serbian border with Romania !
Hey 👋
i was wondering how you could make it so it doesnt show blank on refresh but just starts with the numbers immediately?
if refresh the page countdown timing will be continue ....?
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?
🔥🔥🔥🔥
💦 💦 💦 💦
Turning down your fire 😂
The best tutorial.. Thanks
if reload page then countdown not stop. continue running if i logged out?
Thanks great tutorial
appriciate your work!
whcih link you have put in style.css???
what's the font from google fonts??
very cool, but the @import url didn't work for me.
have any tips?
tysm for the tutorial
super thanks
All my respect!
✌️
🦮
Thank you so much!
You're welcome!
Please help! Can timer restart by itself? How to do it?
In style.css file what you have import sir
Thanks a lot. Your code is precise . how follow you on your tutorial
Awesome man
Good job !
short and simple.. thanks
Glad it helped
Nothing changes when I add the body and p text to the CSS file
Nice tutorial
what about adding user input to it?
thanks bro
Love it and usefull, thanks !
My pleasure 😇
thanks
:D
thx
can you do one with a Custom Animated Number Counter?
Hi can someone help me my countdown won't start i don't know why :/ i need help for my project
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
Hi @
Florin Pop , how can we add pause countdown in this..please help!
😂😂 mil gyi help
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
which editor are you using ?
Visual studio code
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.
great video, could you please tell me which font of vscode you are using in your video . ...
I think it’s the default
What have you written in {} brackets? ?
so helpfull
how to go about if the starting time is hours instead of minutes
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.
Say hello to ma little fren! xD
What if I want to include hours?
How can it be done for the counter when it reaches 0, can it be reset by itself?
@sidhanth rathod it doesn't work(((
how to stop timer after 0(without going negative)?
It doesn't stop after 10 minutes and counts in negative digits
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!
how about hours and minutes?
It's as easy as that! Mine took roughly 50 lines of code to complete :(
What is i wanted to have 2 zeros? Instead of 9:2, having 09:02
Hey florin pop
Neat algorithm
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--;
}
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
Pls which text editor is this?
visual code studio
The countdown doesn't work in my browser i need help
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
ayy
where is the source code ?
a small m instead capital M in Math function costs me an hour...lol
LOL
First🎆🎆
💪🏻💪🏻💪🏻
I'm new in js ispent hours thinking ` is same as ' F
it doesnt stop at zero
That’s terrible.
`setInterval` is not accurate. It will drift and not be accurate.
HTTP 203 covered the correct way to do this.
`
This is not worked 😑 what problem 😐 I don't know 😕
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
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;
}
}