I'm learning JavaScript at the moment (still very much a beginner) and this is the first app I've designed on my own, without using any tutorials. It's an app which takes the user's gender, age, height, and weight and then calculates their BMR. It works, but I would really appreciate it if someone more knowledgeable could take a look at the code to see if it's optimal (or even close!). I want to unlearn any bad habits I may have picked up as soon as possible.
Here's a link to all the code on GitHub, along with a ReadMe that explains in detail how the app works:
https://github.com/neilmurrellcoding/bmr-calculator-version-one
The HTML code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>BMI Calculator</title>
</head>
<body>
<div class="first-container">
<div class="second-container">
<div class="application">
<h1 class="title">DIET PLANNER</h1>
<p class="intro">Fill out the below fields to discover your BMR.</p><br>
<p class="intro">Your BMR is the number of calories you burn off in 24 hours</p>
<form>
<div class="radio-buttons">
<p class="label"><strong>Select your gender</strong></p>
<input type="radio" checked="checked" id="male" name="gender" value="male"><label for="male" class="gender-label">Male</label>
<input type="radio" id="female" name="gender" value="female"><label for="female" class="gender-label">Female</label>
</div>
<p class="label"><strong>Age</strong></p>
<input type="number" id="age" class="age-field" min="0" max="130" placeholder="Enter your age"><br><br><br>
<p class="label"><strong>Height</strong></p>
<input type="number" id="feet" class="field" min="0" max="9" placeholder="ft">
<input type="number" id="inches" class="field" min="0" max="11" placeholder="in"><br>
<p class="label"><strong>Weight</strong></p>
<input type="number" id="stone" class="field" min="0" max="80" placeholder="stone">
<input type="number" id="lbs" class="field" min="0" max="13" placeholder="lbs"><br>
<input type="submit" id="submit" class="submit">
</form>
</div>
</div>
<div id="results">
<div class="results-container">
<h1 class="title">Your daily BMI is:</h1>
<p id="bmi-result">Placeholder text</p>
</div>
</div>
</div>
<script src="application.js"></script>
</body>
</html>
The JS code is:
document.getElementById('results').style.display = 'none';
submit.addEventListener('click', function(e) { // Runs getValues when form's submit button is clicked.
e.preventDefault();
getValues();
})
getValues = () => { // Converts values from form fields into integers, then assigns these integers to variables.
const age = parseInt(document.getElementById("age").value);
const gender = document.getElementsByName("gender"); // This produces a node-list with 2 items, male and female. Male is checked by default.
const heightFeet = parseInt(document.getElementById("feet").value);
const heightInches = parseInt(document.getElementById("inches").value);
const weightStone = parseInt(document.getElementById("stone").value);
const weightLbs = parseInt(document.getElementById("lbs").value);
x = calculateAge(age); // calls the calculateAge function below, passes 'age' as an argument, assigns return value to x.
y = calculateWeight(weightStone, weightLbs); // calls the calculateWeight function below, passes 'weightStone' & 'weightLbs' as args, assigns return value to y.
z = calculateHeight(heightFeet, heightInches); // calls the calculateHeight function below, passes 'heightFeet' & 'heightWeight' as args, assigns return value to z.
finalResult(x, y, z, gender); // calls finalResult function below, passes return values of above 3 functions as args.
}
calculateAge = age => { // Multiplies user's age by 5 and saves this as finalAge.
finalAge = age * 5;
return finalAge;
}
calculateWeight = (weightStone, weightLbs) => { // Converts user's imperial weight into kg, multiplies it by 10, and returns finalWeight.
kilogramWeight = ((weightStone * 14) + weightLbs) * 0.453;
finalWeight = kilogramWeight * 10;
return finalWeight;
}
calculateHeight = (heightFeet, heightInches) => { // Converts user's imperial height into cm, multiplies it by 6.25, and returns finalHeight.
centimeterHeight = ((heightFeet * 12) + heightInches) * 2.54;
finalHeight = centimeterHeight * 6.25;
return finalHeight;
}
finalResult = (x, y, z, gender) => {
result = z + y - x; // finalWeight + finalHeight - finalAge.
for(i = 0; i < gender.length; i++) { // This checks to see which gender the user checked. If 'male', +5 to finalResult. Else, -161 from finalResult.
if(gender[i].checked) {
finalResult = result + 5;
break;
} else {
finalResult = result - 161;
break;
}
}
revealResult(finalResult); // Calls below function & passes finalResult as an argument.
return finalResult;
}
revealResult = finalResult => {
finalResult = Math.floor(finalResult);
let finalBmi = finalResult.toString()
document.getElementById('results').style.display = 'block'; // Reveals the 'results' box which was originally hidden (see line 1)
const calories = document.getElementById("bmi-result"); // Grabs 'p' element.
calories.classList.add("finalNumberStyling") // Applies simple styling to 'p' element.
calories.innerText = finalBmi + ' calories per day'; // Inserts finalBmi string into 'p' element.
}
I've not included the CSS code because the styling is very minimal, but it's all available at the GitHub link just in case.
Any comments or suggestions you have would be very much appreciated.
Thanks.
EDIT: Made a few edits to the JS code to add some explanatory notes.
