zenxedo/index.html

## index.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <title>Power Zone Calculator</title>

    <style>

    	body { margin: 25px; }
	</style>

  </head>
  <body>


    <main class="container">
    	<div class="row">
    		<div class="col-sm-4">

    			<h1>Peloton FTP Power Zones Calculator</h1>

    			<p>This script will calculate your Peloton FTP Power Zones based on your 20 minute average output. Please see the following link for more information. <a href="https://blog.onepeloton.com/power-zone-rides-everything-need-know" target="_blank">https://blog.onepeloton.com/power-zone-rides-everything-need-know</a></p>

    			<p><a href="https://www.reddit.com/r/pelotoncycle/comments/7mxv79/peloton_ftp_power_zones_calculator/" target="_blank">Original Reddit Post</a></p>

    			<form id="power-zone-form">
				  <div class="form-group">
				    <label for="average-output">20 minute average output</label>
				    <input type="text" class="form-control" id="average-output" placeholder="Average output">
				  </div>

				  <button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>

			<div class="col-sm-8" id="result">
			</div>
		</div>
	</main>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

	<script src="./underscore.js"></script>

    <script type="text/javascript">

		$(document).ready(function() {

			function getPercentage(ftp, pct) {
				var value = ftp * (pct / 100);
				return Math.round(value); // * 100) / 100
			}

			$('#power-zone-form').submit(function(evt) {
				evt.preventDefault();

				var averageOutput = $('#average-output').val();

				if(_.isEmpty(averageOutput)) {
					alert('must provide average output.');
					return;
				}

				if(_.isString(averageOutput)) {
					averageOutput = parseInt(averageOutput);
				}

				if(!_.isNumber(averageOutput) || _.isNaN(averageOutput)) {
					alert('must provide average output as number.');
					return;
				}

				// # FTP is 95% of the 20 minute average output
				var ftp = getPercentage(averageOutput, 95); // * 95 / 100;

				// # Determine Zone 1 (55% of FTP)
				var zoneOne = getPercentage(ftp, 55);

				// # Determine Zone 2 (56-75% of FTP)
				var zoneTwoStart = zoneOne + 1;
				var zoneTwoEnd = getPercentage(ftp, 75);

				// # Determine Zone 3 (76-90% of FTP)
				var zoneThreeStart = zoneTwoEnd + 1;
				var zoneThreeEnd = getPercentage(ftp, 90);

				// # Determine Zone 4 (91-105% of FTP)
				var zoneFourStart = zoneThreeEnd + 1;
				var zoneFourEnd = getPercentage(ftp, 105);

				// # Determine Zone 5 (106-120% of FTP)
				var zoneFiveStart = zoneFourEnd + 1;
				var zoneFiveEnd = getPercentage(ftp, 120);

				// # Determine Zone 6 (121-150% of FTP)
				var zoneSixStart = zoneFiveEnd + 1;
				var zoneSixEnd = getPercentage(ftp, 150);

				// # Determine Zone 7 (151% of FTP)
				var zoneSeven = zoneSixEnd + 1;

				var html = [
					'<p>Your FTP is ', ftp, '</p>',
					'<table class="table table-condensed table-striped">',
						'<tr><th>Zone 1</th><td>', zoneOne, '</td></tr>',
						'<tr><th>Zone 2</th><td>', zoneTwoStart, ' - ', zoneTwoEnd, '</td></tr>',
						'<tr><th>Zone 3</th><td>', zoneThreeStart, ' - ', zoneThreeEnd, '</td></tr>',
						'<tr><th>Zone 4</th><td>', zoneFourStart, ' - ', zoneFourEnd, '</td></tr>',
						'<tr><th>Zone 5</th><td>', zoneFiveStart, ' - ', zoneFiveEnd, '</td></tr>',
						'<tr><th>Zone 6</th><td>', zoneSixStart, ' - ', zoneSixEnd, '</td></tr>',
						'<tr><th>Zone 7</th><td>', zoneSeven, '</td></tr>',
					'</table>'
				];

				$("#result").html( html.join('') );
			});
		});
	</script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

	<title>Power Zone Calculator</title>

	<style>

	body { margin: 25px; }
	</style>

	</head>
	<body>


	<main class="container">
	<div class="row">
	<div class="col-sm-4">

	<h1>Peloton FTP Power Zones Calculator</h1>

	<p>This script will calculate your Peloton FTP Power Zones based on your 20 minute average output. Please see the following link for more information. <a href="https://blog.onepeloton.com/power-zone-rides-everything-need-know" target="_blank">https://blog.onepeloton.com/power-zone-rides-everything-need-know</a></p>

	<p><a href="https://www.reddit.com/r/pelotoncycle/comments/7mxv79/peloton_ftp_power_zones_calculator/" target="_blank">Original Reddit Post</a></p>

	<form id="power-zone-form">
	<div class="form-group">
	<label for="average-output">20 minute average output</label>
	<input type="text" class="form-control" id="average-output" placeholder="Average output">
	</div>

	<button type="submit" class="btn btn-primary">Submit</button>
	</form>
	</div>

	<div class="col-sm-8" id="result">
	</div>
	</div>
	</main>


	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

	<script src="./underscore.js"></script>

	<script type="text/javascript">

	$(document).ready(function() {

	function getPercentage(ftp, pct) {
	var value = ftp * (pct / 100);
	return Math.round(value); // * 100) / 100
	}

	$('#power-zone-form').submit(function(evt) {
	evt.preventDefault();

	var averageOutput = $('#average-output').val();

	if(_.isEmpty(averageOutput)) {
	alert('must provide average output.');
	return;
	}

	if(_.isString(averageOutput)) {
	averageOutput = parseInt(averageOutput);
	}

	if(!_.isNumber(averageOutput) \|\| _.isNaN(averageOutput)) {
	alert('must provide average output as number.');
	return;
	}

	// # FTP is 95% of the 20 minute average output
	var ftp = getPercentage(averageOutput, 95); // * 95 / 100;

	// # Determine Zone 1 (55% of FTP)
	var zoneOne = getPercentage(ftp, 55);

	// # Determine Zone 2 (56-75% of FTP)
	var zoneTwoStart = zoneOne + 1;
	var zoneTwoEnd = getPercentage(ftp, 75);

	// # Determine Zone 3 (76-90% of FTP)
	var zoneThreeStart = zoneTwoEnd + 1;
	var zoneThreeEnd = getPercentage(ftp, 90);

	// # Determine Zone 4 (91-105% of FTP)
	var zoneFourStart = zoneThreeEnd + 1;
	var zoneFourEnd = getPercentage(ftp, 105);

	// # Determine Zone 5 (106-120% of FTP)
	var zoneFiveStart = zoneFourEnd + 1;
	var zoneFiveEnd = getPercentage(ftp, 120);

	// # Determine Zone 6 (121-150% of FTP)
	var zoneSixStart = zoneFiveEnd + 1;
	var zoneSixEnd = getPercentage(ftp, 150);

	// # Determine Zone 7 (151% of FTP)
	var zoneSeven = zoneSixEnd + 1;

	var html = [
	'<p>Your FTP is ', ftp, '</p>',
	'<table class="table table-condensed table-striped">',
	'<tr><th>Zone 1</th><td>', zoneOne, '</td></tr>',
	'<tr><th>Zone 2</th><td>', zoneTwoStart, ' - ', zoneTwoEnd, '</td></tr>',
	'<tr><th>Zone 3</th><td>', zoneThreeStart, ' - ', zoneThreeEnd, '</td></tr>',
	'<tr><th>Zone 4</th><td>', zoneFourStart, ' - ', zoneFourEnd, '</td></tr>',
	'<tr><th>Zone 5</th><td>', zoneFiveStart, ' - ', zoneFiveEnd, '</td></tr>',
	'<tr><th>Zone 6</th><td>', zoneSixStart, ' - ', zoneSixEnd, '</td></tr>',
	'<tr><th>Zone 7</th><td>', zoneSeven, '</td></tr>',
	'</table>'
	];

	$("#result").html( html.join('') );
	});
	});
	</script>
	</body>
	</html>