BMI Calculator

diff --git a/README.md b/README.md index da812fe..1a2e3f0 100644 --- a/README.md +++ b/README.md @@ -221,6 +221,17 @@ In order to run this project you need: +

BMI Calculator

The BMI Calculator is a simple web application built using HTML, CSS, and JavaScript. It allows users to easily calculate their Body Mass Index (BMI) by entering their height and weight. The application then computes the BMI and displays the result, helping users understand their body mass relative to their height and weight. This project is beginner-friendly and provides a practical example of using basic web development skills to create a functional tool.

Live Demo
Source

(back to top)

diff --git a/Source-Code/BMICalculator/index.html b/Source-Code/BMICalculator/index.html new file mode 100644 index 0000000..5e84c84 --- /dev/null +++ b/Source-Code/BMICalculator/index.html @@ -0,0 +1,52 @@ + + + + + + BMI Calculator + + + + +

Body Mass Index Calculator

Height in cm

+ +

Weight in kg

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + +

BMI	Category
less than 18.5	Underweight
between 18.5 and 24.9	Ideal
between 25 and 29.9	Overweight
over 30	Obesity

+ + + diff --git a/Source-Code/BMICalculator/script.js b/Source-Code/BMICalculator/script.js new file mode 100644 index 0000000..78dddd5 --- /dev/null +++ b/Source-Code/BMICalculator/script.js @@ -0,0 +1,20 @@ +document.getElementById('btn').addEventListener('click', () => { + const height = parseFloat(document.getElementById('height').value); + const weight = parseFloat(document.getElementById('weight').value); + + if ( + Number.isNaN(height) + || Number.isNaN(weight) + || height <= 0 + || weight <= 0 + ) { + document.getElementById('result').innerHTML = 'Please enter valid positive numbers for height and weight.'; + return; + } + + const heightInMeters = height / 100; + const bmi = weight / (heightInMeters * heightInMeters); + const bmio = bmi.toFixed(2); + + document.getElementById('result').innerHTML = `Your BMI is ${bmio}`; +}); diff --git a/Source-Code/BMICalculator/style.css b/Source-Code/BMICalculator/style.css new file mode 100644 index 0000000..9195295 --- /dev/null +++ b/Source-Code/BMICalculator/style.css @@ -0,0 +1,98 @@ +body { + text-align: center; + font-family: 'Courier New', Courier, monospace; + background: linear-gradient(rgb(63, 217, 220) 0%, rgb(238, 248, 248) 100%); + min-height: 100vh; +} + +.container { + margin: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.bmi { + width: 350px; + background-color: #fff; + padding: 20px; + border-radius: 10px; + margin: auto; +} + +h2 { + font-size: 30px; + font-weight: 600; +} + +.text { + text-align: center; +} + +#weight, +#height { + color: #222f3e; + text-align: left; + font-size: 20px; + font-weight: 200; + outline: none; + border: 1px solid black; + border-radius: 7px; + width: 200px; + height: 35px; +} + +#weight:focus, +#height:focus { + width: 250px; + transition: 0.5s; +} + +#result { + color: #971f1f; + font-size: large; + font-weight: 400; +} + +#btn { + font-size: medium; + font-family: inherit; + margin-top: 10px; + border: none; + background: lightblue; + width: 150px; + padding: 10px; + border-radius: 30px; + outline: none; + cursor: pointer; + transition: 0.5s; +} + +#btn:hover { + transform: scale(1.1); + transition: 0.5s; +} + +table { + width: 400px; + border-collapse: collapse; + margin: 20px auto; +} + +tr { + background: lightblue; +} + +th { + background: #fff; + color: #000; + font-weight: bold; +} + +td, +th { + padding: 10px; + border: 1px solid #000; + text-align: center; + font-size: 18px; +}