Enhance BMI Calculator with Visualization, Unit Conversion, and Perso…

…nalized Tips (#280)

## Related Issue

closes #275 

## Email id used to register for VSoc'24

atharavashihurkar@gmail.com

## Description

Enhance BMI Calculator with the following features:
1. **Include Chart for BMI Data Visualization**: Add a chart to
visualize BMI data over time, helping users track their progress and
understand trends in their BMI.
2. **Add Unit Conversion Options**: Provide options for inputting height
and weight in different units (e.g., feet/inches, pounds), and convert
these units to metric units for BMI calculation.
3. **Add Tips Feature**: Based on the BMI category (underweight, normal,
overweight, obese), provide personalized health tips to offer users
actionable advice to improve their health index based on their BMI.

## Type of PR

- [ ] Bug fix
- [X] Feature enhancement
- [X] Documentation update
- [ ] Security enhancement
- [ ] Other (specify): _______________

## Screenshots / Videos (if applicable)




https://github.com/user-attachments/assets/3c8d6944-c2e3-472d-920c-7c13b83d2ff1





## Checklist
- [X] I have performed a self-review of my code.
- [X] I have read and followed the Contribution Guidelines.
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.
- [X] I have followed the code style guidelines of this project.
- [X] I have checked for any existing open issues that my pull request
may address.
- [X] I have ensured that my changes do not break any existing
functionality.
- [X] Each contributor is allowed to create a maximum of 4 issues per
day. This helps us manage and address issues efficiently.
- [X] I have read the resources for guidance listed below.
- [X] I have followed security best practices in my code changes.

## Additional Context

Adding these features will make the BMI calculator more informative and
user-friendly by engaging users with interactive and personalized
content. Here are some screenshots/mockups of how the features could be
integrated into the existing interface:

1. **BMI Data Visualization Chart**:
![Screenshot 2024-07-13
222752](https://github.com/user-attachments/assets/f31c94ce-ce61-4a66-ac32-2bee423f9c34)

   
2. **Unit Conversion Options**:
  
![Screenshot 2024-07-13
222618](https://github.com/user-attachments/assets/94a0f59f-4bcf-4356-99ae-d0ae81fbeb6f)

   
3. **Personalized Health Tips**:
 
![Screenshot 2024-07-13
222648](https://github.com/user-attachments/assets/4d8102d7-aabf-464f-a011-82ff566da31a)

.vscode/c_cpp_properties.json

@@ -0,0 +1,18 @@
+{
+  "configurations": [
+    {
+      "name": "windows-gcc-x86",
+      "includePath": [
+        "${workspaceFolder}/**"
+      ],
+      "compilerPath": "C:/MinGW/bin/gcc.exe",
+      "cStandard": "${default}",
+      "cppStandard": "${default}",
+      "intelliSenseMode": "windows-gcc-x86",
+      "compilerArgs": [
+        ""
+      ]
+    }
+  ],
+  "version": 4
+}

.vscode/launch.json

@@ -1,15 +1,31 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "C/C++ Runner: Debug Session",
+      "type": "cppdbg",
+      "request": "launch",
+      "args": [],
+      "stopAtEntry": false,
+      "externalConsole": true,
+      "cwd": "c:/Users/ACER/Documents/VSOC/50_days_50_web_project/public/Scroll Game Dark Run/Rock,Paper,Scissor",
+      "program": "c:/Users/ACER/Documents/VSOC/50_days_50_web_project/public/Scroll Game Dark Run/Rock,Paper,Scissor/build/Debug/outDebug",
+      "MIMode": "gdb",
+      "miDebuggerPath": "gdb",
+      "setupCommands": [
         {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
+          "description": "Enable pretty-printing for gdb",
+          "text": "-enable-pretty-printing",
+          "ignoreFailures": true
         }
-    ]
+      ]
+    }
+  ]
 }

.vscode/settings.json

