Introduction of the Project
Count down to success with your own custom stopwatch! Building a stopwatch using JavaScript is a fun and easy project that will put your coding skills to the test. With just a few lines of code, you’ll have a functional timer that you can use to track time, set reminders, and more. Whether you’re a beginner or an experienced developer, this javascript coding tutorial will walk you through the steps to create your own stopwatch and give you the tools to take your coding skills to the next level.
Our stopwatch will have 3 functions Start, Stop & Reset, and to make the user experience more interesting; we will be implementing HTML and CSS to develop the GUI of this project.
Objectives
1. To understand the basic concepts of JavaScript, including variables, functions, and event listeners.
2. To learn how to create a timer that counts up or counts down using JavaScript.
3. To develop an understanding of how to use HTML and CSS to create a user interface for the stopwatch.
4. To implement the ability to start, stop, and reset the stopwatch.
5. To understand how to use JavaScript to track time accurately and display it in a user-friendly format.
6. To learn how to use debugging tools and error-handling techniques to troubleshoot and fix issues with the stopwatch.
7. To understand how to use JavaScript to create interactive web applications.
Requirements
1. Visual Studio Code or any other text editor, such as Sublime Text, installed.
2. Basic knowledge of HTML, CSS, and JavaScript.
3. An understanding of how to create and modify HTML and CSS files. Also how to use CSS to create a visually appealing user interface for the stopwatch.
4. Knowledge of how to define variables, write functions, and use event listeners in JavaScript.
5. Familiarity with JavaScript’s Date object and the setInterval() method for tracking time.
6. Ability to implement basic user interaction, such as starting, stopping, and resetting the stopwatch.
Source Code
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Stop Watch</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <span id="minutes">00</span> <span>:</span> <span id="seconds">00</span> <span>:</span> <span id="miliseconds">00</span> <div class="buttons"> <button onclick="start()">START</button> <button onclick="stop()">STOP</button> <button onclick="reset()">RESET</button> </div> </div> <script src="stopwatch.js"></script> </body> </html>
CSS Code
body{
margin: 0%;
padding: 0%;
background: black;
}
.container{
font-family: "Arial", Helvetica, sans-serif;
padding: 30px;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
font-size: 150px;
white-space: nowrap;
}
.buttons{
font-family: "Arial", Helvetica, sans-serif;
padding: 60px;
color: #fff;
font-weight: bold;
position: absolute;
top: 100%;
right: 50%;
transform: translate(50%, -50%);
font-size: 150px;
white-space: nowrap;
}
body {
margin: 0;
padding: 0;
background-color: #000;
}JAVASCRIPT Code
let milisec=1;
let sec=1;
let min = 1;
let a;
function start(){
a = setInterval(startWatch,10);
}
function startWatch(){
milisec+=1;
if(milisec<10) document.getElementById('miliseconds').innerHTML = '0'+milisec;
else document.getElementById('miliseconds').innerHTML=milisec;
if(milisec==100){
milisec=0;
if(milisec<10) document.getElementById('miliseconds').innerHTML = '0'+milisec;
else document.getElementById('miliseconds').innerHTML=milisec;
if(sec<10) document.getElementById('seconds').innerHTML = '0'+sec;
else document.getElementById('seconds').innerHTML=sec;
sec+=1;
if(sec==61){
sec=0;
if(sec<10) document.getElementById('seconds').innerHTML = '0'+sec;
else document.getElementById('seconds').innerHTML=sec;
if(sec<10) document.getElementById('minutes').innerHTML = '0'+min;
else document.getElementById('minutes').innerHTML=min;
min+=1;
}
}
}
function stop(){
clearInterval(a);
}
function reset() {
milisec=0;
sec=0;
min = 0;
document.getElementById('miliseconds').innerHTML = '0'+milisec;
document.getElementById('seconds').innerHTML = '0'+sec;
document.getElementById('minutes').innerHTML = '0'+min;
clearInterval(a);
}Explanation of the Code
1. We have used multiple <span> tags to denote minutes, seconds, and milliseconds.
2. The user interface contains 3 buttons to start, stop, and reset the watch, respectively.
3. And the CSS file is meant to style the HTML where the container is provided with margins and colors to enhance the user experience.
Moving to starting the timer process we have applied the following:
1. We have used the method ‘setInterval’, which calls the ‘startWatch’ function every 10 milliseconds. This method is responsible for incrementing the milliseconds till it reaches 100, then increasing minutes till it reaches 60, and repeating the process.
2. After that we used the method stop that calls the inbuilt ‘clearInterval’ function that stops the timer.
3. Finally there is a Reset button that resets the milliseconds, seconds & minutes.
Output
Main Interface
Points To Remember
We have successfully demonstrated how to build a stopwatch using Javascript. It has the basic buttons that are present on any stopwatch, i.e., to start, to stop, and to reset the watch. It is a very easy way to operate this stopwatch and can be utilized for plenty of purposes without having the actual physical stopwatch.
Here are some key points to remember when building a stopwatch using JavaScript:
- Start by creating the HTML structure for the stopwatch, including the display and control buttons.
- Use CSS to style the user interface and make it visually appealing.
- Define variables in JavaScript to store the time and status of the stopwatch.
- Use the Date object and setInterval() method to track time and update the display.
- Write functions to start, stop, reset, and lap the stopwatch, and use event listeners to trigger these functions in response to user input.
- Make sure to handle errors and unexpected behaviors by using debugging tools and error-handling techniques.
- Test the stopwatch thoroughly to ensure it works as expected and make any necessary modifications.
- Consider adding additional features, such as the ability to save laps or set alarms, to enhance the functionality of the stopwatch.
- Use best practices in coding, such as commenting and organizing code, to make the stopwatch easy to maintain and update.
- Use version control, such as Git, to track changes to the code and collaborate with other developers if needed.
Cisco Ramon is an American software engineer who has experience in several popular and commercially successful programming languages and development tools. He has been writing content since last 5 years. He is a Senior Manager at Rude Labs Pvt. Ltd.
0 Comments