Colorful Stopwatch
00:00:00
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f06, #48c6ef);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.stopwatch {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
text-align: center;
width: 300px;
}
.time {
font-size: 48px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
.buttons {
display: flex;
justify-content: space-around;
}
button {
background-color: #00aaff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
button:hover:not(:disabled) {
background-color: #005f73;
}
/* Start, Stop, and Reset Buttons */
.btn-start {
background-color: #4caf50;
}
.btn-stop {
background-color: #ff5722;
}
.btn-reset {
background-color: #9e9e9e;
}
// JavaScript code for Stopwatch functionality
let timer;
let isRunning = false;
let seconds = 0;
let minutes = 0;
let hours = 0;
const timeDisplay = document.getElementById('time');
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const resetButton = document.getElementById('reset');
function updateDisplay() {
let h = hours < 10 ? '0' + hours : hours;
let m = minutes < 10 ? '0' + minutes : minutes;
let s = seconds < 10 ? '0' + seconds : seconds;
timeDisplay.textContent = `${h}:${m}:${s}`;
}
function startStopwatch() {
timer = setInterval(function() {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
updateDisplay();
}, 1000);
}
function stopStopwatch() {
clearInterval(timer);
}
function resetStopwatch() {
clearInterval(timer);
seconds = 0;
minutes = 0;
hours = 0;
updateDisplay();
}
startButton.addEventListener('click', function() {
isRunning = true;
startButton.disabled = true;
stopButton.disabled = false;
resetButton.disabled = false;
startStopwatch();
});
stopButton.addEventListener('click', function() {
isRunning = false;
startButton.disabled = false;
stopButton.disabled = true;
resetButton.disabled = false;
stopStopwatch();
});
resetButton.addEventListener('click', function() {
isRunning = false;
startButton.disabled = false;
stopButton.disabled = true;
resetButton.disabled = true;
resetStopwatch();
});
