How To Create A Stopwatch Using JavaScript | Make Stopwatch With HTML, CSS And JavaScript

Подписаться 1 млн

Просмотров 69 тыс.

50% 1

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.com/file/d/1iSB_...
-----------------------------------------
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
👉 easytutorialspro.com/go/course/
-------------------------------------
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)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ 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:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Опубликовано:

1 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 112

@talkingnpc Год назад

Needed a stopwatch for an exercise, this great tutorial helped me a lot, thanks!

@leandrohenrique6056 Год назад

I'm Brazilian, and your videos are the best.

@GreatStackDev Год назад

Thanks! 😃

@ShirajBikaner Год назад

i am indian, hlo nice to meet you

@Dr.smileclinic Год назад

I'm தமிழன்..😎

@mayankcharan1688 10 месяцев назад

Loved your work you have done fantastic job .very easy to understand concept.well done ❤❤

@konstantinreut2577 7 месяцев назад

I am thankful to you for your lessons.

@HD-op1pe Год назад

Thank you so much for this. Exactly what I needed.

@quantyquanty3724 Год назад

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.

@shubhammaurya3309 Месяц назад

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

@GreatStackDev Месяц назад

You're welcome. Thank you. 😊 Keep making more projects!

@mahmodsamir5110 Год назад

best and simple explanation ever

@user-fn4sz9nj4k 3 месяца назад

I have been following your videos and all of the videos are so much help full keep going 😁

@albina272 Год назад

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!

@GreatStackDev Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0YFrGy_mzjY.html

@nodiramatchanova1493 Год назад

your tutorials helps me a lot

@lukekoletsios3236 10 месяцев назад

thank for you for the video! Very helpful sir.

@zeeshanahmad789 Год назад

Simple and good explanations. Easy to understand. Awesome 👍🏻

@GreatStackDev Год назад

Thanks Zeeshan, glad you liked this tutorial to make Stopwatch using JavaScript

@salwacoding5661 5 месяцев назад

Thank you vary helpful toturial.

@cristianferreira3350 Год назад

Happy New Year!!! thank you for all you do for us! god bless you!

@GreatStackDev Год назад

Happy new year!

@meninubunitu Год назад

Cool project!

@CHIKKUGAMER-su1bx 4 месяца назад

Great one sir, nice explanation

@patty_d.4773 Год назад

Thank you so much!

@vikisneakers 9 месяцев назад

Learnt alot, thanks man

@marceloquiroga9052 9 месяцев назад

great Tutorial!!!!

@akSingh_120 3 месяца назад

nice concept. I liked it ..

@Gopal8055 Год назад

Sir i watch all your videos which is so helpful for me

@GreatStackDev Год назад

Thanks Gopal, glad you liked this tutorial to make stopwatch using javascript

@user-tl3os5ro5k 9 месяцев назад

Thanks! it Helped

@ghadykeyrouz1116 4 месяца назад

Thank you!

@dennisdarko3197 Год назад

I am really impressed with you presentation sir

@GreatStackDev Год назад

Thanks a lot, Glad you liked this tutorial to make stopwatch using javascript

@adityadhanani828 10 месяцев назад

Amazing it works

@govindsharma973 6 месяцев назад

Bro you are awesome❤❤ thanks yrr

@telmafarida7642 7 месяцев назад

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.

@iamuzzalhossen Месяц назад

thanks a lot!

@ArfaYounus186 Год назад

thank you sir

@arjun_mavnoor 8 месяцев назад

Thank You

@nirushetty5530 Год назад

👏👏

@abkyerima Год назад

God bless you sir

@GreatStackDev Год назад

thank you so much Abubakar

@abelreddy257 11 месяцев назад

Great video. I was wondering why do we have to use timer variable.

@kholaseerat2385 Месяц назад

same

@ashishkabirpanthi5540 7 месяцев назад

❤❤❤

@TahaBolat-sn6ib Год назад

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 :)

@lemanqasimova890 7 месяцев назад

Thank you

@harshkochar2345 4 месяца назад

hey u got it? @@lemanqasimova890

