FinlayDaG33k/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Button</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="http://bootswatch.com/united/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<button id="start">start</button>
		<button id="stop">stop</button>
		<button id="reset">reset</button>
		<br />
		<span id="timer"></span>
		<div class="progress">
		  <div class="progress-bar progress-bar-success" id="progress" style="width: 0%"></div>
		</div>
	</body>
</html>

## main.js
var initial = 100000;
var count = initial;
var counter; //10 will  run it every 100th of a second
var initialMillis;
var percent = 0; // The percentage

function timer() {
    if (count <= 0) {
        clearInterval(counter);
        return;
    }
    var current = Date.now();
    count = count - (current - initialMillis);

    initialMillis = current;
    displayCount(count);

}

function displayCount(count) {
    var res = count / 1000;
	percent = ((initial / res) * 100) - 100000;
    document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs";
	document.getElementById("progress").style.width = percent+"%";
	document.getElementById("progress").innerHTML = percent+"%";
}

$(function(){
	$('#start').on('click', function () {
	    clearInterval(counter);
	    initialMillis = Date.now();
	    counter = setInterval(timer, 1);
	});

	$('#stop').on('click', function () {
	    clearInterval(counter);
	});

	$('#reset').on('click', function () {
	    clearInterval(counter);
	    count = initial;
	    displayCount(count);
	});

	displayCount(initial,percent);
});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Button</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="http://bootswatch.com/united/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<button id="start">start</button>
	<button id="stop">stop</button>
	<button id="reset">reset</button>
	<br />
	<span id="timer"></span>
	<div class="progress">
	<div class="progress-bar progress-bar-success" id="progress" style="width: 0%"></div>
	</div>
	</body>
	</html>
	var initial = 100000;
	var count = initial;
	var counter; //10 will run it every 100th of a second
	var initialMillis;
	var percent = 0; // The percentage

	function timer() {
	if (count <= 0) {
	clearInterval(counter);
	return;
	}
	var current = Date.now();
	count = count - (current - initialMillis);

	initialMillis = current;
	displayCount(count);

	}

	function displayCount(count) {
	var res = count / 1000;
	percent = ((initial / res) * 100) - 100000;
	document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs";
	document.getElementById("progress").style.width = percent+"%";
	document.getElementById("progress").innerHTML = percent+"%";
	}

	$(function(){
	$('#start').on('click', function () {
	clearInterval(counter);
	initialMillis = Date.now();
	counter = setInterval(timer, 1);
	});

	$('#stop').on('click', function () {
	clearInterval(counter);
	});

	$('#reset').on('click', function () {
	clearInterval(counter);
	count = initial;
	displayCount(count);
	});

	displayCount(initial,percent);
	});