@@ -1,3 +1,60 @@
 {
-    "liveServer.settings.port": 5502
+  "liveServer.settings.port": 5502,
+  "C_Cpp_Runner.cCompilerPath": "gcc",
+  "C_Cpp_Runner.cppCompilerPath": "g++",
+  "C_Cpp_Runner.debuggerPath": "gdb",
+  "C_Cpp_Runner.cStandard": "",
+  "C_Cpp_Runner.cppStandard": "",
+  "C_Cpp_Runner.msvcBatchPath": "C:/Program Files/Microsoft Visual Studio/VR_NR/Community/VC/Auxiliary/Build/vcvarsall.bat",
+  "C_Cpp_Runner.useMsvc": false,
+  "C_Cpp_Runner.warnings": [
+    "-Wall",
+    "-Wextra",
+    "-Wpedantic",
+    "-Wshadow",
+    "-Wformat=2",
+    "-Wcast-align",
+    "-Wconversion",
+    "-Wsign-conversion",
+    "-Wnull-dereference"
+  ],
+  "C_Cpp_Runner.msvcWarnings": [
+    "/W4",
+    "/permissive-",
+    "/w14242",
+    "/w14287",
+    "/w14296",
+    "/w14311",
+    "/w14826",
+    "/w44062",
+    "/w44242",
+    "/w14905",
+    "/w14906",
+    "/w14263",
+    "/w44265",
+    "/w14928"
+  ],
+  "C_Cpp_Runner.enableWarnings": true,
+  "C_Cpp_Runner.warningsAsError": false,
+  "C_Cpp_Runner.compilerArgs": [],
+  "C_Cpp_Runner.linkerArgs": [],
+  "C_Cpp_Runner.includePaths": [],
+  "C_Cpp_Runner.includeSearch": [
+    "*",
+    "**/*"
+  ],
+  "C_Cpp_Runner.excludeSearch": [
+    "**/build",
+    "**/build/**",
+    "**/.*",
+    "**/.*/**",
+    "**/.vscode",
+    "**/.vscode/**"
+  ],
+  "C_Cpp_Runner.useAddressSanitizer": false,
+  "C_Cpp_Runner.useUndefinedSanitizer": false,
+  "C_Cpp_Runner.useLeakSanitizer": false,
+  "C_Cpp_Runner.showCompilationTime": false,
+  "C_Cpp_Runner.useLinkTimeOptimization": false,
+  "C_Cpp_Runner.msvcSecureNoWarnings": false
 }

public/BMI_Calculator/index.html

@@ -8,16 +8,31 @@
     <meta name="author" content="Supritha">
     <link rel="stylesheet" href="style.css">
      <!-- =====BOX ICONS===== -->
-    <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
+     <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   </head>
   <body>
     <div class="bmi">
       <h2>Body Mass Index Calculator</h2>
-      <p class="text">Height in cm</p><input type="text" id="height">
-      <p class="text">Weight in kg</p><input type="text" id="weight">
-      <p id="result"></p><button id="btn">Calculate</button>
+      <p class="text">Height</p>
+        <select id="height-unit">
+            <option value="cm">cm</option>
+            <option value="feet">feet/inches</option>
+        </select>
+        <input type="text" id="height">
+        <p class="text">Weight</p>
+        <select id="weight-unit">
+            <option value="kg">kg</option>
+            <option value="lb">pounds</option>
+        </select>
+        <input type="text" id="weight">
+        <p id="result"></p><button id="btn">Calculate</button>
+        <div id="result"></div>
+        <div id="category"></div>
+        <div id="tips"></div>
     </div>
     <div class="chart">
+
       <table>
         <thead>
           <tr>
@@ -44,6 +59,7 @@ <h2>Body Mass Index Calculator</h2>
           </tr>
         </tbody>
       </table>
+      <canvas id="bmiChart"></canvas>
     </div>
     <script src="script.js"></script>
     <footer class="footer">

public/BMI_Calculator/script.js

