trevorc/deg.html

## deg.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>coordinate calculator</title>
  <style>h1 { font-size: 1.1em; }</style>
</head>
<body>
  <h1>Convert between degrees, minutes, and seconds and decimal degrees</h1>
  <table id="calc">
    <tr>
      <th>x:</th>
      <td id="xminsec">
        <input size="3" value="0" tabindex="1">&#176;
        <input size="3" value="0" tabindex="2">&prime;
        <input size="4" value="0.000" tabindex="3">&Prime;
        <select tabindex="4">
          <option value="-1" selected>W</option>
          <option value="1">E</option>
        </select>
      </td>
      <td rowspan="2" style="width: 1em; text-align: center;">=</td>
      <td><input id="xdec" size="7" value="0.000" tabindex="9">&#176;</td>
    </tr>
    <tr>
      <th>y:</th>
      <td id="yminsec">
        <input size="3" value="0" tabindex="5">&#176;
        <input size="3" value="0" tabindex="6">&prime;
        <input size="4" value="0.000" tabindex="7">&Prime;
        <select tabindex="8">
          <option value="-1">S</option>
          <option value="1" selected>N</option>
        </select>
      </td>
      <td><input id="ydec" size="7" value="0.000" tabindex="10">&#176;</td>
    </tr>
  </table>
  <p><input type="button" id="curloc" value="Set to my current location"></p>
  <script>
    var xMinSec, xDec, yMinSec, yDec;

    function coerce(n) { return isNaN(n) ? 0 : n; }

    function getMinSec(updateX) {
      var children = (updateX ? xMinSec : yMinSec).children;
      return { deg: children[0]
             , min: children[1]
             , sec: children[2]
             , sig: children[3]
             };
    }

    function updateMinSec(updateX) {
      var dec = updateX ? xDec : yDec;
      var ms  = getMinSec(updateX);
      var src = coerce(parseFloat(dec.value));
      var deg = Math.abs(src);
      var min = Math.abs(deg - Math.floor(deg)) * 60;
      var sec = Math.abs(min - Math.floor(min)) * 60;
      ms.deg.value         = Math.floor(deg);
      ms.min.value         = Math.floor(min);
      ms.sec.value         = sec.toFixed(3);
      ms.sig.selectedIndex = src < 0 ? 0 : 1;
    }

    function updateDec(updateX) {
      var dec = updateX ? xDec : yDec;
      var ms  = getMinSec(updateX);
      var res = parseInt(ms.sig[ms.sig.selectedIndex].value) *
              ( coerce(parseInt(ms.deg.value))
              + coerce(parseInt(ms.min.value))   / 60
              + coerce(parseFloat(ms.sec.value)) / 3600
              );
      dec.value = res.toFixed(3);
    }

    function setPoint(position) {
      xDec.value = position.coords.longitude;
      yDec.value = position.coords.latitude;
      updateMinSec(true);
      updateMinSec(false);
    }

    function update(evt) {
      var target   = evt.target;
      var updateX  = target === xDec || target.parentNode === xMinSec;
      (target === xDec || target === yDec ?
        updateMinSec : updateDec)(updateX);
    }

    function queryDom() {
      xMinSec = document.getElementById('xminsec');
      xDec    = document.getElementById('xdec');
      yMinSec = document.getElementById('yminsec');
      yDec    = document.getElementById('ydec');
    }

    function bindEvents() {
      var calc   = document.getElementById('calc');
      var button = document.getElementById('curloc');
      calc.addEventListener('keyup',  update);
      calc.addEventListener('change', update);
      if (navigator.geolocation) button.addEventListener('click', function() {
        navigator.geolocation.getCurrentPosition(setPoint);
      });
    }

    window.addEventListener('load', function() {
      queryDom();
      bindEvents();
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>coordinate calculator</title>
	<style>h1 { font-size: 1.1em; }</style>
	</head>
	<body>
	<h1>Convert between degrees, minutes, and seconds and decimal degrees</h1>
	<table id="calc">
	<tr>
	<th>x:</th>
	<td id="xminsec">
	<input size="3" value="0" tabindex="1">°
	<input size="3" value="0" tabindex="2">′
	<input size="4" value="0.000" tabindex="3">″
	<select tabindex="4">
	<option value="-1" selected>W</option>
	<option value="1">E</option>
	</select>
	</td>
	<td rowspan="2" style="width: 1em; text-align: center;">=</td>
	<td><input id="xdec" size="7" value="0.000" tabindex="9">°</td>
	</tr>
	<tr>
	<th>y:</th>
	<td id="yminsec">
	<input size="3" value="0" tabindex="5">°
	<input size="3" value="0" tabindex="6">′
	<input size="4" value="0.000" tabindex="7">″
	<select tabindex="8">
	<option value="-1">S</option>
	<option value="1" selected>N</option>
	</select>
	</td>
	<td><input id="ydec" size="7" value="0.000" tabindex="10">°</td>
	</tr>
	</table>
	<p><input type="button" id="curloc" value="Set to my current location"></p>
	<script>
	var xMinSec, xDec, yMinSec, yDec;

	function coerce(n) { return isNaN(n) ? 0 : n; }

	function getMinSec(updateX) {
	var children = (updateX ? xMinSec : yMinSec).children;
	return { deg: children[0]
	, min: children[1]
	, sec: children[2]
	, sig: children[3]
	};
	}

	function updateMinSec(updateX) {
	var dec = updateX ? xDec : yDec;
	var ms = getMinSec(updateX);
	var src = coerce(parseFloat(dec.value));
	var deg = Math.abs(src);
	var min = Math.abs(deg - Math.floor(deg)) * 60;
	var sec = Math.abs(min - Math.floor(min)) * 60;
	ms.deg.value = Math.floor(deg);
	ms.min.value = Math.floor(min);
	ms.sec.value = sec.toFixed(3);
	ms.sig.selectedIndex = src < 0 ? 0 : 1;
	}

	function updateDec(updateX) {
	var dec = updateX ? xDec : yDec;
	var ms = getMinSec(updateX);
	var res = parseInt(ms.sig[ms.sig.selectedIndex].value) *
	( coerce(parseInt(ms.deg.value))
	+ coerce(parseInt(ms.min.value)) / 60
	+ coerce(parseFloat(ms.sec.value)) / 3600
	);
	dec.value = res.toFixed(3);
	}

	function setPoint(position) {
	xDec.value = position.coords.longitude;
	yDec.value = position.coords.latitude;
	updateMinSec(true);
	updateMinSec(false);
	}

	function update(evt) {
	var target = evt.target;
	var updateX = target === xDec \|\| target.parentNode === xMinSec;
	(target === xDec \|\| target === yDec ?
	updateMinSec : updateDec)(updateX);
	}

	function queryDom() {
	xMinSec = document.getElementById('xminsec');
	xDec = document.getElementById('xdec');
	yMinSec = document.getElementById('yminsec');
	yDec = document.getElementById('ydec');
	}

	function bindEvents() {
	var calc = document.getElementById('calc');
	var button = document.getElementById('curloc');
	calc.addEventListener('keyup', update);
	calc.addEventListener('change', update);
	if (navigator.geolocation) button.addEventListener('click', function() {
	navigator.geolocation.getCurrentPosition(setPoint);
	});
	}

	window.addEventListener('load', function() {
	queryDom();
	bindEvents();
	});
	</script>
	</body>
	</html>