project name: BMI calculator

Hi Everone, welcome to my blog in this blog post i will share the code of JavaScript practice project "BMI calculator" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file:

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>BMI calculator</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <h1 class="heading">Body Mass Index calculator</h1> Your age: <input type="number" class="input" id="age" placeholder="1" /> Your Height(cm): <input type="number" class="input" id="height" placeholder="180" /> Your Weight(Kg): <input type="number" class="input" id="weight" placeholder="50" /> <button class="btn" id="btn">Compute</button> <input disabled type="text" class="input" id="bmi-result" placeholder="bmi-result" /> <h4 class="info-text"> Weight Condition: <span id="weight-condition"></span> </h4> </div> <script src="index.js"></script> </body> </html>

style.css:

* { padding: 0; margin: 0; box-sizing: border-box; } body { background: linear-gradient(to left bottom, lightpink, rgb(101, 95, 227)); display: flex; min-height: 100vh; justify-content: center; align-items: center; font-family: cursive; } .container { background: rgba(255, 255, 255, 0.3); padding: 20px; display: flex; flex-direction: column; border-radius: 10px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); margin: 5px; } .heading { font-size: 30px; } .input { padding: 10px 20px; font-size: 18px; background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.5); margin: 10px; } input::placeholder { color: rgb(180, 172, 172); } #age { width: 150px; } .btn { background-color: lightpink; border: none; padding: 10px 20px; border-radius: 5px; margin: 10px; font-size: 20px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); cursor: pointer; } .btn:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); transition: all 300ms ease; }

index.js:

const btn = document.getElementById("btn"); const bmiresult = document.getElementById("bmi-result"); const weightcondition = document.getElementById("weight-condition"); function calculate() { const height = document.getElementById("height").value / 100; const weight = document.getElementById("weight").value; const result = weight / (height * height); bmiresult.value = result; if (result < 18.5) { weightcondition.innerText = "Under Weight "; } else if (result >= 18.5 && result <= 24.9) { weightcondition.innerText = "Normal Weight "; } else if (result >= 25 && result <= 29.9) { weightcondition.innerText = "OverWeight "; } else if (result <= 30) { weightcondition.innerText = "Obesity "; } } btn.addEventListener("click", calculate);

Here is the explaination:

It declares variables btn, bmiresult, and weightcondition that will reference HTML elements in the document.
It defines a function called calculate() that will be executed when a button with the id "btn" is clicked.
Inside the calculate() function, it retrieves the values of the height and weight inputs from the HTML elements with the corresponding ids.
It calculates the BMI by dividing the weight (in kilograms) by the square of the height (in meters).
It assigns the calculated BMI value to the bmiresult element's value property, which will update the displayed result in the HTML.
It uses conditional statements to determine the weight condition based on the calculated BMI.
If the BMI is less than 18.5, it sets the innerText of the weightcondition element to "Under Weight".
If the BMI is between 18.5 and 24.9 (inclusive), it sets the innerText to "Normal Weight".
If the BMI is between 25 and 29.9 (inclusive), it sets the innerText to "OverWeight".
If the BMI is greater than or equal to 30, it sets the innerText to "Obesity".
Finally, it adds an event listener to the button element. When the button is clicked, the calculate() function will be called, triggering the BMI calculation and weight condition determination.
FINAL WORDS:
In conclusion, the provided code implements a BMI (Body Mass Index) calculator using JavaScript. The BMI is calculated based on the user's input of height and weight, and the weight condition is determined and displayed accordingly. The code demonstrates a simple way to calculate BMI and provide feedback on weight status. By understanding the code and its functionality, you can create a BMI calculator for your website or application. Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas