From b2e1cd6dac5febe34030fd65c1a9c0a071cf1b3a Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 17:43:30 +0530 Subject: [PATCH 1/5] Create a boiler plate for project --- Source-Code/BMICalculator/index.html | 13 +++++++++++++ Source-Code/BMICalculator/script.js | 0 Source-Code/BMICalculator/style.css | 0 3 files changed, 13 insertions(+) create mode 100644 Source-Code/BMICalculator/index.html create mode 100644 Source-Code/BMICalculator/script.js create mode 100644 Source-Code/BMICalculator/style.css diff --git a/Source-Code/BMICalculator/index.html b/Source-Code/BMICalculator/index.html new file mode 100644 index 0000000..dfeb8cb --- /dev/null +++ b/Source-Code/BMICalculator/index.html @@ -0,0 +1,13 @@ + + + + + + BMI Calculator + + + + + + + \ No newline at end of file diff --git a/Source-Code/BMICalculator/script.js b/Source-Code/BMICalculator/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/BMICalculator/style.css b/Source-Code/BMICalculator/style.css new file mode 100644 index 0000000..e69de29 From d3741b325c95f6f814150c2680dc1795cd0517a8 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 18:54:21 +0530 Subject: [PATCH 2/5] Add table and calculator container --- Source-Code/BMICalculator/index.html | 57 +++++++++++++++++++++++----- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/Source-Code/BMICalculator/index.html b/Source-Code/BMICalculator/index.html index dfeb8cb..5e84c84 100644 --- a/Source-Code/BMICalculator/index.html +++ b/Source-Code/BMICalculator/index.html @@ -1,13 +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
+
+
- - \ No newline at end of file + + From ccb44260960cb6538e621a2e9f7e7ae06843a777 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 18:55:03 +0530 Subject: [PATCH 3/5] Add funtionalites --- Source-Code/BMICalculator/script.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/Source-Code/BMICalculator/script.js b/Source-Code/BMICalculator/script.js index e69de29..78dddd5 100644 --- a/Source-Code/BMICalculator/script.js +++ 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}`; +}); From a5245930b4d8d5bf62a33962ada6dad8b02f367b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 18:58:27 +0530 Subject: [PATCH 4/5] Add Styles for table and form --- Source-Code/BMICalculator/style.css | 98 +++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) diff --git a/Source-Code/BMICalculator/style.css b/Source-Code/BMICalculator/style.css index e69de29..9195295 100644 --- a/Source-Code/BMICalculator/style.css +++ 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; +} From 92953e63d4486cf70bb90bb61178d47ac29742dd Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 19:01:07 +0530 Subject: [PATCH 5/5] Add project description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) 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)