pacer/index.html at master · Fibiola/pacer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<head>
	<meta name="description" content="Simply calculate your running pace." />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="./css/custom.css" rel="stylesheet" />
	<link rel="icon" type="image/png" href="./img/favicon.ico">

	<title>Pacer. Simple.</title>
</head>
<body>

	<div class="container">

	<h1>Calculate your run time.</h1>

	<h2>Move the sliders to begin.</h2>

		<noscript><span style="color:red;"><strong>Ooops! The Pacer currently requires JavaScript. Please enable it under your browser's settings.</strong></noscript>

		<form oninput="calculateTime(pace.value, distance.value)">
			<label>Pace:</label>
		  	<div>
				<div id="slider1">
					<input type="range" id="pace" name="pace" min="120" max="720" step="1" value="360" onchange="updateSlider(this.value, this.id)" />
					<div class="result" id="pace-value">6.00</div> min/km
				</div>
			</div>

			<label>Distance:</label>
			<div>
				<div id="slider2">
					<input type="range" id="distance" name="distance" min="1000" max="42194.988" value="10000" step="1" onchange="updateSlider(this.value, this.id)" />
					<div class="result" id="distance-value">10.00</div> kilometers
				</div>
				<div id="distances">
					Or pick a race distance:
					<button type="button" id="km-5" value="5000" onclick="changeDistance(this.value)">5 K</button>
					<button type="button" id="km-10" value="10000" onclick="changeDistance(this.value)">10 K</button>
					<button type="button" id="km-15" value="15000" onclick="changeDistance(this.value)">15 K</button>
					<button type="button" id="km-16" value="16093.4" onclick="changeDistance(this.value)">10 miles</button>
					<button type="button" id="km-21" value="21097.494" onclick="changeDistance(this.value)">Half marathon</button>
					<button type="button" id="km-42" value="42194.988" onclick="changeDistance(this.value)">Marathon</button>
				</div>
			</div>
			<h3>
				<label>Your time: </label><span id="time-value">1h : 0m : 0s</span>
			</h3>
		</form>

		<div class="footnote">Note: Currently the Pacer works best in Safari and Chrome.</div>

	</div>
	<script src="./js/jquery-1.10.2.min.js"></script>

	<script>
	function secondsToHMS(seconds) {

		var numhours = Math.floor((seconds % 86400) / 3600);
		var numminutes = Math.floor(((seconds % 86400) % 3600) / 60);
		var numseconds = ((seconds % 86400) % 3600) % 60;

		return numhours + "h : " + numminutes + "m : " + Math.round(numseconds) + "s";

	};
	function secondsToMS(seconds) {
		var numminutes = Math.floor(((seconds % 86400) % 3600) / 60);
		var numseconds = ((seconds % 86400) % 3600) % 60;

		return numminutes + ":" + Math.round(numseconds);

	};

	function updateSlider(slideAmount, id) {
	if (id == "pace") {
		var pace = document.getElementById("pace-value");
		pace.innerHTML=secondsToMS(slideAmount);
	}
	else if (id == "distance") {
		var distance = document.getElementById("distance-value");
		distance.innerHTML=(slideAmount/1000).toFixed(2);
	}

	};

	function calculateTime(pace, distance) {
		var time = document.getElementById("time-value");
		time.innerHTML=secondsToHMS(pace*distance/1000);
	};

	function changeDistance(nvalue) {
		distance.value=nvalue;
		updateSlider(nvalue, 'distance');
		calculateTime(pace.value,nvalue);
	};

	</script>
</body>
</html>