Тёмный

Stopwatch using HTML, CSS and JavaScript | Play, Reset and add Laps 

The Coding Lab
Подписаться 1,4 тыс.
Просмотров 19 тыс.
50% 1

Create a modern and simple stopwatch using HTML-5, CSS, and JavaScript.
An awesome looking stopwatch with the following features:
1. Play/Pause the timer
2. Add lap on a button click
3. Clear all the laps on a single click
4. Reset timer with a click
5. Awesome animation on the timer

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

 

26 янв 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 34   
@TheCodingLab
@TheCodingLab 2 года назад
Hi guys, planning to create a GitHub page with links to all 127+ project repos, and will also keep updating the links for all upcoming projects repo. Please help me achieve the target of 1k+ subscribers for motivation.
@ajaymandal2560
@ajaymandal2560 2 года назад
source code please ..
@GauravKumar-hr7tt
@GauravKumar-hr7tt 2 года назад
your code is full of disasters , I have been following your video from beginning to end and thought mine would look same if I keep doing what you are doing but no its full of error , maybe you fix your error and cutout those fixing part resulting in this disaster , Is thats the reason you haven't provided source code ,what is the meaning of uploading this video
@muslumercan3447
@muslumercan3447 3 года назад
hey bro how to do new labs started from 0. i mean when the second 3 first lab 3, when second is 7 the 2lab should be 4.
@MASTER_OF_ALL_1750
@MASTER_OF_ALL_1750 3 года назад
please give or plz make 1 more video how the code looks in ending please
@ramii358
@ramii358 2 года назад
lapButton.append(li) use instead of lap.appeand(li).... It will not show error
@yourkaa5670
@yourkaa5670 3 года назад
Code source ?
@MASTER_OF_ALL_1750
@MASTER_OF_ALL_1750 3 года назад
plz copy paste the html code and give i am getting errors help me
@c_39_sakshinagare99
@c_39_sakshinagare99 4 месяца назад
Animation ka code nhi chal raha he
@c_39_sakshinagare99
@c_39_sakshinagare99 4 месяца назад
Animation not working give me solution
@djsid651
@djsid651 Год назад
There is a slight Problem with the code, after finishing a stopclock if I press Reset and then again start the clock from the Begining. Now when I hit Lap the time comes from the previous timer, which should not be the case.
@maayanzakuta5328
@maayanzakuta5328 Год назад
add secCounter = 0; to const reset it should fix it. fixed it for me :)
@i_m_bob
@i_m_bob 8 месяцев назад
​@@maayanzakuta5328also add minCounter=0 to solve the minute issue
@rohitmandhyan
@rohitmandhyan 4 месяца назад
const reset = () => { /* isReset = true; play(); lapButton.classList.add("hidden"); resetButton.classList.add("hidden"); second.innerHTML = ' 0 :'; centiSec.innerHTML = ' 0'; minute.innerHTML='0 : '; */ playButton.innerHTML = 'Play'; clearInterval(min); clearInterval(sec); clearInterval(centiSec); isPlay = false; isReset = false; bg.classList.remove("animation-bg") lapButton.classList.add("hidden"); resetButton.classList.add("hidden"); // reset the minCounter, secCounter, and centiCounter to zero. minCounter = 0; secCounter = 0; centiCounter = 0; /*reset the innerHTML of the minute, second, and centiSecond elements to show zero values. */ minute.innerHTML = '0 :'; second.innerHTML = '&nbsp 0 :'; centiSecond.innerHTML = '  0'; // also hide the lap-clear-button since there are no laps to clear. clearButton.classList.remove("hidden"); // clear the laps and set lapItem back to zero. laps.innerHTML = ''; lapItem = 0; } This change is the correct solution for the error of the reset button taking time to 0:0:0 after being pressed.
@user-gu8sh7sh9i
@user-gu8sh7sh9i 5 месяцев назад
full of errors first he code nd delete it nd rewrite soo confusing😑😑😑
@sudhirkumar1189
@sudhirkumar1189 Год назад
lots off errors where is js file which Handel .json settings don't use or try to learn from here it's full of error just wasting time to fix all this error and watch multiple time he didn't fixed that in videos
@-LIttamGnanaprasuna
@-LIttamGnanaprasuna 9 месяцев назад
Whats wrong with the js code, full of errors , its a time waste to watch nd doing this 😑, one thing i didn't understood, if u know there is an error y u upload, or u should have correct it by editing, its a time waste guys to watch this video
@swarajkumar9550
@swarajkumar9550 2 года назад
i have completed this project with proper code if somebody needs the code comment back
@mohdatish9417
@mohdatish9417 2 года назад
please
@swarajkumar9550
@swarajkumar9550 2 года назад
@@mohdatish9417 ping me
@mohdatish9417
@mohdatish9417 2 года назад
@@swarajkumar9550 how i ping you
@mohdatish9417
@mohdatish9417 2 года назад
please send code here
@sugandhsingh8319
@sugandhsingh8319 Год назад
give us the code man
@aadityasharma530
@aadityasharma530 3 года назад
Pls give source code
@aadityasharma530
@aadityasharma530 3 года назад
Pls reply
Далее
Simple Stopwatch Project with HTML, CSS and JavaScript
14:25
How is it possible? 🫢😱 #tiktok #elsarca
00:13
Просмотров 2,8 млн
Build this JS STOPWATCH in 18 minutes! ⏱
18:06
Просмотров 17 тыс.
A stopwatch written in JavaScript ⏱️
12:14
Просмотров 30 тыс.
Build a Stopwatch Using Javascript, HTML, & CSS
13:13
Секундомер на JavaScript | Stopwatch
12:00