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!
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 🇮🇳 🫡🫡🤜🤛🫂
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?
// 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
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
Thank you so much for your great videos! The amount of knowledge you are sharing for free is truely amazing and deeply apreciated!
I've been waiting for this video for a long time, thank you ❤
Your videos bring me joy
It ıs very informational When watching someone while He is doing the job .
i think learning that way better in some way
That was very good. It is a simple example that introduces a number of not so elementary stuff in a very logical way... Cool
"We use flexbox because I like flex"
This man's arguments made me sweat respectfully
🤜🤜🤜🤙🤙🤙🤙👏👏👏👏thanks for good work in making stopwatch but your not only a teacher but also your a developer in codes thanks bro.
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.
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 🇮🇳 🫡🫡🤜🤛🫂
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.
😭😭 bruh I was just following your old JS stopwatch tutorial omg
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?
it doesnt work... and the worst part is i dont know why..
Let's try making Rock Paper Scissors game in JS 😏
Already working on it
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?
thank you
At the end, before dollar $ign use backtick `
Mine didn't work, please what I'm I going to do?
double click start and you encounter a bug, cant stop it and reseting it gives garbage value in timer how do i fix it?
Can you make a JS chatting app please ?
stop and reset buttons aren’t working tho I did everything correct, any solutions?
goated
Bro my timer ain't timing😐
any solutions please I'd really appreciate🙃🙂
I did not understood java script 😢,please help me
I build it upon and I have icons and hiding buttons
Why let timer = null;?
$symbol not working
You have to use back ticks `` to use string literals($={}) to actually work
I don’t understand the math in the JS code
can
sorry to say but i didn't understand
Us
Small change in js start fn code
If( !isRunning ) {
// Rest of code
isRunning= true
}
Hello Bro 🙂