Course Name : Web Programming Course Code : BCSE203E
Name : Tanay Saxena Registration No : 22BDS0049
Digital Assignment – 2
Q1 Problem Statement for the Stopwatch Project
Title: Stopwatch with Millisecond Precision
Problem Statement:
In today's fast-paced digital environment, users require an accurate and visually appealing stopwatch for
various time-tracking activities, such as sports, study sessions, presentations, and productivity tracking.
Traditional stopwatch applications often lack an engaging user interface and fail to provide a seamless user
experience.
This project aims to develop a colorful, interactive, and user-friendly stopwatch that includes Start,
Stop, and Reset functionalities with millisecond precision. The stopwatch will feature a modern UI with
smooth transitions and a gradient-themed background to enhance user engagement. The goal is to create a
lightweight and responsive web-based stopwatch using HTML, CSS, and JavaScript that performs
efficiently across different devices and browsers.
Objectives:
1. Develop a functional stopwatch with start, stop, and reset capabilities.
2. Display time in minutes, seconds, and milliseconds for precision timing.
3. Implement a colorful and visually appealing UI using CSS animations and gradients.
4. Ensure smooth and accurate performance using JavaScript’s setInterval() for time tracking.
5. Optimize for responsiveness and cross-browser compatibility.
Expected Outcome:
A highly accurate, colorful, and user-friendly stopwatch that enhances the time-tracking experience with
an elegant UI and seamless functionality.
Code :
1) Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="stopwatch">
<h1>⏱ Stopwatch</h1>
<div class="timer">
<span id="minutes">00</span>:<span id="seconds">00</span>:<span
id="milliseconds">00</span>
</div>
<div class="buttons">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2) Style.css
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #eb3838, #132b9fde, #9edb03);
margin: 0;
}
.stopwatch {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 300px;
}
h1 {
color: #ff3b6f;
font-size: 24px;
}
.timer {
font-size: 40px;
font-weight: bold;
color: #ff3b6f;
margin: 15px 0;
}
.buttons button {
border: none;
padding: 10px 15px;
margin: 5px;
font-size: 16px;
font-weight: bold;
color: white;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
#start {
background: #00c851;
}
#start:hover {
background: #007e33;
}
#stop {
background: #ff4444;
}
#stop:hover {
background: #cc0000;
}
#reset {
background: #ffbb33;
}
#reset:hover {
background: #ff8800;
}
3) Script.js
let minutes = 0, seconds = 0, milliseconds = 0;
let timer;
let isRunning = false;
const minuteDisplay = document.getElementById("minutes");
const secondDisplay = document.getElementById("seconds");
const millisecondDisplay = document.getElementById("milliseconds");
document.getElementById("start").addEventListener("click", function() {
if (!isRunning) {
isRunning = true;
timer = setInterval(updateTimer, 10);
}
});
document.getElementById("stop").addEventListener("click", function() {
isRunning = false;
clearInterval(timer);
});
document.getElementById("reset").addEventListener("click", function() {
isRunning = false;
clearInterval(timer);
minutes = seconds = milliseconds = 0;
updateDisplay();
});
function updateTimer() {
milliseconds += 10;
if (milliseconds === 1000) {
milliseconds = 0;
seconds++;
}
if (seconds === 60) {
seconds = 0;
minutes++;
}
updateDisplay();
}
function updateDisplay() {
minuteDisplay.innerText = String(minutes).padStart(2, '0');
secondDisplay.innerText = String(seconds).padStart(2, '0');
millisecondDisplay.innerText = String(milliseconds / 10).padStart(2, '0');
}
Output:
