Created
February 18, 2023 15:32
-
-
Save TimothyBramlett/71c25aebf3837ca895a45880135fef3d to your computer and use it in GitHub Desktop.
Calculator - Bench Press Calories Burned
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment