Merge pull request #207 from supr1yo/BMI-Calculator

[KWoC] Refactor: BMI Calculator
shrey141102 · Jan 6, 2024 · 2bccb41 · 2bccb41
2 parents 53a3928 + 534b8e0
commit 2bccb41
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/BMI calculator/index.html b/BMI calculator/index.html
@@ -17,17 +17,17 @@ <h1 class="popupheading2">38.3</h1>
     <div class="mainContainer">
     <h1 class="heading">Body Mass</h1>
     <h1 class="heading1">Index</h1>
-    <h1 class="subheading">Gender:</h1>
+    <h1 class="subheading">Gender</h1>
     <select name="gender" id="gender">
-        <option value="Male">Male</option>
-        <option value="Female">Female</option>
+        <option value="Male">Male ♂️</option>
+        <option value="Female">Female ♀️</option>
     </select>
-    <h1 class="subheading">Height:</h1>
-    <input class="heightInput" placeholder="Enter your height in cm" type="number"/><span class="symbol">CM</span>
+    <h1 class="subheading">Height <span id="symbol">(cm)</span></h1> 
+    <input class="heightInput" placeholder="Enter in centimeter" type="number"/>
     <div class="ageAndweightcontainer">
         <div class="EachContainer">
             <h1 class="subheading">Age</h1>
-            <input class="AgeInput" type="number"/>
+            <input class="AgeInput" placeholder="in years" type="number"/>
         </div>
         <div class="EachContainer">
             <h1 class="subheading">Weight</h1>

diff --git a/BMI calculator/style.css b/BMI calculator/style.css
@@ -1,3 +1,15 @@
+/* Disable increment/decrement arows from Number input */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type=number]{
+  -moz-appearance: textfield;
+}
+
+
 body{
     display: flex;
     align-items: center;
@@ -66,6 +78,10 @@ body{
    margin: 0px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
+#symbol {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 18px;
+}
 .heading{
     margin-top: 10px;
     font-size: 40px;
@@ -78,10 +94,10 @@ body{
     font-weight: 100;
 }
 .subheading{
-    font-size: 30px;
-    text-decoration: underline;
-    font-weight: 100;
+    font-size: 25px;
+    font-weight: 80;
 }
+
 select {
     cursor: pointer;
     display: inline-block;
@@ -100,13 +116,9 @@ select {
     font-size: 20px;
     color: black;
   }
-  .symbol{
-    margin-left: 20px;
-    font-size: 30px;
-    font-weight: 100;
-  }
+
   .heightInput{
-    width: 80%;
+    width: 95%; 
     border: 2px solid rgba(255, 0, 0, 0.386);
     height: 40px;
     border-radius: 10px;
@@ -125,8 +137,10 @@ select {
     align-items: center;
   }
   .WeightInput,.AgeInput{
-    font-size: 60px;
+    font-size: 20px;
+    text-align: center;
     width: 50%;
+    height: 50px;
     border: 2px solid rgba(255, 0, 0, 0.386);
     border-radius: 10px;
   }