The Multiple Stopwatches on One Page in Javascript (for Intermediates)

The Multiple Stopwatches on One Page in Javascript ( Part3. JavaScript for Intermediates )

The Multiple Stopwatches on One Page in Javascript ( Part3. JavaScript for Intermediates )


 

 

Introduction & Demo

This is the intermediate version of “The Multiple Stopwatches on One Page in Javascript (for Beginners)” video.

I introduce more efficient and organized code using prototype object.

Using the prototype object was very difficult for me until I created a simple countdown timer.
So, I think creating stopwatch is a good way to understand the prototype object.

Hope you’ll find something new about the prototype object from this video 🙂

Demo : Link

 
 

Sample Code

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Stopwatch</title>
	<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
	<style>
		* {
			font-family: 'Inconsolata', monospace;
			font-weight: 400;
		}
		.container {
			width: 600px;
			margin: 100px auto;
		}
		h1 {
			text-align: center;
		}
		table {
			width: 100%;
			text-align: center;
		}
		th {
			font-weight: 700;
		}
		td {
			padding: 30px;
		}		
		#table01 input[type="button"] {
			width: 120px;
			height: 40px;
			background-color: mediumaquamarine;
			margin-top: 30px;
			font-size: 18px;
			font-weight: 700;
		}
		#table02 input[type="button"] , #resetAllBtn {
			width: 120px;
			height: 40px;
			background-color: lightgrey;
			font-size: 18px;
			font-weight: 700;
		}
	</style>
</head>
<body>
<div class="container">
	<h1>STOPWATCH</h1>
	<br><br>
	<table border="1" cellspacing="0" id="table01">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		<tr>
			<td>
				<h2 id="timerLabel1">00:00.00</h2>
				<br>
				<input type="button" value="START" id="start1">
				<input type="button" value="RESET" id="reset1">
			</td>
			<td>
				<h2 id="timerLabel2">00:00.00</h2>
				<br>
				<input type="button" value="START" id="start2">
				<input type="button" value="RESET" id="reset2">
			</td>
			<td>
				<h2 id="timerLabel3">00:00.00</h2>
				<br>
				<input type="button" value="START" id="start3">
				<input type="button" value="RESET" id="reset3">
			</td>
		</tr>
	</table>
	<br><br>
	<table id="table02">
		<tr>
			<td><button onclick="location.href='index.html'" id="resetAllBtn">RESET</button></td>
			<td><input type="button" value="START" id="moveAllBtn"></td>
		</tr>
	</table>
	
	<script>
		
		function init() {
			
			var stopwatch1 = new Timer("timerLabel1", "start1");
			document.getElementById("start1").onclick = function(){
				stopwatch1.start();
			}
			document.getElementById("reset1").onclick = function(){
				stopwatch1.reset();
			}
			
			var stopwatch2 = new Timer("timerLabel2", "start2");
			document.getElementById("start2").onclick = function(){
				stopwatch2.start();
			}
			document.getElementById("reset2").onclick = function(){
				stopwatch2.reset();
			}
			
			var stopwatch3 = new Timer("timerLabel3", "start3");
			document.getElementById("start3").onclick = function(){
				stopwatch3.start();
			}
			document.getElementById("reset3").onclick = function(){
				stopwatch3.reset();
			}
			
			
			document.getElementById("moveAllBtn").onclick = function(){
				
				if (document.getElementById("moveAllBtn").value == 'START') {
					stopwatch1.status = 0;
					stopwatch2.status = 0;
					stopwatch3.status = 0;
					
				} else {
					stopwatch1.status = 1;
					stopwatch2.status = 1;
					stopwatch3.status = 1;
				}
				
				stopwatch1.start();
				stopwatch2.start();
				stopwatch3.start();
				
			}		
			
		}
		
		
		function Timer(timerLabelId, startBtnId) {
			this.status = 0;
			this.time = 0;
			this.timerLabel = document.getElementById(timerLabelId);
			this.startBtn = document.getElementById(startBtnId);
		}
		
		Timer.prototype.start = function() {
			
			if (this.status == 0) {
				this.status = 1;
				this.startBtn.value = "STOP";
				this.count();
				
			} else {
				this.status = 0;
				this.startBtn.value = "START";
 
			}			
		}
		
		Timer.prototype.count = function() {
			
			if (this.status == 1) {
				var that = this;
				setTimeout(function(){
					that.time++;
					that.timerLabel.innerHTML = getTime(that.time);
					that.count();
				}, 10);
				document.getElementById("moveAllBtn").value = 'STOP';
				
			} else {
				document.getElementById("moveAllBtn").value = 'START';
			}
		}
		
		Timer.prototype.reset = function() {
			this.status = 0;
			this.time = 0;
			this.startBtn.value = "START";
			this.timerLabel.innerHTML = "00:00.00";
		}
		
		
		function getTime(time) {
			
			var min = Math.floor(time/100/60);
			var sec = Math.floor(time/100);
			var mSec = time%100;
			
			if (min < 10) {
				min = "0" + min;
			}
			if (sec >= 60) {
				sec = sec % 60;
			}
			if (sec < 10) {
				sec = "0" + sec;
			}
			
			return min + ":" + sec + "." + mSec;
			
		}
		
		init();
 
	</script>
</div>
</body>
</html>

 

About Sara

Working as a freelance programmer in Japan. I'll try to make coding as simple as possible. Hope you enjoy coding 🙂