Countdown Timer | JavaScript

Ғылым және технология

#javascript, #css, #timer
Countdown Timer | JavaScript
In this tutorial we're going to build a simple Countdown timer using JavaScript.
SUBSCRIBE & HIT THE 🔔 bit.ly/3oBQbc0
--------------------------------
👉 Source Code Available Here:
🌱devmadeeasy.gumroad.com/l/cou...
--------------------------------
🎁 Become a Patreon because by doing that, you will support our Channel and also will have access to videos + Source Code!
/ webdevmadeeasy
--------------------------------
Chapters:
00:00 Intro
00:36 Getting Started
01:09 HTML
03:07 CSS
08:36 JavaScript
--------------------------------
📚Resources
Check the final project online: cranky-wright-a053c3.netlify....
Design inspiration from: dribbble.com/shots/6786551-Co...
Pictures: unsplash.com/
Font-Awesome: cdnjs.com/libraries/font-awesome
Markup: / webdevmadeeasy
--------------------------------
🏆Recommended Videos🏆
🎬Animated Sidebar Menu with HTML & CSS
➤ Watch: • 🎬Animated Sidebar Menu...
🎬Amazing Social Media Buttons Hover Effects | HTML & CSS
➤ • 🎬Amazing Social Media ...
🎬Animated Login Form | HTML, CSS & JavaScript
➤ Watch: • Animated Login Form |H...
🎬Slider Sign In / Sign Up Form | HTML CSS Vanilla JS
➤ Watch: • Slider Sign In / Sign ...
--------------------------------
🛴 Follow me on:
👉 / webdevmadeeasy
👉 / webdevmadee. .
👉 / robsonmuniz16
--------------------------------
🎵 Music:
Bensound.com

