Calculator - Bench Press Calories Burned

calculator-bench-press-calories-burned.markdown

Calculator - Bench Press Calories Burned

A Pen by timbram on CodePen.

License.

index.html

<div class="">
  <div class="pushup-calculator-row">
    <input class="pushup-calculator-input" id="pushupCalculatorBodyweight" type="number" placeholder="Bodyweight">

    <select class="pushup-calculator-input pushup-calculator-dropdown" id="pushupCalculatorBodyweightUnit">
      <option value="lbs">lbs</option>
      <option value="kgs">kgs</option>
    </select>
  </div>
  <div class="pushup-calculator-row">
    <select class="pushup-calculator-input pushup-calculator-dropdown pushup-level-dropdown" id="pushupLevel">
      <option value="" selected disabled hidden>Bench Press Level</option>
      <option value="3.5">Light (8-15 Reps)</option>
      <option value="5.0">Medium (5-10 Reps)</option>
      <option value="6.0">Heavy (1-5 Reps Vigorous or Explosive)</option>
    </select>
  </div>
  <div class="pushup-calculator-row">
    <input class="pushup-calculator-input" id="pushupCalculatorActivityTime" type="number" placeholder="Activity Time (mins)">
    </select>
  </div>
  <div class="pushup-calculator-row">
    <span class="text-red" id="pushupCalculatorErrorMsg"></span>
  </div>
  <div class="pushup-calculator-row">
    <button class="calculate-btn" type="button" onclick="pushupCalculator()">Calculate</button>
  </div>
  <div>
    <h4 class="result-heading">
      <span id="pushupCalculatorResult"></span>
    </h4>
  </div>
</div>

script.js

var activityName = "Bench Press";

function pushupCalculator() {
  const bodyweight = parseFloat(
    document.getElementById("pushupCalculatorBodyweight").value
  );
  const bodyweightUnit = document.getElementById(
    "pushupCalculatorBodyweightUnit"
  ).value;
  const pushupLevel = parseFloat(document.getElementById("pushupLevel").value);
  const activityTime = parseFloat(
    document.getElementById("pushupCalculatorActivityTime").value
  );

  const errorMsgElement = document.getElementById("pushupCalculatorErrorMsg");

  // validation
  if (!bodyweight) {
    errorMsgElement.innerHTML = "Please enter your bodyweight";
    return;
  }

  if (!pushupLevel) {
    errorMsgElement.innerHTML = "Please select a " + activityName + " level";
    return;
  }

  if (!activityTime) {
    errorMsgElement.innerHTML = "Please enter " + activityName + " time";
    return;
  }

  errorMsgElement.innerHTML = "";

  // converting weight into KGs (if into Lbs)
  const LBS = "lbs";
  const ONE_KG_LBS = 2.20462;
  const bodyweightInKgs =
    bodyweightUnit == LBS ? bodyweight / ONE_KG_LBS : bodyweight;
  // calculating calories burned
  console.log(bodyweightInKgs, pushupLevel, activityTime);
  const result = (
    (bodyweightInKgs * pushupLevel * activityTime * 3.5) /
    200
  ).toFixed(3);
  // showing calculated result
  document.getElementById("pushupCalculatorResult").innerHTML =
    "Total Calories Burned " + result;
}

style.css

.pushup-calculator-row {
  margin-top: 7px;
  margin-bottom: 7px;
}

.pushup-calculator-input {
  color: #666666;
  background-color: #fafafa;
  border-color: #cccccc;
  border: 1px solid;
  border-radius: 0;
  padding: 10px 15px;
  max-width: 100%;
  font-family: Muli, sans-serif;
  font-weight: 300;
  font-size: 19px;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.pushup-calculator-dropdown {
  padding: 10px 5px !important;
  font-size: 18px !important;
}

.pushup-level-dropdown {
  width: 230px;
}

.calculate-btn {
  background-color: black;
  font-family: Muli, sans-serif;
  font-weight: 300;
  font-size: 19px;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  color: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-appearance: button;
  padding: 10px 20px;
}

.text-red {
  color: red;
}

h4 {
  font-weight: 600;
  font-size: 23px;
}

.result-heading {
  margin-top: 20px;
}