@@ -1,8 +1,93 @@
 document.getElementById("btn").addEventListener("click", function() {
-	var height_val = document.getElementById('height').value;
-	var weight_val = document.getElementById('weight').value;
-	var bmi = weight_val / (height_val / 100 * height_val / 100);
-	var bmio = (bmi.toFixed(2));
+    var height = document.getElementById('height').value;
+    var weight = document.getElementById('weight').value;
+    var heightUnit = document.getElementById('height-unit').value;
+    var weightUnit = document.getElementById('weight-unit').value;
 
-	document.getElementById("result").innerHTML = "Your BMI is " + bmio;
-});
+    // Convert units to metric
+    if (heightUnit === 'feet') {
+        var parts = height.split('/');
+        if (parts.length === 2) {
+            var feet = parseInt(parts[0], 10);
+            var inches = parseInt(parts[1], 10);
+            height = (feet * 30.48) + (inches * 2.54);
+        } else {
+            alert("Please enter height in the format 'feet/inches', e.g., '5/8' for 5 feet 8 inches.");
+            return;
+        }
+    }
+    if (weightUnit === 'lb') {
+        weight = weight * 0.453592;
+    }
+
+    var bmi = weight / ((height / 100) * (height / 100));
+    var bmio = bmi.toFixed(2);
+
+    document.getElementById("result").innerHTML = "Your BMI is " + bmio;
+
+    var category = getBMICategory(bmio);
+    document.getElementById("category").innerHTML = "BMI Category: " + category;
+
+    var tips = getHealthTips(category);
+    document.getElementById("tips").innerHTML = "Health Tips: " + tips;
+
+    // Add BMI data to chart
+    addBMIdata(bmio);
+});
+
+function getBMICategory(bmi) {
+    if (bmi < 18.5) {
+        return "Underweight";
+    } else if (bmi >= 18.5 && bmi < 24.9) {
+        return "Normal weight";
+    } else if (bmi >= 25 && bmi < 29.9) {
+        return "Overweight";
+    } else {
+        return "Obesity";
+    }
+}
+
+function getHealthTips(category) {
+    switch (category) {
+        case "Underweight":
+            return "Consider eating more frequently, choose nutrient-rich foods, and try smoothies and shakes.";
+        case "Normal weight":
+            return "Maintain your current lifestyle and diet.";
+        case "Overweight":
+            return "Focus on a balanced diet and regular physical activity.";
+        case "Obesity":
+            return "Consult with a healthcare provider for personalized advice.";
+        default:
+            return "";
+    }
+}
+
+// Initialize chart
+var ctx = document.getElementById('bmiChart').getContext('2d');
+var bmiChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+        labels: [],
+        datasets: [{
+            label: 'BMI Over Time',
+            data: [],
+            borderColor: 'rgba(75, 192, 192, 1)',
+            borderWidth: 1,
+            fill: false
+        }]
+    },
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
+    }
+});
+
+function addBMIdata(bmi) {
+    var date = new Date().toLocaleDateString();
+    bmiChart.data.labels.push(date);
+    bmiChart.data.datasets[0].data.push(bmi);
+    bmiChart.update();
+}

public/BMI_Calculator/style.css

@@ -1,4 +1,3 @@
-/*===== GOOGLE FONTS =====*/
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
 
 body {
@@ -31,8 +30,8 @@ h2 {
 .text {
   text-align: center;
 }
-#weight,
-#height {
+#weight-unit,
+#height-unit {
   color: #222f3e;
   text-align: left;
   font-size: 20px;
@@ -42,6 +41,8 @@ h2 {
   border-radius: 7px;
   width: 200px;
   height: 35px;
+  height: 35px;
+  margin-top: 10px;
 }
 #weight:focus,
 #height:focus {
@@ -73,6 +74,8 @@ table {
   width: 650px;
   border-collapse: collapse;
   margin: 600px auto;
+  margin-top: 700px;
+  margin-bottom: 80px;
 }
 
 tr {
@@ -91,4 +94,17 @@ th {
   border: 1px solid #000;
   text-align: center;
   font-size: 18px;
+}
+
+#bmichart {
+  display: block;
+    box-sizing: border-box;
+    height: 759px;
+    width: 1519px;
+    margin-bottom: 80px;
+}
+
+#height, #weight {
+  height: 35px;
+  margin-top: 10px;
 }