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 = [Link]();
const minutes = [Link]();
const seconds = [Link]();
const timeString = `${[Link]().padStart(2, '0')}:${[Link]().padStart(2,
'0')}:${[Link]().padStart(2, '0')}`;
[Link]('clock').textContent = `Current Time: ${timeString}`;
}
setInterval(displayTime, 1000);
displayTime(); // Initial display
// Stopwatch
let stopwatchInterval;
let elapsedTime = 0;
let running = false;
function updateStopwatch() {
const hours = [Link](elapsedTime / 3600);
const minutes = [Link]((elapsedTime % 3600) / 60);
const seconds = elapsedTime % 60;
const timeString = `${[Link]().padStart(2, '0')}:${[Link]().padStart(2,
'0')}:${[Link]().padStart(2, '0')}`;
[Link]('stopwatch').textContent = timeString;
}
function startStopwatch() {
if (!running) {
running = true;
stopwatchInterval = setInterval(() => {
elapsedTime++;
updateStopwatch();
}, 1000);
[Link]('start').disabled = true;
[Link]('pause').disabled = false;
[Link]('reset').disabled = false;
}
}
function pauseStopwatch() {
if (running) {
running = false;
clearInterval(stopwatchInterval);
[Link]('start').disabled = false;
[Link]('pause').disabled = true;
}
}
function resetStopwatch() {
running = false;
clearInterval(stopwatchInterval);
elapsedTime = 0;
updateStopwatch();
[Link]('start').disabled = false;
[Link]('pause').disabled = true;
[Link]('reset').disabled = true;
}
[Link]('start').addEventListener('click', startStopwatch);
[Link]('pause').addEventListener('click', pauseStopwatch);
[Link]('reset').addEventListener('click', resetStopwatch);
// Initialize
updateStopwatch();
</script>
</body>
</html>