Feat: Implement conversion for grams and milligrams with real-time updates

Author: mazenAliRushdi

index.html

@@ -10,13 +10,21 @@ <h1>Weight Converter</h1>
 
     <div class="container">
         <div>
-            <label for="kilograms">Kilograms:</label>
+            <label for="kilograms">Kilograms (kg):</label>
             <input type="number" id="kilograms">
         </div>
         <div>
-            <label for="pounds">Pounds:</label>
+            <label for="grams">Grams (g):</label>
+            <input type="number" id="grams">
+        </div>
+        <div>
+            <label for="pounds">Pounds (lbs):</label>
             <input type="number" id="pounds">
         </div>
+        <div>
+            <label for="milligrams">Milligrams (mg):</label>
+            <input type="number" id="milligrams">
+        </div>
         <button id="convertButton">Convert</button>
         <button id="clearButton">Clear</button>
     </div>

script.js

@@ -1,40 +1,69 @@
 // script.js
 document.addEventListener('DOMContentLoaded', function() {
     const kilogramsInput = document.getElementById('kilograms');
+    const gramsInput = document.getElementById('grams');
     const poundsInput = document.getElementById('pounds');
+    const milligramsInput = document.getElementById('milligrams');
     const convertButton = document.getElementById('convertButton');
     const clearButton = document.getElementById('clearButton');
 
-    convertButton.addEventListener('click', function() {
-        const kilograms = parseFloat(kilogramsInput.value);
-        if (!isNaN(kilograms)) {
-            const pounds = kilograms * 2.20462;
-            poundsInput.value = pounds.toFixed(2);
-        } else {
-            poundsInput.value = '';
+    function clearAllInputsExcept(elementToExclude) {
+        if (elementToExclude !== kilogramsInput) kilogramsInput.value = '';
+        if (elementToExclude !== gramsInput) gramsInput.value = '';
+        if (elementToExclude !== poundsInput) poundsInput.value = '';
+        if (elementToExclude !== milligramsInput) milligramsInput.value = '';
+    }
+
+    kilogramsInput.addEventListener('input', function() {
+        clearAllInputsExcept(kilogramsInput);
+        const kg = parseFloat(kilogramsInput.value);
+        if (!isNaN(kg)) {
+            gramsInput.value = (kg * 1000).toFixed(2);
+            poundsInput.value = (kg * 2.20462).toFixed(2);
+            milligramsInput.value = (kg * 1000000).toFixed(2);
+        }
+    });
+
+    gramsInput.addEventListener('input', function() {
+        clearAllInputsExcept(gramsInput);
+        const g = parseFloat(gramsInput.value);
+        if (!isNaN(g)) {
+            kilogramsInput.value = (g / 1000).toFixed(2);
+            poundsInput.value = (g * 0.00220462).toFixed(2);
+            milligramsInput.value = (g * 1000).toFixed(2);
         }
     });
 
     poundsInput.addEventListener('input', function() {
-        const pounds = parseFloat(poundsInput.value);
-        if (!isNaN(pounds)) {
-            const kilograms = pounds / 2.20462;
-            kilogramsInput.value = kilograms.toFixed(2);
-        } else {
-            kilogramsInput.value = '';
+        clearAllInputsExcept(poundsInput);
+        const lbs = parseFloat(poundsInput.value);
+        if (!isNaN(lbs)) {
+            kilogramsInput.value = (lbs / 2.20462).toFixed(2);
+            gramsInput.value = (lbs / 0.00220462).toFixed(2);
+            milligramsInput.value = (lbs * 453592.37).toFixed(2);
         }
     });
 
-    kilogramsInput.addEventListener('input', function() {
-        poundsInput.value = ''; // Clear the other input when one is being typed into
+    milligramsInput.addEventListener('input', function() {
+        clearAllInputsExcept(milligramsInput);
+        const mg = parseFloat(milligramsInput.value);
+        if (!isNaN(mg)) {
+            kilogramsInput.value = (mg / 1000000).toFixed(2);
+            gramsInput.value = (mg / 1000).toFixed(2);
+            poundsInput.value = (mg / 453592.37).toFixed(2);
+        }
     });
 
-    poundsInput.addEventListener('input', function() {
-        kilogramsInput.value = ''; // Clear the other input when one is being typed into
+    convertButton.addEventListener('click', function() {
+        // The input event listeners already handle the conversion in real-time.
+        // This button could be repurposed for something else or removed.
+        alert("Conversions are now real-time as you type!");
     });
 
     clearButton.addEventListener('click', function() {
         kilogramsInput.value = '';
+        gramsInput.value = '';
         poundsInput.value = '';
+        milligramsInput.value = '';
     });
 });

style.css

@@ -4,7 +4,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 5px; /* Changed to 5px */
+    padding-top: 5px;
     background-color: #f8f9fa;
 }
 
@@ -22,7 +22,7 @@ h1 {
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
-    gap: 25px;
+    gap: 20px; /* Adjusted gap to accommodate more fields */
     width: 400px;
     animation: fadeIn 0.5s ease-out;
 }
@@ -48,13 +48,14 @@ label {
     font-weight: 500;
     color: #495057;
     font-size: 1.1em;
+    width: 150px; /* Adjusted label width */
 }
 
 input[type="number"] {
     padding: 12px;
     border: 1px solid #ced4da;
     border-radius: 8px;
-    width: 200px;
+    width: 220px; /* Adjusted input width */
     font-size: 1.1em;
 }