|
|
| (2 intermediate revisions by the same user not shown) |
| Line 3: |
Line 3: |
| </div> | | </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"></div> |
| <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>
| |
Pixel calculator loading...
