Learn HTML, CSS & JavaScript by coding a Stopwatch | A beginner tutorial

Подписаться 57 тыс.

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

50% 1

Learn how to build a stopwatch in HTML, CSS and JavaScript using modern syntax. A timer stopwatch using start, stop and reset event listeners on click.
// JOIN THE NEW DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
/ @tylerpotts
// MY GEAR FOR CODING AND RU-vid
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

Хобби

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

18 окт 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@natevaub Год назад

Excellent tutorial, Im starting my webdev journey and I had this idea of a pomodoro site with countdown timer for my first project. This video is a gem. Greetings from france

@MaiconDouglas-cd8rj 2 года назад

Finally someone who uses const and let instead of var. I can see you're a man of culture as well.

@hiwayshoes 2 года назад

Dear Tyler, thank you for sharing your tutorial, I am very much a novice with all things coding, your explanation is perfect for those of us just getting our feet wet with coding. All the best to you and your channel, Cheers!

@TylerPotts 2 года назад

Thank you!!! :D

@quinnlutters7971 Год назад

Excellent tutorial, I had to make this for school didn't understand anything from every video or research i've done, but know I'm actually confident I can do it myself!

@TylerPotts Год назад

Glad it helped!

@arslangill2200 Год назад

very nice tutorial very clear logic and clean code building. Thanks

@blueblue9410 Год назад

Thank you! Great tutorial!

@irfk4173 2 года назад

Awesome. I now realised after watching, why my stopwatch keeps incrementing after I press the stop button. Thank you for that!!

@TylerPotts 2 года назад

Glad it helped!

@jluna231 Год назад

Thanks bro. I have a lot of work to keep doing.

@user-zu2ck1ig7k 6 месяцев назад

thank you teacher i have learned many things especially (var in css ) just like that

@nsikakakpan6638 Год назад

Thanks. This video was really helpful

@pkorneev5226 Год назад

really really cool vids. U can see that it is the real dev's work here. Not that clowns who just trying to teach you syntax of language and given 0 useful information besides of that.

@pkorneev5226 Год назад

Huge like and immidiatly subscribed

@xuyennguyenthi1274 2 года назад

Thank you very much!

@TylerPotts 2 года назад

Thank you

@sahiraahamed Год назад

Thanks a lottttt👏

@alirezahoseinzade1014 2 года назад

very good..tnx

@omsomol.j2501 Год назад

thanks a lot👍👍👍

@vinodphalke2121 Год назад

Thanks for superb video man

@TylerPotts Год назад

Thanks for watching, Vinod!

@maxjohnson7623 2 года назад

thank you so much!

@TylerPotts 2 года назад

You're welcome!

@bubbletea8793 Год назад

thank you

@amniar8158 2 года назад

thankyou so much man, never give up, you are great and god bless :)

@TylerPotts 2 года назад

Glad I could help

@mandeepsingh9469 Год назад

@@TylerPotts sir my stop and reset buttons are not working even when I copied your code from GitHub

@mandeepsingh9469 Год назад

@@TylerPotts please help me

@grndhustle 2 года назад

bro, you are top, thanks a lot

@TylerPotts 2 года назад

You're welcome!

@CryztalSeth Год назад

Mad skills! Thanx 4 doin' what U do! Keep on .....Keepin' on!

@tubextiyarli Год назад

Thanks bro

@pav4540 Год назад

Thanks tyler

@local_sensei Год назад

Great video! How can I write out milliseconds? I'm stuck!

@rodrigofarinha6085 Год назад

I Tyler! it´s possible to add this code to a google script (in a google sheet) ? Thanks for the video!!

@militisorphic 2 года назад

Cool video, but why you didn't put results button? Actually its important for interviews

@v-risparnris5756 2 года назад

Dear Tyler, If i want a source code about this clip (.html, .css .js), i will download or ... Thank you

@kenesu-senpai2307 Год назад

What if I want to add milliseconds? How do I code it?

@thelastcrusaders6317 2 года назад

i just clicked the bell icon!

@TylerPotts 2 года назад

Ayy love that! :D

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

nice video

@drishtisaraf8357 Год назад

why did we use both .watch and .time in the first queryselector?

@ansahsiddiqui1384 2 года назад

hey thank you so much! Is the source code available?

@sibanandanayak22 2 года назад

my button did'nt worked please help ,i wrote exact same code.

@grandeorsocapo 2 года назад

how did you change the color for concatenation ? (look at 15:59, when you write time_el.innerText = `${}:etcetc) i tried to change it in the json theme file but it seems that it's not managed... i have everything purple after the ` . thank you ps: anybody know how to do it?

@TylerPotts 2 года назад

Sorry I'm not sure it just works for me 😅

@grandeorsocapo 2 года назад

@@TylerPotts i hate you XD ps: awesome vids!

@mukuljoshi54u75 Год назад

Yes brother same problem Please give me any solution for this innerText

@jluna231 Год назад

Sometimes i feel like i should be proud of the progress ive made, but am not that type of person.

@TheCrowdel 2 года назад

why my stop button is reseting the time ??

@NERO-ez1mn 2 года назад

senpai can u do an electron tutorial? maybe just a system information application or is ELECTRON JS really dead? btw senpai what is your vs code font i've been lookin for that one but i don't know the name

@TylerPotts 2 года назад

I'll take a look! I haven't used it for a while! My fonts are set as Consolas, 'Courier New', monospace but I'm not sure if that's correct xD

@NERO-ez1mn 2 года назад

@@TylerPotts o fck that was just a consolas 😱 i've been struggling for the electron been wanting to know how to integrate it with react and a frameless windows but it is so complicated when it comes to renderer processes. maybe you can make it more easy to explain it

@TylerPotts 2 года назад

It may not come out until next week as I need to relearn it all hopefully I can help

@NERO-ez1mn 2 года назад

@@TylerPotts o i will wait for it 😍

@kyle1200 Год назад

My start button stops working completely even though I have the exact same code.

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

It Just keeps adding 0s when the minutes or seconds = 0... whyyy?

@Dvir1225 2 года назад

at 3:36, how did you add the ID to all the buttons at once?

@jamalmouatir6601 Год назад

omg same question i spent 1 hour trying to figure it out

@MrCroowN Год назад

You do it by button*3.CLASSNAME so for his example it is button*3.start

@costingeorgescu9760 Год назад

@@MrCroowN or # in case of the ID selector shown here

@albanustemu7396 2 года назад

Is that a vanilla javascript????

@TylerPotts 2 года назад

Yws

@manavmehta6433 Год назад

I am super bad with math "Math.floor((seconds - (hrs * 3600)) / 60);" when you do this I dont understand the math if my seconds = 3719 as per my formula im it would be math.floor( ( 3719 - 3719) / 0) timestamp is 17:22 in the video