stopwatch design portfolio
HTML CODE:--
html code is co-written by me with the help of given
in this code we use 2 Type of dive in which
1. div for timerdisplay
2. div for buttons
<!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">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div class="stopwatch">
<div class="timerDisplay">00 : 00 : 00</div>
</div>
<div class="buttons">
<button id="stopBtn" class="btn" style="--clr:red;">Stop</button>
<button id="startBtn" class="btn" style="--clr:green">Start</button>
<button id="resetBtn" class="btn" style="--clr:blue">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE:--
all css written according to html code minimum css use in this code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
background-color: rgba(0, 0, 0, 0.7);
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
.stopwatch{
background-color: rgba(0, 0, 0, 0.9);
padding: 20px 24px;
border-radius: 10px;
}
.timerDisplay{
font-size: 100px;
font-weight: 600;
}
.buttons{
margin-top: 20px;
}
.btn{
font-size: 20px;
background: none;
border: none;
color: #fff;
background-color: var(--clr);
padding: 12px 24px;
margin-inline: 12px;
border-radius: 8px;
cursor: pointer;
}
JAVASCRIPT CODE:--
simple javascript use for this working of stopwatch
let timerDisplay = document.querySelector('.timerDisplay');
let stopBtn = document.getElementById('stopBtn');
let startBtn = document.getElementById('startBtn');
let resetBtn = document.getElementById('resetBtn');
let msec = 0;
let secs = 0;
let mins = 0;
let timerId = null;
startBtn.addEventListener('click', function(){
if(timerId !== null){
clearInterval(timerId);
}
timerId = setInterval(startTimer, 10);
});
stopBtn.addEventListener('click', function(){
clearInterval(timerId);
});
resetBtn.addEventListener('click', function(){
clearInterval(timerId);
timerDisplay.innerHTML = `00 : 00 : 00`;
msec = secs = mins = 0;
});
function startTimer(){
msec++;
if(msec == 100){
msec = 0;
secs++;
if(secs == 60){
secs = 0;
mins++;
}
}
let msecString = msec < 10 ? `0${msec}` : msec;
let secsString = secs < 10 ? `0${secs}` : secs;
let minsString = mins < 10 ? `0${mins}` : mins;
timerDisplay.innerHTML = `${minsString} : ${secsString} : ${msecString}`;
}
BY:-- RISHAV RAUNAK
Comments
Post a Comment