Introduction:
In this article, we'll look at how to use HTML, CSS, and JavaScript to make a responsive BMI (Body Mass Index) calculator with a striking appearance. Users can enter their height and weight on the BMI calculator, and it will instantly calculate their BMI.
Understanding QR Codes:
A BMI (Body Mass Index) calculator is a tool that helps determine if a person's weight is appropriate for their height. It involves a simple calculation using weight and height measurements to generate a BMI value, which falls within categories like underweight, normal weight, overweight, or obese.
Prerequisites:
JavaScript, CSS, and HTML basics are required.
Source Code
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
width: 350px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="number"] {
padding: 8px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s ease;
}
input[type="number"]:focus {
outline: none;
border-color: #007bff;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.result {
font-weight: bold;
font-size: 24px;
margin-top: 20px;
text-align: center;
color: #dc3545;
}
.result.green {
color: #28a745;
}
</style>
<div class="calculator">
<h1>BMI Calculator</h1>
<div class="input-group">
<label for="weight">Weight (kg):</label>
<input type="number" id="weight" required>
</div>
<div class="input-group">
<label for="height">Height (cm):</label>
<input type="number" id="height" required>
</div>
<button onclick="calculateBMI()">Calculate BMI</button>
<p class="result" id="result"></p>
</div>
<script>
function calculateBMI() {
var weight = document.getElementById("weight").value;
var height = document.getElementById("height").value;
height = height / 100;
var bmi = weight / (height * height);
var resultElement = document.getElementById("result");
if (bmi < 18.5 || bmi >= 25) {
resultElement.innerHTML = "Your BMI: " + bmi.toFixed(2);
resultElement.classList.remove("green");
} else {
resultElement.innerHTML = "Your BMI: " + bmi.toFixed(2);
resultElement.classList.add("green");
}
}
</script>
Below is a step-by-step explanation of each line of code.
Step1
Open Notepad or any text editor you like.
Step 2
Start writing HTML and add the HTML element including the <!DOCTYPE html> declaration, <html> opening and closing tags, <head> and <body> sections.
Add <title> as BMI Calculator inside Head section.
Step 3
Add the CSS styles of different HTML elements inside the Head section to set the calculator background color, headings, input groups, labels, input fields, buttons and result paragraph and to make the design attractive and responsive.
Create <div> element with the class "calculator" inside the body section to make a container for BMI.
To display the title of the calculator, add a <h1> header with the text "BMI Calculator".
Create two input groups for weight and height, each containing a <label> and <input> field with a Unique ID to the input field for Javascript use.
Add <button> element with the text "Calculate BMI" that triggers the Javascript function calculateBMI().
Add <p> element with the class "result" and an ID of "result" to display the calculated BMI value.
Step 4
Add the JavaScript Functionality
Add a javascript function calculateBMI() inside the <script> tags within the <body> section
Get the weight and height input values of the user using document.getElementById().
Convert the height from centimeters to meters by dividing it by 100.
Calculate the BMI using the formula: BMI = weight / (height * height)
Update the HTML result element's content with calculated BMI using document.getElementById().innerHTML.
Add or remove CSS based on the result to apply color coding.
Step 5
Save the notepad as BMICalculator.html and open it with Browser.
That's it. Congratulation you have successfully built a responsive BMI calculator using HTML, CSS, and JS.
If you have a website and need a BMI calculator on your webpages, you can follow below mentioned steps.
Step 1: - Open the html page of your website dashboard or blog in Notepad.
Step 2: - Copy all the CSS code and paste inside <style> tag.
Step 3: - Copy all the html code and paste inside <body> tag.
Step 4: - Copy all the Javascript code and paste inside <script> tag.
Step 4: - Save file.
Done you have successfully added BMI Calculator to your website.
Comments
Post a Comment