<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);

})();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.