Пікірлер: 75

  • @DevMadeEasy
    @DevMadeEasy3 жыл бұрын

    If you find this video helpful, give it a like as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏 👉 Source Code Available Here: 🌱devmadeeasy.gumroad.com/l/countdowntimer

  • @bladimirgarcia4271

    @bladimirgarcia4271

    3 жыл бұрын

    It's not working for me

  • @markanula

    @markanula

    2 жыл бұрын

    yeah, is there any way we can download this source code? and can we after the countdown open a page to another display instead of starting the countdown afresh for another 365 days.

  • @markanula

    @markanula

    2 жыл бұрын

    by the way, you have an awesome content.

  • @oluwaseunoni7441

    @oluwaseunoni7441

    Жыл бұрын

    Hello. i am a newbie. oollwed the video carefully but my script is not working, i keep getting Nan error message . what caoulc be wrong?

  • @artismagraphics
    @artismagraphics Жыл бұрын

    I came back from years of time travel. I can tell you people were grateful for what you did two years ago. Subbed.✌

  • @DevMadeEasy

    @DevMadeEasy

    Жыл бұрын

    Wow, thank you! And welcome aboard!

  • @normaliz3
    @normaliz33 жыл бұрын

    Best tutorial EVER!!! keep it up!!

  • @DevMadeEasy

    @DevMadeEasy

    3 жыл бұрын

    Wow, thanks!

  • @juanCruzMurguia
    @juanCruzMurguia2 жыл бұрын

    Nice tutorial, thanks :D

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Glad it helped!

  • @andreviniciusbezerradasilv9335
    @andreviniciusbezerradasilv93352 жыл бұрын

    thank u so much, muito obrigado broder

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Hello André, I'm glad you liked it. Welcome to our DEV Community.

  • @user-ug1vi3bv1f
    @user-ug1vi3bv1f2 жыл бұрын

    Thanks!

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Welcome! I'm super glad you liked it. Happy Coding!

  • @rahil-aliyev
    @rahil-aliyev Жыл бұрын

    Thank you very much. It works. But one thing İ wanna say. The 'settimeout' function works once when I write your code. And I changed "setInterval(() => updateCountdownTime(), 1000);" and the problem solved.

  • @KRYSSA.official
    @KRYSSA.official2 жыл бұрын

    Hi! So is there a way you can print out the time in military time (24 hour) than standard time?

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Hey Kryssa, how are you doing? Yes, i just made a template, there are no limits to what you can do from it. Happy Coding!

  • @technaki7490
    @technaki74902 жыл бұрын

    hi nice vid, 1 question - how do i make it stop at 0 and not go negative? ty

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Hey Dev, I'm glad you liked it... Answering your question: well, we get whatever the current year is and add 1 to it, this we don’t have to hard code the year we’re countdown to… ${currentYear + 1} const currentYear = new Date().getFullYear(); const newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);

  • @ajayk6862
    @ajayk68622 жыл бұрын

    goood easy to learn

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Glad you think so!

  • @ajayk6862

    @ajayk6862

    2 жыл бұрын

    Thanks for the vedio I'm now only learning its use full to me I'm from Tamil Nadu

  • @alihyder7266
    @alihyder7266 Жыл бұрын

    if your countdown number doesnt shown in ur web page than change QuerySelectorALL to getElementBy the video has that part skipped where he change it in 16:57 to 16:58 jusr focus on queryselector

  • @timoneisold
    @timoneisold2 жыл бұрын

    How can I do it as a link, so I can send it to my friends and other people? Please someone help me

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Hey DEv, how are you doing? You can copy the url and share it with your friends. Let me know!

  • @kaiser94exodus89
    @kaiser94exodus89 Жыл бұрын

    Uncaught syntax error : identifier 'days' has already been declared. This error is from the very first line of javascript, eventhough I finished the whole tutorial it still doesn't work and when I rewrite it, it's the same. also whenever I cut it off, the console tells me that the error now is in the next const... then the next one if I remove this latter... etc. It's the only problem and I don't know why, it doesn't make sense and it's the first time tbh

  • @kaiser94exodus89

    @kaiser94exodus89

    Жыл бұрын

    Help

  • @DevMadeEasy

    @DevMadeEasy

    Жыл бұрын

    Hello dev, how are you doing Send me a msg via FB page, and I will send you the Source Code, this way you can find the error... 99% of the time is just a silly typo! Happy Coding my friend!

  • @topebanjo5639
    @topebanjo56393 жыл бұрын

    Hii I was want to make a day countdown timer how would I do it

  • @DevMadeEasy

    @DevMadeEasy

    3 жыл бұрын

    Hello dev, how are you? This video is a step-by-step teaching you how to do this. Follow step by step, feel free to do it your way and add features, be creative. If you have any questions, post your code here and the community will help you.

  • @topebanjo5639

    @topebanjo5639

    3 жыл бұрын

    @@DevMadeEasy hello dev,how are you const days = document.getElementById('days'); const hours = document.getElementById('hours'); const minutes = document.getElementById('minutes'); const seconds = document.getElementById('seconds'); const currentMonth = new Date().getFullMonth(); const newMonthTime = new Date(`April 23 ${currentMonth + 1} 00:00:00`); function updateCountdown() { const currentTime = new Date(); const diff = newMonthTime - currentTime; const d = Math.floor(diff / 1000 /60 / 60 / 24 ); const h = Math.floor(diff / 1000 / 60 / 60 % 24); const m = Math.floor(diff / 1000 / 60) % 60 ; const s = Math.floor(diff / 1000) % 60; days.innerHTML = d; hours.innerHTML = h minutes.innerHTML = m seconds.innerHTML = s } setInterval(updateCountdown, 1000); This is the code for day countdown timer but the code is not working

  • @HARS-

    @HARS-

    3 жыл бұрын

    @@topebanjo5639 Go to the HTML file and put 00 in Seconds, minutes, hours, and days

  • @rabanash7894

    @rabanash7894

    2 жыл бұрын

    Hi same problem, did you find a solution ?

  • @noahheine818
    @noahheine8182 жыл бұрын

    my line 8 doesn't work the new Date(xxxx) doesn't work, help?

  • @kaiser94exodus89
    @kaiser94exodus89 Жыл бұрын

    so the new year thing got time automatically? I thought you had to tell the javascript and the browser that the time is "x" and the date is "y" so it can start counting

  • @DevMadeEasy

    @DevMadeEasy

    Жыл бұрын

    Yes it does...

  • @connerwhite5351
    @connerwhite53512 жыл бұрын

    I don't see the source code on your patreon?

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Hello Dev, how are you doing? Yes, I believe I uploaded it there.

  • @connerwhite5351

    @connerwhite5351

    2 жыл бұрын

    @@DevMadeEasy Ah, u did. Thank you!

  • @oskarkopac9249
    @oskarkopac92492 жыл бұрын

    nice video but I cant find the link to goolge fonds where you copied the script

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Hey Dev, how are you doing? Here is is Google Fonts: fonts.google.com/ Happy Coding!

  • @rhisavbora2975
    @rhisavbora29752 жыл бұрын

    My innerHTML didn't work.. Idk why.. I have bit less knowledge of HTML maybe that's why

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Hello DEV, 99% of the time it's a typo. Check it again. (DEV's Life) If you can't do it at all, send me a message on our facebook page and I'll send you the source code. Happy Coding!

  • @hieuhee5766
    @hieuhee5766 Жыл бұрын

    Why const %24 and %60 you can explain help me

  • @normael1011
    @normael10112 жыл бұрын

    nothing happen in my console... it does not show the number it meant to show at 12:50

  • @timoneisold

    @timoneisold

    2 жыл бұрын

    Same Problem.

  • @timoneisold159

    @timoneisold159

    2 жыл бұрын

    just look in the comments. I dont exactly know, which problem you got, but the other comments helped me alot.

  • @helisson2k

    @helisson2k

    Жыл бұрын

    const newYearTime = new Date(`January 1 ${currentYear + 1} 00:00:00`); You need to put `

  • @godwinch
    @godwinch2 жыл бұрын

    Hi! So my problem is that the numbers doesn't show on my webpage. I have been in stack overflow to find an answer but I found nothing. Can you help me find out what's wrong? Thank you. btw nice video!

  • @DevMadeEasy

    @DevMadeEasy

    2 жыл бұрын

    Let me check! Can you please how me your code? Don't worry 99% of the time it's a simple typo.

  • @vlahman_

    @vlahman_

    2 жыл бұрын

    instead of receiving the number in the console, the NaN (Not An Number) message appears. not sure what am I doing wrong.

  • @GabriellaD0

    @GabriellaD0

    2 жыл бұрын

    @@DevMadeEasy Doesn't work for me either. it simply doesn't appear, but the console doesn't write anything either. const days = document.querySelectorAll('days'); const hours = document.querySelectorAll('hours'); const minutes = document.querySelectorAll('minutes'); const seconds = document.querySelectorAll('seconds'); const currentYear = new Date().getFullYear(); const newYearTime = new Date(`January 1 ${currentYear + 1 } 00:00:00`); function updateCountdown() { const currentTime = new Date(); const diff = newYearTime - currentTime; const d = Math.floor(diff/1000/ 60 / 60 /24); /*1000ms = 1s */ const h = Math.floor(diff/1000/ 60 / 60) % 24 ; const m = Math.floor(diff/1000/ 60) % 60 ; const s = Math.floor(diff/1000) % 60 ; days.innerHTML = d; hours.innerHTML = h minutes.innerHTML = m seconds.innerHTML = s } setInterval (updateCountdown, 1000);

  • @fatimazabalaga6356

    @fatimazabalaga6356

    Жыл бұрын

    Hi, I have the same problem. How did You find the mistake?

  • @maxdamiecki1935

    @maxdamiecki1935

    Жыл бұрын

    I got same problem as well

  • @vasanthakumar0639
    @vasanthakumar0639 Жыл бұрын

    $ is't work??

  • @Jokamutta
    @Jokamutta3 жыл бұрын

    Now go live till New Years :)

  • @DevMadeEasy

    @DevMadeEasy

    3 жыл бұрын

    It sounds good :) Check the final project online: cranky-wright-a053c3.netlify.app

  • @Jokamutta

    @Jokamutta

    3 жыл бұрын

    @@DevMadeEasy Nice :)

  • @HARS-
    @HARS-3 жыл бұрын

    when I run the console.log it does run perfectly on the console but, when I run the code in this way function updateCountdowntime();{ const currentTime = new Date (); const diff = newYearTime - currentTime; const d = Math.floor(diff / 1000 / 60 / 60 / 24); const h = Math.floor(diff / 1000 / 60 / 60) % 24; const m = Math.floor(diff / 1000 / 60) % 60; const s = Math.floor(diff / 1000) % 60; days.innerHTML = d; hours.innerHTML = h minutes.innerHTML = m seconds.innerHTML = s } setInterval(updateCountdowntime, 1000); Nothings happens, if anyone have a suggestion please

  • @myloufrom

    @myloufrom

    3 жыл бұрын

    I deleted the const days / hours / minutes / seconds, my function looks like this: function updateCountdown() { const currentTime = new Date(); const diff = newYearTime - currentTime; const d = Math.floor(diff / 1000 / 60 / 60 / 24); const h = Math.floor(diff / 1000 / 60 / 60) % 24; const m = Math.floor(diff / 1000 / 60) % 60; const s = Math.floor(diff / 1000) % 60; document.getElementById('days').innerHTML = d; document.getElementById('hours').innerHTML = h; document.getElementById('minutes').innerHTML = m; document.getElementById('seconds').innerHTML = s; } setInterval(updateCountdown, 1000); Everything is displayed well !

  • @poojamulik3066

    @poojamulik3066

    2 жыл бұрын

    @@myloufrom hey thankssss

  • @RogerontheKeys

    @RogerontheKeys

    2 жыл бұрын

    i have the same issue

  • @helisson2k

    @helisson2k

    Жыл бұрын

    I have the same problem. Just word perfectly on the "console.log(d, h, m, s)" someone can help us?

  • @andreviniciusbezerradasilv9335
    @andreviniciusbezerradasilv93352 жыл бұрын

    Você é brasileiro ne ?

  • @fndfernandu

    @fndfernandu

    2 жыл бұрын

    5s de vídeo eu pensei a mesma coisa

  • @saqlainiqbal4044
    @saqlainiqbal40444 ай бұрын

    source code please

  • @DevMadeEasy

    @DevMadeEasy

    4 ай бұрын

    It's in the Video Description. Happy Coding my friend.

  • @AlessandroAlmeida-gy9ql
    @AlessandroAlmeida-gy9ql9 ай бұрын

    I've never heard a brazilian dude speaking english😂😂😂

  • @DevMadeEasy

    @DevMadeEasy

    9 ай бұрын

    The programming language is English, I even consider it a prerequisite. As I live in Europe, there is a great diversity of languages, I will expand the channel to French and German.

  • @NwabudeEKene
    @NwabudeEKene4 ай бұрын

    You didn't tell us the shortcuts

  • @DevMadeEasy

    @DevMadeEasy

    4 ай бұрын

    Which ones do you want to know? I put it in the description.

Келесі