A stopwatch written in JavaScript ⏱️

Показать описание

#JavaScript #stopwatch #program

JavaScript beginner stopwatch program tutorial example explained

Bro Code

Рекомендации по теме

Комментарии

const timeDisplay =
const startBtn =
const pauseBtn =
const resetBtn =

let startTime = 0;
let elapsedTime = 0;
let currentTime = 0;
let paused = true;
let intervalId;
let hrs = 0;
let mins = 0;
let secs = 0;

startBtn.addEventListener("click", () => {
if(paused){
paused = false;
startTime = Date.now() - elapsedTime;
intervalId = setInterval(updateTime, 1000);
}
});
pauseBtn.addEventListener("click", () => {
if(!paused){
paused = true;
elapsedTime = Date.now() - startTime;
clearInterval(intervalId);
}
});
resetBtn.addEventListener("click", () => {
paused = true;
clearInterval(intervalId);
startTime = 0;
elapsedTime = 0;
currentTime = 0;
hrs = 0;
mins = 0;
secs = 0;
timeDisplay.textContent = "00:00:00";
});

function updateTime(){
elapsedTime = Date.now() - startTime;

secs = Math.floor((elapsedTime / 1000) % 60);
mins = Math.floor((elapsedTime / (1000 * 60)) % 60);
hrs = Math.floor((elapsedTime / (1000 * 60 * 60)) % 60);

secs = pad(secs);
mins = pad(mins);
hrs = pad(hrs);

timeDisplay.textContent = `${hrs}:${mins}:${secs}`;

function pad(unit){
return (("0") + unit).length > 2 ? unit : "0" + unit;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="timeContainer">
<div
<button id="startBtn"
<button id="pauseBtn"
<button id="resetBtn"
</div>
<script src="index.js"></script>
</body>
</html>

.timerBtn{
width: 80px;
height: 30px;
border: 3px solid;
border-radius: 12px;
background-color:
color: white;
cursor: pointer;
font-family: consolas, monospace;
}
#timeDisplay{
font-size: 75px;
color: #40c437;
font-family: consolas, monospace;
}
#timeContainer{
text-align: center;
border: 3px solid;
border-radius: 25px;
background-color:
}

BroCodez

So glad that you started uploading videos again, very amazing tutorials thanx for all your efforts, hope we see more amazing tutorials from this channel

rastgo

You read my mind let's go I always wanted to practice making projects to enhance my skills because your teaching strategy is just amazing

jermiahcoleman

Really loving these mini projects, thanks bro

shreehari

Thanks for sharing this! Your example is very helpful.

markmcla

Thanks, I feel like I have found a gold mine with your channel. Thanks for such informative content. I know you have a small view count but the people who do watch your videos love them, so, keep up the good work!

codebitcookie

it's time to learn something new. love your content!

малосольные-окурки

you very best bro 😁 thankyou for this tutorial 😊

icy_invader

This has made things for me more easier ❤

vedvbjv

just so know, BRO i am a fan! good one.

akshayav

while(true)
{
print=your are really great;
}

tn_deadpool

very disheartening seeing your view count slowly plummet man, even though your content is goood :(((( I hope your videos gets algorithm'd by YouTube

yoshimochii

Now I understand 😃 which line should be first and which line should be next

sainy

My bro I need more javaScript projects.

kaolin-x

Good video Bro! can we have some more of these projects if you have the time to do so please?

fasteditsyt

Thank you bro, great video. How can we add milliseconds to this timer? I'm trying but can't really make it work fast, it counts same as seconds :S

foxie

Hi sir ..
Am run this my vs code.
It does not run why?

vasanthkumar.r

Im confused of the use of the variable "pause". Why do we need this boolean variable

bomapdich

Bro please do some small projects in python

nayabshaik

Bro ... can u make an ecom website tutorial

sagidkhair

A stopwatch written in JavaScript ⏱️

A stopwatch written in JavaScript ⏱️

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

Simple Stopwatch Project with HTML, CSS and JavaScript

Stopwatch / Timer - JavaScript Advanced Tutorial

Create a stopwatch with JavaScript

Very simple JavaScript timer [setInterval()]

Build a Stopwatch Using Javascript, HTML, & CSS

JavaScript setTimeout & setInterval In 90 Seconds #JavaScriptJanuary

ASMR Programming - Stopwatch App like iOS using JavaScript - No Talking

How To Create a Stopwatch | Using JavaScript | With (Source Code)

JavaScript Stopwatch | Fun Beginner JavaScript Project With HTML, CSS & JS

Stopwatch | HTML, CSS & JavaScript

Code A Stopwatch in Javascript

JavaScript Stopwatch | JavaScript Basic Projects | HTML, CSS & JavaScript

Create A Stopwatch Using Javascript | Step By Step Javascript Project

Stopwatch using HTML CSS & JavaScript

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

Stopwatch Simple Project using Javascript

Building a Stopwatch in JavaScript

Create a Stopwatch using | HTML CSS & Javascript

Stopwatch in JS | JavaScript Tutorials | Web Development Tutorials

Stopwatch in Javascript #Short

How to make a Stopwatch using HTML CSS and JavaScript

Build StopWatch Using JavaScript | StopWatch Web App