Add real-time calculation for dx based on length and resolution inputs

reactor.html

@@ -102,6 +102,19 @@
             } else {
                 $(".PFR").show();
             }
+
+            const updateDx = () => {
+                const length = parseFloat($("#node-input-length").val()) || 0;
+                const resolution = parseFloat($("#node-input-resolution_L").val()) || 1;
+                const dx = resolution > 0 ? (length / resolution).toFixed(6) : "N/A";
+                $("#dx-output").text(dx + " m");
+            };
+
+            // Set up event listeners for real-time updates
+            $("#node-input-length, #node-input-resolution_L").on("change keyup", updateDx);
+            
+            // Initial calculation
+            updateDx();
         },
         oneditsave: function() {
             // save logger fields
@@ -144,6 +157,10 @@
         <label for="node-input-resolution_L"><i class="fa fa-tag"></i> Resolution</label>
         <input type="text" id="node-input-resolution_L" placeholder="#">
     </div>
+    <div class="form-row PFR">
+        <label for="node-input-dx"><i class="fa fa-tag"></i> dx (length / resolution) [m]</label>
+        <span id="dx-output" style="display: inline-block; padding: 8px; font-weight: bold; color: #333;">--</span>
+    </div>
     <h3> Internal mass transfer calculation (optional) </h3>
     <div class="form-row">
         <label for="node-input-kla"><i class="fa fa-tag"></i> kLa [d-1]</label>