Thank you for this project! I added 2 more buttons to make it more challenging: one to list the times and the other to remove them This was a fun project to make, thank you again!
Bro Please make a video react JS full course with a single video. Look like JavaScript course. Bye the way, you are not only good but also better and best teacher.
Hey Bro! Than you for your hard work. I have a question: I made it like below, but without "isRunning" parameter and seems to be working. What is this parameter and if function for in here?
Can u please do a series on data science full course , it will be very helpful, its a kind request 🙏🙏🙏🙏 And thank u so much for ur work and efforts that u have been providing to people like me who cant afford to get paide course...love from India 🇮🇳 🫡🫡🤜🤛🫂
// STOPWATCH PROGRAM
const display = document.getElementById("display");
let timer = null;
let startTime = 0;
let elapsedTime = 0;
let isRunning = false;
function start(){
if(!isRunning){
startTime = Date.now() - elapsedTime;
timer = setInterval(update, 10);
isRunning = true;
}
}
function stop(){
if(isRunning){
clearInterval(timer);
elapsedTime = Date.now() - startTime;
isRunning = false;
}
}
function reset(){
clearInterval(timer);
startTime = 0;
elapsedTime = 0;
isRunning = false;
display.textContent = "00:00:00:00";
}
function update(){
const currentTime = Date.now();
elapsedTime = currentTime - startTime;
let hours = Math.floor(elapsedTime / (1000 * 60 * 60));
let minutes = Math.floor(elapsedTime / (1000 * 60) % 60);
let seconds = Math.floor(elapsedTime / 1000 % 60);
let milliseconds = Math.floor(elapsedTime % 1000 / 10);
hours = String(hours).padStart(2, "0");
minutes = String(minutes).padStart(2, "0");
seconds = String(seconds).padStart(2, "0");
milliseconds = String(milliseconds).padStart(2, "0");
display.textContent = `${hours}:${minutes}:${seconds}:${milliseconds}`;
}
Document
Stopwatch
00:00:00:00
Start
Stop
Reset
body{
display: flex;
flex-direction: column;
align-items: center;
background-color: hsl(0, 0%, 90%);
}
#myH1{
font-size: 4rem;
font-family: "Arial", sans-serif;
color: hsl(0, 0%, 25%);
}
#container{
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
border: 5px solid;
border-radius: 50px;
background-color: white;
}
#display{
font-size: 5rem;
font-family: monospace;
font-weight: bold;
color: hsl(0, 0%, 30%);
text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75);
margin-bottom: 25px;
}
#controls button{
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
margin: 5px;
min-width: 125px;
border: none;
border-radius: 10px;
cursor: pointer;
color: white;
transition: background-color 0.5s ease;
}
#startBtn{
background-color: hsl(115, 100%, 40%);
}
#startBtn:hover{
background-color: hsl(115, 100%, 30%);
}
#stopBtn{
background-color: hsl(10, 90%, 50%);
}
#stopBtn:hover{
background-color: hsl(10, 90%, 40%);
}
#resetBtn{
background-color: hsl(205, 90%, 60%);
}
#resetBtn:hover{
background-color: hsl(205, 90%, 50%);
}
It would be nice if i could copy it
"We use flexbox because I like flex"
This man's arguments made me sweat respectfully
Thank you for this project! I added 2 more buttons to make it more challenging: one to list the times and the other to remove them
This was a fun project to make, thank you again!
paste your code to us if you have it
Bro Please make a video react JS full course with a single video. Look like JavaScript course. Bye the way, you are not only good but also better and best teacher.
Hello Bro 🙂
Let's try making Rock Paper Scissors game in JS 😏
Already working on it
Thank you so much for your great videos! The amount of knowledge you are sharing for free is truely amazing and deeply apreciated!
Bro my timer ain't timing😐
any solutions please I'd really appreciate🙃🙂
Thank you bro. You're super talented and a good teacher. ❤...... I wish you have a discord channel so I can ask you something about my career advice.
it doesnt work... and the worst part is i dont know why..
🤜🤜🤜🤙🤙🤙🤙👏👏👏👏thanks for good work in making stopwatch but your not only a teacher but also your a developer in codes thanks bro.
I've been waiting for this video for a long time, thank you ❤
Why let timer = null;?
Your videos bring me joy
Small change in js start fn code
If( !isRunning ) {
// Rest of code
isRunning= true
}
Hey Bro! Than you for your hard work. I have a question: I made it like below, but without "isRunning" parameter and seems to be working. What is this parameter and if function for in here?
Can you make a JS chatting app please ?
$symbol not working
You have to use back ticks `` to use string literals($={}) to actually work
Can u please do a series on data science full course , it will be very helpful, its a kind request 🙏🙏🙏🙏
And thank u so much for ur work and efforts that u have been providing to people like me who cant afford to get paide course...love from India 🇮🇳 🫡🫡🤜🤛🫂
stop and reset buttons aren’t working tho I did everything correct, any solutions?
That was very good. It is a simple example that introduces a number of not so elementary stuff in a very logical way... Cool
At the end, before dollar $ign use backtick `
It ıs very informational When watching someone while He is doing the job .
i think learning that way better in some way
Hey! love the video! im just starting the 8hours long js video and is amazing, will you do a compilation with this video and the lastest js ones too?
😭😭 bruh I was just following your old JS stopwatch tutorial omg
thank you
can
sorry to say but i didn't understand
Us