How To Create A Stopwatch Using JavaScript | Make Stopwatch With HTML, CSS And JavaScript
Vložit
- čas přidán 28. 08. 2024
- Learn How To Create A Stopwatch Using JavaScript | Make Stopwatch With HTML, CSS And JavaScript
#HTMLandCSS #JavaScript #JavaScriptProject
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this tutorial we will make a JavaScript Mini project to create a Stopwatch. You can add this JavaScript project in your portfolio or job resume. In this JavaScript stopwatch we will display the timer and there will be 3 buttons to control this stopwatch timer. We can Start, Stop and Reset the timer in this Stopwatch. These functionality will be created using JavaScript and the front end design of this stopwatch is made using HTML and CSS.
Download Image: drive.google.c...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
unsplash.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ CZcams: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
I'm Brazilian, and your videos are the best.
Thanks! 😃
i am indian, hlo nice to meet you
I'm தமிழன்..😎
日本語についてはどうですか？
彼はここにいない
Thank you this was an awesome video and a great idea for a project! I followed your steps and created my own version! :)
Request: Could you please do a part at the end of each project guiding us on how to make it responsive?
Thank you very much!
Thank you for your comment, All videos has different purpose, this video was for making stop watch using JavaScript. I don't want to make my video in long duration. You can learn the responsive concept in my other videos. Please check: czcams.com/video/0YFrGy_mzjY/video.html
Thank you so much sir... Phle mai khud se bnane ki kosish kar reha tha mgr logic ban hi nhi reha tha... Ab smjh aa gya
You're welcome. Thank you. 😊 Keep making more projects!
Needed a stopwatch for an exercise, this great tutorial helped me a lot, thanks!
Happy New Year!!! thank you for all you do for us! god bless you!
Happy new year!
15:20 Another way to add zeroes is by creating a single function which will work for every variable
dislpayTime.innerHTML = ` ${paddedZeroes(hours)} : ${paddedZeroes(minutes)} : ${paddedZeroes(seconds)}`;
function paddedZeroes(number){
return (number < 10 ? "0" + "") + number;
}
Sir i watch all your videos which is so helpful for me
Thanks Gopal, glad you liked this tutorial to make stopwatch using javascript
I am really impressed with you presentation sir
Thanks a lot, Glad you liked this tutorial to make stopwatch using javascript
I have been following your videos and all of the videos are so much help full keep going 😁
HI man, lots of thanks for what you offer here.
I have a question bro : what is the purpose of using this condition :
if(timer !== null) {
clearInterval(timer);
};
there is an Alternative for that
I am thankful to you for your lessons.
Thank you vary helpful toturial.
Loved your work you have done fantastic job .very easy to understand concept.well done ❤❤
Thank you for this video it is amazing!! But i've come to an issue that when you click start button it wasn't restarting so i figured out this issue with adding timer = null after clearInterval(timer) function. Because the timer wasn't null after clearInterval() function so i couldn't setInterval() again. If anyone has this issue this is the solution. Also dont forget to add timer = null after every clearInterval() function :)
Thank you
hey u got it?
@@lemanqasimova890
hey Bro can you explain me
best and simple explanation ever
Happy New Year. Looking forward to an interesting and creative one. Much has been said about ChatGPT but I am sure this channel with last. God Bless.
your tutorials helps me a lot
Thank you so much for this. Exactly what I needed.
Simple and good explanations.
Easy to understand.
Awesome 👍🏻
Thanks Zeeshan, glad you liked this tutorial to make Stopwatch using JavaScript
Hello, love the video it is simple and easy to comprehend. I however have an issue with the start button, when clicked more than once the function executes again making it execute after every 500 milliseconds. This now prevents the timer from being null so all other buttons do not work. Please offer some guidance.
nice concept. I liked it ..
Great one sir, nice explanation
Hello Avinash, Can you please make a detailed tutorial only on CSS
you can check this video: czcams.com/video/GAZVvpjxYQY/video.html
@@GreatStackDev Thank you ❤️
God bless you sir
thank you so much Abubakar
thank for you for the video! Very helpful sir.
thanks man god bless you always keep it up
Not given that how does the play button changes into pause button and then back into play button when the start or stop the timer??
Great video. I was wondering why do we have to use timer variable.
same
Thank you!
very good explanation! please make more complicated javascript projects as well
here is the best 30 JavaScript project, you will love it: czcams.com/play/PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9.html
Cool project!
Thanks!
it Helped
Thank you so much!
Learnt alot, thanks man
This code is not working 😕
Maybe you have some error?
thanks a lot!
❤❤❤
Bro you are awesome❤❤ thanks yrr
Clearinterval in watch star functuon when timer is not null how its work can you explain this on. Because clearinterval stop the time which one used in watchstop function also.
Thank You
please someone clarify why he set the variable timer to null and why he used it in watchStart function
if(timer !== null){
clearInterval(timer);
}
there is an Alternative for that
function watchStart() {
if (timer == null || timer.paused) {
timer = setInterval(stopwatch, 1000);
}
}
This code ensures that if a timer interval has been set previously (meaning timer is not null), it will be cleared to avoid any potential conflicts or unintended behavior.
Amazing it works
great Tutorial!!!!
Very helpful
Glad it helped
I don't know why but the "onlick" isn't working in this one so i tried adding event listener and it worked
thank you sir
Thank you
Welcome!
Hi man, this was pretty useful to a project of mine, but I have a doubt, what is the meaning of "let [seconds, minutes, hours] = [0,0,0]", does it create 3 different arrays? Thx!
Yes,it is a three dimensional array
@@NAVEENNAVEEN-fl4rw Thx you very much!
yeah but the setInterval function fires immediately not after you click the start button
hey man i have a little issue that when I start the watch it says undefined
Please create calculator video with using javascript
here it is: czcams.com/video/cGgLHJGyS34/video.html
Could microseconds be added ?
in settimeinterval add 0.001 that will count at 1 microsecond. then desirably other value also in H1
hours : minutes : seconds : milliseconds : microseconds
Thanks Sir
love from Pakistan
Thanks mustafa
Hi bro I am Indian create website upload to localhost to webhosting open phone not view full screen what append bro
👏👏
Hey Avinash, Please Give me this StopWatch Full Code.
Hello Avinash Sir,
I am Arpit and i am getting a probelem in this vedio at the time 02:02 you said that you will close the browser and open it with VSCode extention but i didn't understand that thing and when i thought that i will refresh the browser manually so it was not working .
So could you please help me that how could you do that thing i watch all your vedios and in all your vedios i get same probelem .
So please help me
just throw the folder into vs code and turn on live sever
I tried that also but i dont know how to throw the browser aand when i am right clicking so the live server option is also not coming
Hi Arpit, Just search for "VS Code live server" on CZcams and watch any video, you will understand it
Ok thanks
but the time is not really ticking every 1 second.
I dont understand how you can remember everything to do with javascript its really hard to remember what goes where and how functionality works.
I also don't remember everything, sometimes i have search too. But by creating some small project like this you will remember the common features
8:20 js
Doesn't the hour have infinite counting?
yes it will be counting
How to create search engine plss
any ones else timer displaying three digits instead of two?
Quit being a CZcams your bad at it I fell asleep 3 times trying to follow this tutorial.
can you share code here?
Sorry, I can't put the code link in public, People just download it and close the video without watching it, Then what's the use of making video tutorials, if you really want to learn please watch the video then try to make it yourself, if you get any issue you can email me [avinashdm@outlook.com]
3.Feb.24
WTF!?
??
How to create search engine plss
How to create search engine plss
How to create search engine plss
How to create search engine plss
How to create search engine plss
How to create search engine plss
How to create search engine plss
How to create search engine plss
How to create search engine plss
You need to know a Programming language like Java,Python
Mail me I will send it to you