Adaris Wiki:Map Tools: Difference between revisions

Revision as of 18:37, 7 May 2026

 Pixel calculator loading...

 <label for="pixelToMileInput">Pixels:</label>

 <input id="pixelToMileInput" type="number" placeholder="Enter pixels">

Distance: 0 mi

@@ Line 3: / Line 3: @@
 </div>
-<div id="pixel-to-mile-calculator" style="max-width: 400px; padding: 1em; border: 1px solid #aaa; background: #f9f5ec;">
+<div id="pixel-to-mile-calculator" class="adaris-tool-box">
-   <label for="pixelInput"><strong>Pixels:</strong></label><br>
+   <label for="pixelToMileInput"><strong>Pixels:</strong></label><br>
-   <input id="pixelInput" type="number" style="width: 100%; margin-top: 0.4em;" placeholder="Enter pixels">
+   <input id="pixelToMileInput" type="number" placeholder="Enter pixels">
-   <p style="margin-top: 1em;">
+   <p>
      <strong>Distance:</strong>
-     <span id="mileOutput">0 mi</span>
+     <span id="pixelToMileOutput">0 mi</span>
    </p>
 </div>
-<script>
-document.getElementById('pixelInput').addEventListener('input', function () {
-  var pixels = parseFloat(this.value);
-  if (isNaN(pixels)) {
-    document.getElementById('mileOutput').textContent = '0 mi';
-    return;
-  }
-  var miles = (pixels / 1000) * 50;
-  document.getElementById('mileOutput').textContent = Math.round(miles) + ' mi';
-});
-</script>