Follow us on instagram: https://www.instagram.com/webstreet_code/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
color:white;
font-family: Arial, Helvetica, sans-serif;
flex-direction: column;
}
.clock{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.clock-face {
width: 300px;
height: 300px;
background-color: #282c34;
border-radius: 50%;
position: relative;
box-shadow: 0 0 40px 1px rgb(56, 56, 62);
}
.hand {
width: 36%;
height: 4px;
background: #58f5db;
position: absolute;
top: 50%;
left: 11%;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: ease-in-out;
transition: all 0.05s;
}
.second-hand{
background-color: blue;
z-index:1;
}
.circle {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: white;
position: absolute;
top: 48%;
left: 44%;
z-index: 0.8;
}
.inner-circle{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: blue;
margin:auto;
margin-top:5px
}
/* Clock markings */
.markings {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(-50%); */
}
.markings div {
position: absolute;
font-size: 16px;
transform: translate(-50%, -50%);
}
.tick{
width: 2px;
height: 10px;
background-color:white;
position: absolute;
transform-origin: center;
}
.digital {
font-size: 24px;
position: absolute;
top: 20%;
width: 100%;
text-align: center;
}
.buttons{
display: flex;
gap: 20px;
}
i{
font-size: 40px;
cursor: pointer;
}
.fa-play{
background-color: blue;
padding: 10px;
border-radius: 50%;
}
.fa-stop{
color: red;
font-size:45px
}
.fa-rotate-right{
margin: 8px;
margin-left: 35px;
}
</style>
</head>
<body>
<div class="clock">
<div class="clock-face">
<!-- Clock hands -->
<div class="hand second-hand"></div>
<div class="circle">
<div class="inner-circle"></div>
</div>
<!-- Digital Stopwatch Display -->
<div class="digital" id="stopwatch">00:<span style="color:blue;">
:00:00
</span>
</div>
<!-- Clock Markings -->
<div class="markings">
<div style="top: 12%; font-size: small;">60</div>
<div style="right: 7%; top:50%; font-size: small;">15</div>
<div style="bottom: 7% ;left: 50%; font-size: small;">30</div>
<div style="left: 14%;top:51%; font-size: small;">45</div>
<!-- Tick Marks -->
<div style="padding: -25px;">
<div class="tick" style="transform: rotate(-4deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(30deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(60deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(90deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(120deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(150deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(180deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(210deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(240deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(270deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(300deg) translateY(-130px);"></div>
<div class="tick" style="transform: rotate(330deg) translateY(-130px);"></div>
</div>
</div>
</div>
</div>
<!-- Stopwatch Control Buttons -->
<div class="buttons">
<!-- <button id="startStop">Start</button> -->
<div id="startStop">
<i class="fa-solid fa-play" ></i>
</div>
<div id="reset">
<i class="fa-solid fa-rotate-right"></i>
</div>
</div>
</div>
</div>
<script>
const secondHand = document.querySelector('.second-hand');
const stopwatchDisplay = document.getElementById('stopwatch');
const startStopBtn = document.getElementById('startStop');
const resetBtn = document.getElementById('reset');
let stopwatchInterval;
let hundredths = 0, seconds = 0, minutes = 0;
let isRunning = false;
function updateStopwatch(){
hundredths++;
if(hundredths===100){
hundredths=0;
seconds++;
}
if(seconds==60){
seconds=0;
minutes++;
}
stopwatchDisplay.textContent =
`${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(hundredths).padStart(2, '0')}`;
// Move the second hand
const secondsDegrees = ((seconds + hundredths / 100) / 60) * 360 +90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
}
startStopBtn.addEventListener('click', () => {
if (isRunning) {
clearInterval(stopwatchInterval);
startStopBtn.innerHTML = `<i class="fa-solid fa-play" ></i>`;
} else {
stopwatchInterval = setInterval(updateStopwatch, 10); // Update every 10ms for hundredths
startStopBtn.innerHTML = `<i class="fa-solid fa-stop"></i>`;
}
isRunning = !isRunning;
});
// Reset the stopwatch
resetBtn.addEventListener('click', () => {
clearInterval(stopwatchInterval);
hundredths = seconds = minutes = 0;
stopwatchDisplay.textContent = '00:00:00';
startStopBtn.innerHTML = `<i class="fa-solid fa-play" ></i>`;
isRunning = false;
secondHand.style.transform = 'rotate(90deg)'; // Reset the second hand position
});
</script>
</body>
</html>
Top comments (0)