Adaris Wiki:Map Tools: Difference between revisions
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
Pixel calculator loading... | Pixel calculator loading... | ||
</div> | </div> | ||
<div id="pixel-to-mile-calculator" style="max-width: 400px; padding: 1em; border: 1px solid #aaa; background: #f9f5ec;"> | |||
<label for="pixelInput"><strong>Pixels:</strong></label><br> | |||
<input id="pixelInput" type="number" style="width: 100%; margin-top: 0.4em;" placeholder="Enter pixels"> | |||
<p style="margin-top: 1em;"> | |||
<strong>Distance:</strong> | |||
<span id="mileOutput">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> | |||
Revision as of 18:34, 7 May 2026
Pixel calculator loading...
<label for="pixelInput">Pixels:</label>
<input id="pixelInput" type="number" style="width: 100%; margin-top: 0.4em;" placeholder="Enter pixels">
Distance: 0 mi
<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>