<div class="calc-outer-wrap">
<div id="form-error" style="display:none;"></div>
<form class="calc-form" id="calc-form">
<div class="form-fields">
<div class="field-outer">
<label for="distance" class="top-label">Distance you ran:</label>
<div class="field-items">
<div class="field field-large">
<input type="text" name="distance" id="distance" inputmode="numeric" pattern="[0-9]*">
</div><!-- /.field-large -->
<div class="field field-small">
<select name="distance_unit">
<option value="mile">mi</option>
<option value="kilometer">km</option>
</select>
</div><!-- /.field-small -->
</div><!-- /.field-items -->
</div><!-- /.field-outer -->
<div class="field-outer">
<label for="time-h" class="top-label">How long you ran:</label>
<div class="field-items">
<div class="field">
<input type="text" name="time_h" id="time-h" inputmode="numeric" pattern="[0-9]*">
<label for="time-h">hr</label>
</div><!-- /.field -->
<div class="field">
<input type="text" name="time_m" id="time-m" inputmode="numeric" pattern="[0-9]*">
<label for="time-m">min</label>
</div><!-- /.field -->
<div class="field">
<input type="text" name="time_s" id="time-s" inputmode="numeric" pattern="[0-9]*">
<label for="time-s">sec</label>
</div><!-- /.field -->
</div><!-- /.field-items -->
</div><!-- /.field-outer -->
<div class="field-outer">
<label for="weight" class="top-label">Your weight:</label>
<div class="field-items">
<div class="field field-large">
<input type="text" name="weight" id="weight" inputmode="numeric" pattern="[0-9]*">
</div><!-- /.field-large -->
<div class="field field-small">
<select name="weight_unit">
<option value="lb">lb</option>
<option value="kg">kg</option>
</select>
</div><!-- /.field-small -->
</div><!-- /.field-items -->
</div><!-- /.field-outer -->
<div class="btn-wrap field-outer">
<button class="form-submit">Calculate</button>
</div>
</div><!-- /.form fields -->
</form>
<div id="results" style="display:none;"></div>
</div><!-- /.calc-outer-wrap -->$border-radius : 0.1875rem;
$primary: #9951FF;
$primary-dark: #803ede;
$secondary: #59e7ed;
$secondary-dark: darken($secondary, 10);
* {box-sizing: border-box;}
html, body {
margin: 0;
padding: 0;
}
.calc-outer-wrap {
margin: 0 auto;
background: #f3f3f3;
padding: 0.625rem;
font-size: 1rem;
line-height: 1.3;
font-family: Helvetica Neue,Helvetica, Arial, sans-serif;
}
.form-fields {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: top;
}
.field-outer {
width: 48%;
}
label,
input,
select {
font-size: 1rem;
line-height: 1.3;
display: block;
}
input,
select {
height: 1.75rem;
border: 1px solid #bbb;
width: 100%;
background: #fff;
padding: 0 0.325rem;
border-radius : $border-radius;
transition: box-shadow 200ms ease-in-out;
box-shadow: inset 0 0 0 0 $secondary;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
outline: 0;
box-shadow: inset 0 -3px 0 -1px $secondary;
border-radius: $border-radius $border-radius 1px 1px;
}
}
select {
background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg width='8px' height='14px' viewBox='0 0 8 17' xmlns='http://www.w3.org/2000/svg' fill='%238A8A8A'%3e%3cpolygon fill='%238A8A8A' points='4 17 0 10 8 10'%3e%3c/polygon%3e%3cpolygon fill='%238A8A8A' points='4 0 0 7 8 7'%3e%3c/polygon%3e%3c/svg%3e") 94% center no-repeat;
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
&::-ms-expand {
display: none;
}
}
.field-items {
display: flex;
justify-content: space-between;
label {
font-size: 0.75rem;
color: #999;
}
}
.field {
display: inline-block;
width: 32%;
+ .field {
margin-left: 3px;
}
}
.field-large {
flex: 1;
width: 67%;
}
.field-small {
width: 3em;
}
.top-label {
font-weight: bold;
font-size: 0.875rem;
line-height: 1.4;
display: block;
}
.btn-wrap {
align-self: flex-end;
}
.form-submit {
background: $secondary;
display: block;
border: 0;
width: 100%;
font-size: 1rem;
border-radius: $border-radius;
height: 1.75rem;
font-weight: 600;
color:#fff;
box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.15);
cursor: pointer;
&:hover,
&:focus {
background: $secondary-dark;
box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
outline: 0;
}
&:active {
box-shadow: none;
}
}
#form-error {
color: #fff;
margin-bottom: 0.5rem;
text-align:center;
color: #c1000b;
background-color: #ffd5d5;
padding: 3px;
font-size: 0.875rem;
}
#results {
position: relative;
width: 100%;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
p {
margin: 0;
}
#rs {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 0.875rem;
color: #aaa;
&:hover {
color: $primary;
}
}
}(function() {
const form = document.getElementById('calc-form');
const results = document.getElementById('results');
const errors = document.getElementById('form-error');
/**
* Display a form validation error
*
* @param {String} msg The validation message
* @return {Boolen} Returns false
*/
function errorMessage(msg) {
errors.innerHTML = msg;
errors.style.display = '';
return false;
}
/**
* Display the calculation results
*
* @param {Integer} calories The calories burned
* @param {Integer} distance The distance run
* @param {String} unit The distance unit (miles or kilometers)
* @param {Integer} burnRate The calories per distance burn rate
* @param {Integer} calsPerHr The calories burned per hour
*/
function showResults(calories, distance, unit, burnRate, calsPerHr) {
results.innerHTML = `<p>You burned <strong>${calories} calories</strong> on your <strong>${distance} ${unit} run </strong>. At that pace, your calorie burn rate is <strong>${burnRate} calories </strong> per mile and <strong>${calsPerHr} calories </strong>per hour.</p><a href="#" id="rs">reset</a>`;
results.style.display = ''
form.style.display = 'none'
errors.style.display = 'none'
}
/**
* Hide the results and reset the form
*/
function resetForm(e) {
if(e.target.id = 'rs') {
e.preventDefault();
results.style.display = 'none';
form.style.display = '';
form.reset()
}
}
/**
* Handle form submit
*/
function submitHandler(e) {
e.preventDefault();
// Distance
let distance = parseFloat(form.distance.value);
let unit = form.distance_unit.value;
if(isNaN(distance) || distance < 0) {
return errorMessage('Please enter a valid distance');
}
if(unit == 'mile') {
distance = 1.60934 * distance
}
if (distance < 0.1 || distance > 1000) {
return errorMessage('The distance you entered falls outside the limits of this calculator.');
}
// Duration
let hrs = (parseInt(form.time_h.value) || 0) * 3600;
let min = (parseInt(form.time_m.value) || 0) * 60;
let sec = (parseInt(form.time_s.value) || 0);
let duration = hrs + min + sec;
if(isNaN(duration) || duration <= 0) {
return errorMessage('Please enter a valid time')
}
// Pace
let pace = duration / distance
if (pace < 140 || pace > 1200) {
return errorMessage('The pace calculated from the distance and time you entered falls outside the limits of this calculator.')
}
// Weight
let weight = parseInt(form.weight.value)
if(isNaN(weight) || weight <= 0) {
return errorMessage('Please enter a valid weight')
}
if(form.weight_unit.value == 'lb') {
weight = 0.453592 * weight;
}
if (weight < 35 || weight > 250) {
return errorMessage('The weight that you entered falls outside the limits of this calculator.');
}
// Calculations
let calories = Math.round(distance * weight * 1.036);
let calsPerKm = Math.round(weight * 1.036);
let calsPerMi = Math.round(1.60934 * weight * 1.036);
let calsPerHr = Math.round((distance * weight * 1.036) * (3600 / duration));
let burnRate = (unit == 'mile' ? calsPerMi : calsPerKm);
// Display results
showResults(calories, parseFloat(form.distance.value), unit, burnRate, calsPerHr);
}
// Add Event Listeners
form.addEventListener('submit', submitHandler);
results.addEventListener('click', resetForm, true);
})();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.