Scribd
Upload
199 views8 pages

StopWatch App Source Code

This document contains the code for a stopwatch application including the HTML, CSS, and JavaScript files. The HTML defines the user interface with sections for the timer display, buttons, and laps. The CSS styles the interface and buttons. The JavaScript controls the timer functionality, handling start, stop, resume and lap actions by updating the display and storing laps on button clicks. Timers are stored in centiseconds and converted to minutes, seconds and centiseconds for display.

Uploaded by

Sasi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
199 views8 pages

StopWatch App Source Code

This document contains the code for a stopwatch application including the HTML, CSS, and JavaScript files. The HTML defines the user interface with sections for the timer display, buttons, and laps. The CSS styles the interface and buttons. The JavaScript controls the timer functionality, handling start, stop, resume and lap actions by updating the display and storing laps on button clicks. Timers are stored in centiseconds and converted to minutes, seconds and centiseconds for display.

Uploaded by

Sasi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

<!--index.

html-->
<!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">
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these tags
-->
<title>Stopwatch App</title>

<!-- Bootstrap -->


<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="styling.css" rel="stylesheet">
<link
href='https://fonts.googleapis.com/css?family=Vollkorn'
rel='stylesheet' type='text/css'>

</head>
<body>

<!--Title-->
<div class="container-fluid">
<div id="header">Stopwatch</div>
<!--Lap Time-->
<div id="lap"><span id="lapminute">00</span>:<span
id="lapsecond">00</span>:<span
id="lapcentisecond">00</span></div>

<!--Time-->
<div id="time"><span id="timeminute">00</span>:<span
id="timesecond">00</span>:<span
id="timecentisecond">00</span></div>

<!--Controls-->
<div id="controlsContainer" class="row">
<div class="col-xs-2 col-xs-offset-4">
<div id="startButton" class="control">
Start
</div>
<div id="stopButton" class="control">
Stop
</div>
<div id="resumeButton" class="control">
Resume
</div>
</div>
<div class="col-xs-2">
<div id="lapButton" class="control">
Lap
</div>
<div id="resetButton" class="control">
Reset
</div>
</div>
</div>

<!--Laps-->
<div id="laps"></div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript


plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/j
query.min.js"></script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="stopwatch.js"></script>
</body>
</html>

/*styling.css*/
body {
background: url(images/tree.jpg) center center fixed;
background-size: cover;
color: #fff;
}

/*title*/
#header{
text-align: center;
font-size: 7vw;
}

/*Lap*/
#lap{
text-align: right;
font-size: 4vw;
}

/*Time*/
#time{
text-align: center;
font-size: 10vw;
}

/*Buttons*/
#controlsContainer{
margin-bottom: 100px;
}
.control{
color: white;
background-color: #d7A04e;
height: 10vw;
width: 10vw;
border-radius: 100%;
text-align: center;
padding: 20% 0;
font-size: 2.5vw;
cursor: pointer;
}

.control:active{
background-color: #fff;
color: #d7A04e;
}

/*laps*/
#laps{
max-height: 270px;
overflow-y: scroll;
}

.lap{
height: 50px;
border-bottom: 1px solid white;
margin: 15px;
}

.laptimetitle{
font-size: 1.5em;
float: left;
}

.laptime{
font-size: 2em;
float: right;
}

//stopwatch.js
$(function(){
//variables
var mode = 0;//App mode
var timeCounter = 0;//time counter
var lapCounter = 0;//lap counter
var action;//variable for setInterval
var lapNumber = 0;//Number of Laps

//minutes,seconds,centiseconds for time and lap


var timeMinutes, timeSeconds, timeCentiseconds,
lapMinutes, lapSeconds, lapCentiseconds;

//On App load show start and lap buttons


hideshowButtons("#startButton","#lapButton");
//click on startButton
$("#startButton").click(function(){
//mode on
mode = 1;
//show stop and lap buttons
hideshowButtons("#stopButton","#lapButton");
//start counter
startAction();
});

//click on stopButton
$("#stopButton").click(function(){
//show resume and reset buttons
hideshowButtons("#resumeButton","#resetButton");
//stop counter
clearInterval(action);
});

//click on resumeButton
$("#resumeButton").click(function(){
//show stop and lap buttons
hideshowButtons("#stopButton","#lapButton");
//start counter
startAction();
});

//click on resetButton
$("#resetButton").click(function(){
//reload the page
location.reload();
});

//click on lapButton
$("#lapButton").click(function(){
//if mode is ON
if(mode){
//stop action
clearInterval(action);
//resetLap and print lap details
lapCounter = 0;
addLap();
//start action
startAction();
}
});

//functions
//hideshowButtons function shows two buttons
function hideshowButtons(x,y){
$(".control").hide();
$(x).show();
$(y).show();
}

//start the counter


function startAction(){
action = setInterval(function(){
timeCounter++;
if(timeCounter == 100*60*100){
timeCounter = 0;
}
lapCounter++;
if(lapCounter == 100*60*100){
lapCounter = 0;
}
updateTime();
},10);
}
//updateTime: converts counters to min,sec,centisec
function updateTime(){
//1min=60*100centiseconds=6000centiseconds
timeMinutes = Math.floor(timeCounter/6000);
//1sec=100centiseconds
timeSeconds = Math.floor((timeCounter%6000)/100);
timeCentiseconds = (timeCounter%6000)%100;
$("#timeminute").text(format(timeMinutes));
$("#timesecond").text(format(timeSeconds));

$("#timecentisecond").text(format(timeCentiseconds));

//1min=60*100centiseconds=6000centiseconds
lapMinutes = Math.floor(lapCounter/6000);
//1sec=100centiseconds
lapSeconds = Math.floor((lapCounter%6000)/100);
lapCentiseconds = (lapCounter%6000)%100;
$("#lapminute").text(format(lapMinutes));
$("#lapsecond").text(format(lapSeconds));

$("#lapcentisecond").text(format(lapCentiseconds));
}

//format numbers
function format(number){
if(number<10){
return '0'+number;
}else{
return number;
}
}

//addLap function: print lap details inside the lap


box
function addLap(){
lapNumber++;
var myLapDetails =
'<div class="lap">'+
'<div class="laptimetitle">'+
'Lap'+ lapNumber +
'</div>'+
'<div class="laptime">'+
'<span>'+ format(lapMinutes)
+'</span>'+
':<span>'+ format(lapSeconds)
+'</span>'+
':<span>'+ format(lapCentiseconds)
+'</span>'+
'</div>'+
'</div>';
$(myLapDetails).prependTo("#laps");
}
});

You might also like