Hi I am trying to build a BAC (Body Alcohol Content) calculator. All of the buttons are single inputs by the user except the "Alcohol Type" which has 3 selections. Check out the HTML below.
<div class="main-container">
<div class="viewport">
<div class="gender-buttons" id="gender-buttons">
<button class="male-button">MALE</button>
<button class="female-button">FEMALE</button>
</div>
<div class="weight-input" >
<h3>ENTER WEIGHT</h3>
<input id="weight-input" type="number" placeholder="75kg" required>
</div>
<div class="alcohol-content" >
<h3>I'VE HAD</h3>
<input id="alcohol-content" type="number" placeholder="5" required>
</div>
<div class="alcohol-type">
<h3>OF</h3>
<select name="type-of-alcohol" id="alcohol-type">
<option value="1.5">Shots of Spirits</option>
<option value="5">Glasses of Wine</option>
<option value="12">Pints of Beer</option>
</select>
</div>
<div class="submit-button" >
<input type="submit" id="submit-button">
</div>
<div class="result-container" id="result-container">
</div>
</div>
</div>
Here is my code for the JS.
//Inputs
let weightElement = document.getElementById("weight-input"); // User enters weight
let amountElement = document.getElementById("alcohol-content") // Number of drinks consumed
let submitButton = document.getElementById("submit-button") // Submits calculation
const alcoholTypeElement = document.getElementById("alcohol-type") // Type of alcohol consumed with ounces as measurement of value
//Function to calculate BAC
submitButton.addEventListener('click', function(){ // User clicks Submit button will start the calculation
const weight = parseInt(weightElement.value); // Weight will be the integer value of the weightElement input
const amount = parseInt(amountElement.value); // Amount will be the integer value of amountElement input
const alcoholType = parseInt(alcoholTypeElement.value); // AlcoholType will be the integer value of alcoholTypeElement
const gramsOfAlcohol = (alcoholType*amount)*14; // 14 is the standard multipler for US/UK for grams of alcohol/ per standard unit
const genderMultiplyer = 0.55;
const bloodAlcoholContent = (gramsOfAlcohol / ((weight * 1000) * genderMultiplyer))*100
document.getElementById("result-container").innerHTML =
bloodAlcoholContent.toFixed(2);})
As you can see, all of the elements have been linked to their respective JS variables. Now the "Alcohol Type" has 3 selections, Spirits, Wine and Beer. Each with their own values. I'm trying to incorporate the "values" as conditionals in my function.
I have tried creating a switch statement like below to reflect the value at its alcohol volume (For example Spirits is 40% alcohol, and a standard unit is 1.5 ounces, and in the variable above (const gramsOfAlcohol = (alcoholType*amount)*14; where 14 is the standard multiplier to find grams of alcohol per ounce:
const alcoholTypeValue = (alcoholType) => {
switch(value){
case 12:
return value * 0.05 // 0.05 = 5% Alcohol (Beers)
break
case 5:
return value * 0.12 // 0.12 = 5% Alcohol (Wine)
break
case 1.5:
return value * 0.4 // 0.40 = 5% Alcohol (Spirits)
break
}
}
So if the user selects spirits then we know that a standard shot (1.5 ounces) of spirit at 40% alcohol multiplied by 14 will give 8.4 grams of pure alcohol.
So if the user selects wine then we know that a standard glass (5 ounces) of wine at 12% alcohol multiplied by 14 will give 8.4 grams of pure alcohol.
So if the user selects beers then we know that a standard pint (12 ounces) of spirit at 5% alcohol multiplied by 14 will give 8.4 grams of pure alcohol.
I hope this is helpful, I can't seem to find a specific question to my problem but essentially, the selection I end up using needs to be pre-calculated before used in my function.
Thanks
Aucun commentaire:
Enregistrer un commentaire