Feat: Add visual feedback on conversion

Author: mazenAliRushdi

script.js

@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const milligramsInput = document.getElementById('milligrams');
     const convertButton = document.getElementById('convertButton');
     const clearButton = document.getElementById('clearButton');
+    const highlightDuration = 300; // milliseconds
 
     function saveConversion() {
         localStorage.setItem('lastKilograms', kilogramsInput.value);
@@ -25,7 +26,6 @@ document.addEventListener('DOMContentLoaded', function() {
         if (lastPounds !== null) poundsInput.value = lastPounds;
         if (lastMilligrams !== null) milligramsInput.value = lastMilligrams;
 
-        // Trigger input events to perform conversions on load if values are present
         if (lastKilograms) kilogramsInput.dispatchEvent(new Event('input'));
         else if (lastGrams) gramsInput.dispatchEvent(new Event('input'));
         else if (lastPounds) poundsInput.dispatchEvent(new Event('input'));
@@ -39,16 +39,26 @@ document.addEventListener('DOMContentLoaded', function() {
         if (elementToExclude !== milligramsInput) milligramsInput.value = '';
     }
 
+    function highlightInput(inputElement) {
+        inputElement.classList.add('conversion-highlight');
+        setTimeout(() => {
+            inputElement.classList.remove('conversion-highlight');
+        }, highlightDuration);
+    }
+
     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);
+            highlightInput(gramsInput);
+            highlightInput(poundsInput);
+            highlightInput(milligramsInput);
             saveConversion();
         } else {
-            saveConversion(); // Still save even if input is cleared
+            saveConversion();
         }
     });
 
@@ -59,6 +69,9 @@ document.addEventListener('DOMContentLoaded', function() {
             kilogramsInput.value = (g / 1000).toFixed(2);
             poundsInput.value = (g * 0.00220462).toFixed(2);
             milligramsInput.value = (g * 1000).toFixed(2);
+            highlightInput(kilogramsInput);
+            highlightInput(poundsInput);
+            highlightInput(milligramsInput);
             saveConversion();
         } else {
             saveConversion();
@@ -72,6 +85,9 @@ document.addEventListener('DOMContentLoaded', function() {
             kilogramsInput.value = (lbs / 2.20462).toFixed(2);
             gramsInput.value = (lbs / 0.00220462).toFixed(2);
             milligramsInput.value = (lbs * 453592.37).toFixed(2);
+            highlightInput(kilogramsInput);
+            highlightInput(gramsInput);
+            highlightInput(milligramsInput);
             saveConversion();
         } else {
             saveConversion();
@@ -85,6 +101,9 @@ document.addEventListener('DOMContentLoaded', function() {
             kilogramsInput.value = (mg / 1000000).toFixed(2);
             gramsInput.value = (mg / 1000).toFixed(2);
             poundsInput.value = (mg / 453592.37).toFixed(2);
+            highlightInput(kilogramsInput);
+            highlightInput(gramsInput);
+            highlightInput(poundsInput);
             saveConversion();
         } else {
             saveConversion();
@@ -100,7 +119,7 @@ document.addEventListener('DOMContentLoaded', function() {
         gramsInput.value = '';
         poundsInput.value = '';
         milligramsInput.value = '';
-        saveConversion(); // Save empty values to clear local storage on clear
+        saveConversion();
     });
 
     loadLastConversion();

style.css

@@ -22,7 +22,7 @@ h1 {
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
-    gap: 20px; /* Adjusted gap to accommodate more fields */
+    gap: 20px;
     width: 400px;
     animation: fadeIn 0.5s ease-out;
 }
@@ -48,15 +48,16 @@ label {
     font-weight: 500;
     color: #495057;
     font-size: 1.1em;
-    width: 150px; /* Adjusted label width */
+    width: 150px;
 }
 
 input[type="number"] {
     padding: 12px;
     border: 1px solid #ced4da;
     border-radius: 8px;
-    width: 220px; /* Adjusted input width */
+    width: 220px;
     font-size: 1.1em;
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Added transition for smoother highlight */
 }
 
 input[type="number"]:focus {
@@ -65,6 +66,11 @@ input[type="number"]:focus {
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
+.conversion-highlight {
+    background-color: #e9ecef; /* Light gray background for highlight */
+    border-color: #007bff !important; /* Highlight border color */
+}
+
 button {
     padding: 14px 28px;
     background-color: #007bff;