CODE
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock and Stopwatch</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #d9a7c7, #fffcdc);
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
#clock, #stopwatch {
font-size: 28px;
margin: 20px;
text-align: center;
background: rgba(255, 255, 255, 0.7);
padding: 15px 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#controls {
display: flex;
gap: 15px;
margin-top: 20px;
}
button {
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
border: none;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
button:hover {
background: linear-gradient(135deg, #2575fc, #6a11cb);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
button:disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
}
</style>
</head>
<body>
<div id="clock"></div>
<div id="stopwatch">00:00:00</div>
<div id="controls">
<button id="start">Start</button>
<button id="pause" disabled>Pause</button>
<button id="reset" disabled>Reset</button>
</div>
<script>
// Digital Clock
function displayTime() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2,
'0')}:${seconds.toString().padStart(2, '0')}`;
document.getElementById('clock').textContent = `Current Time: ${timeString}`;
}
setInterval(displayTime, 1000);
displayTime(); // Initial display
// Stopwatch
let stopwatchInterval;
let elapsedTime = 0;
let running = false;
function updateStopwatch() {
const hours = Math.floor(elapsedTime / 3600);
const minutes = Math.floor((elapsedTime % 3600) / 60);
const seconds = elapsedTime % 60;
const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2,
'0')}:${seconds.toString().padStart(2, '0')}`;
document.getElementById('stopwatch').textContent = timeString;
}
function startStopwatch() {
if (!running) {
running = true;
stopwatchInterval = setInterval(() => {
elapsedTime++;
updateStopwatch();
}, 1000);
document.getElementById('start').disabled = true;
document.getElementById('pause').disabled = false;
document.getElementById('reset').disabled = false;
}
}
function pauseStopwatch() {
if (running) {
running = false;
clearInterval(stopwatchInterval);
document.getElementById('start').disabled = false;
document.getElementById('pause').disabled = true;
}
}
function resetStopwatch() {
running = false;
clearInterval(stopwatchInterval);
elapsedTime = 0;
updateStopwatch();
document.getElementById('start').disabled = false;
document.getElementById('pause').disabled = true;
document.getElementById('reset').disabled = true;
}
document.getElementById('start').addEventListener('click', startStopwatch);
document.getElementById('pause').addEventListener('click', pauseStopwatch);
document.getElementById('reset').addEventListener('click', resetStopwatch);
// Initialize
updateStopwatch();
</script>
</body>
</html>
