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.

    + +
    +
    • +

    (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

    + +

    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    BMICategory
    less than 18.5Underweight
    between 18.5 and 24.9Ideal
    between 25 and 29.9Overweight
    over 30Obesity
    +
    +
    + + + 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; +}