@harshkochar2345 4 месяца назад

hey Bro can you explain me

@SahilKumar-yx2ev Месяц назад

thanks man god bless you always keep it up

@mahimapandey1195 10 месяцев назад

very good explanation! please make more complicated javascript projects as well

@GreatStackDev 10 месяцев назад

here is the best 30 JavaScript project, you will love it: ru-vid.com/group/PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9

@Vkvk-y3u 5 дней назад

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.

@tehniyatansari1614 8 месяцев назад

Very helpful

@GreatStackDev 8 месяцев назад

Glad it helped

@dadi_vlogs3254 7 месяцев назад

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); };

@harshkochar2345 4 месяца назад

there is an Alternative for that

@petermwansa4890 5 месяцев назад

Thank you

@GreatStackDev 5 месяцев назад

Welcome!

@harshitdhiman4645 7 месяцев назад

hey man i have a little issue that when I start the watch it says undefined please someone explain me what can i do to fix this problem

@isamsvideoediting4572 Год назад

Hello Avinash, Can you please make a detailed tutorial only on CSS

@GreatStackDev Год назад

you can check this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GAZVvpjxYQY.html

@isamsvideoediting4572 Год назад

@@GreatStackDev Thank you ❤️

@users9722 Год назад

yeah but the setInterval function fires immediately not after you click the start button

@21avinashsrivastava10 Год назад

This code is not working 😕

@Ghulammustafa-wg6cy Год назад

Thanks Sir love from Pakistan

@GreatStackDev Год назад

Thanks mustafa

@stopandthinkinsights 11 месяцев назад

8:20 js

@thenameisraju1052 Год назад

Please create calculator video with using javascript

@GreatStackDev Год назад

here it is: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cGgLHJGyS34.html

@Top5WithRhyme Год назад

How to create search engine plss

@gknomics 11 месяцев назад

hey man i have a little issue that when I start the watch it says undefined

@singh.aditya11 Год назад

Hey Avinash, Please Give me this StopWatch Full Code.

@Amman_vellore_angalammanthunai Год назад

Hi bro I am Indian create website upload to localhost to webhosting open phone not view full screen what append bro

@naturesmusic1171 Год назад

Could microseconds be added ?

@GreatStackDev Год назад

in settimeinterval add 0.001 that will count at 1 microsecond. then desirably other value also in H1 hours : minutes : seconds : milliseconds : microseconds

@abubakerhaider 8 месяцев назад

please someone clarify why he set the variable timer to null and why he used it in watchStart function if(timer !== null){ clearInterval(timer); }

@harshkochar2345 4 месяца назад

there is an Alternative for that

@harshkochar2345 4 месяца назад

function watchStart() { if (timer == null || timer.paused) { timer = setInterval(stopwatch, 1000); } }

@LinesofLove 2 месяца назад

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.

@dickson710 Год назад

but the time is not really ticking every 1 second.

@raven.4815 Год назад

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!

@NAVEENNAVEEN-fl4rw 10 месяцев назад

Yes,it is a three dimensional array

@raven.4815 10 месяцев назад

@@NAVEENNAVEEN-fl4rw Thx you very much!

@hiwotina26 Год назад

Doesn't the hour have infinite counting?

@GreatStackDev Год назад

yes it will be counting

@Allinone-ew4df Год назад

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

@RhythmRift74 Год назад

just throw the folder into vs code and turn on live sever

@Allinone-ew4df Год назад

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

@GreatStackDev Год назад

Hi Arpit, Just search for "VS Code live server" on RU-vid and watch any video, you will understand it

@Allinone-ew4df Год назад

Ok thanks

@jamesross5120 Год назад

I dont understand how you can remember everything to do with javascript its really hard to remember what goes where and how functionality works.

@GreatStackDev Год назад

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

@firaasantar4503 11 месяцев назад

Quit being a RU-vid your bad at it I fell asleep 3 times trying to follow this tutorial.

@user-rt7ql9di7l 4 месяца назад

3.Feb.24

@itwithaydin9000 Год назад

can you share code here?

@GreatStackDev Год назад

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]