BMI-calculator (#456)

Updating the UI I have changes the UI and also added placeholders. ![image](https://github.com/user-attachments/assets/c876dacc-a6e1-421c-a43c-8c2d121d3fe3) ![image](https://github.com/user-attachments/assets/19afa3cd-dbcb-4571-9306-2a71284e0b63)
dhairyagothi · Jan 10, 2025 · 9333c9d · 9333c9d
2 parents 834d820 + 955a17c
commit 9333c9d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 30 deletions.
diff --git a/public/BMI_Calculator/index.html b/public/BMI_Calculator/index.html
@@ -13,20 +13,24 @@
   </head>
   <body>
     <div class="bmi">
-      <h2>Body Mass Index Calculator</h2>
-      <p class="text">Height</p>
-        <select id="height-unit">
-            <option value="cm">cm</option>
-            <option value="feet">feet/inches</option>
+      <h2 style="color: azure;font-weight: bold;font-size:40px">Body Mass Index Calculator</h2>
+      <p class="text" style="font-weight: bold;font-size:20px">Height</p>
+        <select id="height-unit" style="text-align: center;">
+            <option value="cm" >Centimeter</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>
+        <input type="text" id="height" title="Enter your height" placeholder="Height">
+        <br>
+        <br>
+
+        <p class="text" style="font-weight: bold;font-size:20px">Weight</p>
+        <select id="weight-unit" style="text-align: center;">
+            <option value="kg">Kilogram</option>
+            <option value="lb">Pounds</option>
         </select>
-        <input type="text" id="weight">
+        <input type="text" id="weight" title="Enter your weight" placeholder="Weight">
         <p id="result"></p><button id="btn">Calculate</button>
+        <br>
         <div id="result"></div>
         <div id="category"></div>
         <div id="tips"></div>
@@ -59,7 +63,7 @@ <h2>Body Mass Index Calculator</h2>
           </tr>
         </tbody>
       </table>
-      <canvas id="bmiChart"></canvas>
+      <canvas id="bmiChart" style="background-color: black;"></canvas>
     </div>
     <script src="script.js"></script>
     <footer class="footer">

diff --git a/public/BMI_Calculator/script.js b/public/BMI_Calculator/script.js
@@ -70,17 +70,20 @@ var bmiChart = new Chart(ctx, {
         labels: [],
         datasets: [{
             label: 'BMI Over Time',
+
             data: [],
-            borderColor: 'rgba(75, 192, 192, 1)',
+            borderColor: 'rgb(254, 250, 250)',
             borderWidth: 1,
-            fill: false
+            fill: true,
         }]
     },
     options: {
         scales: {
             y: {
-                beginAtZero: true
-            }
+                beginAtZero: true,
+            },
+
+
         }
     }
 });

diff --git a/public/BMI_Calculator/style.css b/public/BMI_Calculator/style.css
@@ -5,20 +5,22 @@ body {
   padding: 0;
   text-align: center;
   font-family: "Montserrat";
-  background: rgb(34, 193, 195);
+  /* background: rgb(34, 193, 195); */
   background: linear-gradient(
     0deg,
-    rgba(34, 193, 195, 1) 0%,
-    rgba(253, 68, 45, 1) 100%
+    #cc5333 0%,
+    #23074d 100%
+
   );
   min-height: 100vh;
 }
 .bmi {
+  color: white;
   width: 350px;
   position: absolute;
   top: 50%;
   left: 50%;
-  background-color: #fff;
+  background-color: black;
   transform: translate(-50%, -50%);
   padding: 20px;
   border-radius: 10px;
@@ -32,13 +34,13 @@ h2 {
 }
 #weight-unit,
 #height-unit {
-  color: #222f3e;
+  color: black;
   text-align: left;
   font-size: 20px;
   font-weight: 200;
   outline: none;
   border: 1px solid black;
-  border-radius: 7px;
+  border-radius: 10px;
   width: 200px;
   height: 35px;
   height: 35px;
@@ -50,18 +52,18 @@ h2 {
   transition: 0.5s;
 }
 #result {
-  color: #341f97;
+  color: white;
 }
 #btn {
   font-family: inherit;
   margin-top: 10px;
-  border: none;
+  border: blue;
   color: #000;
-  background: lightblue;
+  background: gainsboro;
   width: 150px;
   padding: 10px;
-  border-radius: 30px;
-  outline: none;
+  border-radius: 30px ;
+  outline: white;
   cursor: pointer;
   transition: 0.5s;
 }
@@ -79,12 +81,13 @@ table {
 }
 
 tr {
-  background: lightblue;
+  background: rgb(68, 38, 105);
+  color: white;
 }
 
 th {
-  background: #fff;
-  color: #000;
+  background: #0d0101;
+  color: #fffbfb;
   font-weight: bold;
 }
 
@@ -102,9 +105,13 @@ th {
     height: 759px;
     width: 1519px;
     margin-bottom: 80px;
+
 }
 
 #height, #weight {
   height: 35px;
   margin-top: 10px;
+}
+.footer_social{
+  color: white;
 }