Live stream set for 2025-05-16 at 14:00:00 Eastern
Ask questions in the live chat about any programming or lifestyle topic.
This livestream will be on YouTube or you can watch below.
Vanilla JS Calculator
The estimate of daily caloric needs is performed by calculating the Basal Metabolic Rate (BMR), then multiplying by an activity factor.
The Body Mass Index (BMI) is a calculation based on the height and weight to estimate body fat percentage.
The waist-to-height ratio (WHtR) is calculated by dividing your waist circumference by your height, both measured in the same units.
In this tutorial, the from elements will be created and styled.
Requirements For Styling Fitness Calculator
Glossary:
BMR
Basal Metabolic Rate is the number of calories the body burns at rest.
Activity Factor
How active a person is.
BMI
Measure of body fat based on height and weight.
WHtR
Waist-to-height ratio is the waist circumference divided by body height, both measured in the same units.
Metric
International decimal measurement system based on the meter for length and kilogram for mass.
Standard
Measurement system based on the inches for length and pounds for mass.
Common Form Elements
| Name | Description | Example |
|---|---|---|
| Gender | Male or female sex. | Male. |
| Measurement System | Collection of units used to quantify physical quantities. | Metric. |
| Age | A period of human life, measured by years from birth,. | 23 years old. |
| Weight | The force exerted on a body by gravity.. | 73 kg. |
| Height | The measurement of vertical distance, either from the base to the top of something, or the distance above a specific level. | 188 cm. |
| Waist | The part of the human body located between the rib cage and the hips, often considered the narrowest part of the torso. | 76 cm. |
| Name | Description | Example |
HTML Fitness Form
<!DOCTYPE html>
<html>
<head>
<title>BMI Weight Loss Calculator Styling</title>
<style></style>
</head>
<body>
<form class="bmi-calculator">
<select name="gender" required>
<option selected disabled hidden value="">Choose Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="measurement" required>
<option value="metric">Metric</option>
<option value="standard">Standard</option>
</select>
<label for="bmi-age"> Age: <input id="bmi-age" type="number" name="age" max="160" min="1" step="1" placeholder="Age" required /></label>
<label for="bmi-weight"> Weight: <input id="bmi-weight" type="number" name="weight" max="2000" min="1" step="0.01" placeholder="Weight" required /></label>
<label for="bmi-height"> Height: <input id="bmi-height" type="number" name="height" max="1000" min="1" step="0.01" placeholder="Height" required /></label>
<label for="bmi-waist"> Waist: <input id="bmi-waist" type="number" name="waist" max="1000" min="1" step="0.01" placeholder="Waist" required /></label>
<select name="activity">
<option value="sedentary">Sedentary (less than 30min a week)</option>
<option value="light">Light exercise (90min a week) </option>
<option value="moderate">Moderate exercise (aerobic exercise, 120min a week)</option>
<option value="active">Very active (150min a week)</option>
<option value="extreme">Extreme (Athlete status)</option>
</select>
<div class="bmi-buttons">
<input type="submit" value="Calculate" />
<input type="reset" value="Reset" />
</div>
<div class="output"></div>
</form>
</body>
</html>
CSS Styling
.bmi-calculator {
box-sizing: border-box;
}
.bmi-calculator select,
.bmi-calculator label,
.bmi-calculator div {
display: block;
width: 100%;
margin-bottom: 1rem;
}
.bmi-calculator select,
.bmi-calculator input {
padding: .9rem 1.1rem;
}
.bmi-calculator label input {
width: 100%;
box-sizing: border-box;
}
.bmi-calculator label[data-measurement]::after {
content: attr(data-measurement);
margin-left: -0.25rem;
position: absolute;
top: 0;
right: 0;
}
.bmi-calculator .output div,
.bmi-calculator .bmi-buttons {
display: flex;
justify-content: space-between;
}
.bmi-calculator label[for] {
position: relative;
}
Explanation
- Generate a HTML form to hold elements for fitness calculator..
- The select drop-down element holds gender options.
- The select drop-down element hold measurement system options.
- The input number element hold activity options.
- The select drop-down element hold age value.
- The select drop-down element hold weight value.
- The select drop-down element hold height value.
- The select drop-down element hold waist value.
Usage
- You may use the any IDE or text editor including the Learning JavaScript Course Web IDE in a new browser window.
- Open your web browser.
- Navigate to the URL or drag and drop the HTML file into the web browser.
Open Source
JavaScript follows the ECMAScript standard and is licensed under the W3C Software License by web browser vendors and runtime environment vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
CSS specifications are maintained by the World Wide Web Consortium (W3C) and is licensed under the W3C Software License by web browser vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
Conclusion:
The fitness calculator tutorial was divided into parts. In this part, the HTML and CSS styling were completed. The reset button works without additional JavaScript code.
If you enjoy this article, consider supporting me by purchasing one of my OjamboShop.com Online Programming Courses or publications at Edward Ojambo Programming Books or simply donate here Ojambo.com Donate
References:
- Customer Sets Price Plugin for WooCommerce on Ojambo.com
- Learning JavaScript Course on OjamboShop.com
- Learning Python Course on OjamboShop.com
- Learning PHP Course on OjamboShop.com
- Learning JavaScript Paperback on Amazon
- Learning JavaScript Ebook on Amazon
- Learning Python Ebook on Amazon
- Learning PHP Ebook on Amazon
- OjamboServices.com For Custom Websites, Applications & Tutorials