<div class="calculator">
	<header>
		<h1>Death By</h1>
		<h2>Rep Calculator</h2>
	</header>
	<p>A "Death By" is an EMOM (every minute on the minute) exercise where on the first minute you complete one rep of the exercise, the second minute you complete two reps, the third you complete three reps, and so on until you can not complete the reps inside the minute. This calculator will give you the total number of reps completed.</p>
	<div class="align-center">
		<p>Enter number of minutes completed</p>
		<input type="number" class="totalRounds">
		<p>You've completed <span class="totalReps">0</span> reps.</p>
	</div>
</div>
body {
	background: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png');
}

.calculator {
	max-width: 360px;
	margin: 0 auto;
}

.totalReps {
	font-weight: bold;
}

header {
	text-align: center;
	h1 {
		margin-bottom: 0;
	}
	h2 {
		margin-top: 0;
		font-size: 1.2em;
	}
}

input {
	border: 3px solid #009cd0;
	border-radius: 8px;
	background-image: none;
	background-color: transparent;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	font-size: 1.6em;
	width: 40%;
	text-align: center;
}

.align-center {
	text-align: center;
}
View Compiled
document.querySelector(".totalRounds").addEventListener("change", deathByCalc);

function deathByCalc() {
	var totalReps = 0;
	var totalRounds = Number(this.value);

	for (i = 1; i < totalRounds + 1; i++) {
		var totalReps = i + totalReps;
		document.querySelector(".totalReps").innerHTML = totalReps;
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.