<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 sets 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
const totalRoundsInput = document.querySelector('.totalRounds');
const totalRepsOutput = document.querySelector('.totalReps');
totalRoundsInput.addEventListener('change', deathByCalc);
function deathByCalc() {
const totalRounds = Number(totalRoundsInput.value);
const totalReps = (totalRounds * (totalRounds + 1)) / 2;
totalRepsOutput.innerHTML = totalReps;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.