Features:
- Real-time Digital Clock
- Functional Stopwatch with Start, Stop, Reset
- Simple and responsive UI
Folder Structure
clock-stopwatch/
├── index.html
├── style.css
└── script.js
HTML: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock & Stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Digital Clock</h1>
<div id="clock" class="display">00:00:00</div>
<h1>Stopwatch</h1>
<div id="stopwatch" class="display">00:00:00</div>
<div class="buttons">
<button onclick="startStopwatch()">Start</button>
<button onclick="stopStopwatch()">Stop</button>
<button onclick="resetStopwatch()">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: style.css
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #f0f4f7;
display: flex;
justify-content: center;
padding: 40px;
}
.container {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 10px;
}
.display {
font-size: 2.5rem;
background: #222;
color: #0f0;
padding: 10px 30px;
border-radius: 10px;
margin: 15px auto;
display: inline-block;
font-family: 'Courier New', monospace;
}
.buttons button {
margin: 10px;
padding: 10px 20px;
font-size: 1rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
.buttons button:hover {
background-color: #0056b3;
}
JavaScript: script.js
// DIGITAL CLOCK
function updateClock() {
const now = new Date();
const time = now.toLocaleTimeString('en-US', { hour12: false });
document.getElementById('clock').textContent = time;
}
setInterval(updateClock, 1000);
updateClock(); // initialize
// STOPWATCH
let stopwatchInterval;
let elapsedSeconds = 0;
let running = false;
function formatTime(seconds) {
const hrs = String(Math.floor(seconds / 3600)).padStart(2, '0');
const mins = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
const secs = String(seconds % 60).padStart(2, '0');
return `${hrs}:${mins}:${secs}`;
}
function updateStopwatch() {
document.getElementById('stopwatch').textContent = formatTime(elapsedSeconds);
}
function startStopwatch() {
if (!running) {
running = true;
stopwatchInterval = setInterval(() => {
elapsedSeconds++;
updateStopwatch();
}, 1000);
}
}
function stopStopwatch() {
running = false;
clearInterval(stopwatchInterval);
}
function resetStopwatch() {
stopStopwatch();
elapsedSeconds = 0;
updateStopwatch();
}
// Initialize display
updateStopwatch();