week2/index-final.html

<!DOCTYPE html>
<html>
	<head>
		<title>MyApp</title>
		<link rel="apple-touch-icon" href="appicon.png" />
		<link rel="apple-touch-startup-image" href="startup.png">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width, user-scalable=no" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

		<link href="style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
	
		<div class="whitebit"></div>

		<div class="bottombit">
			<p class="explanation">Intrepid spy, your next dead drop location is 37.4258709,-122.1712977.</p>
			<div id="button">Refresh GPS: <div id="timer"></div></div>

			<div class="area">
				<div class="box box1"><div class="latitude"></div></div>
				<div class="box box2"><div class="longitude"></div></div>
			</div>

		</div>

		<script type="text/javascript">
		function getLocation()
		  {
		  if (navigator.geolocation)
		    {
		    navigator.geolocation.getCurrentPosition(showPosition);
		    }
		  else{x.innerHTML="Geolocation is not supported by this browser.";}
		  }
		function showPosition(position)
		  {
		 $(".latitude").html("Latitude: " + position.coords.latitude.toFixed(7));
		 $(".longitude").html("Longitude: " + position.coords.longitude.toFixed(7));
		  }
		 getLocation();

		 $(function() {
		 	$("#button").click(function() {
		 		getLocation();
		 	});
		 });
		</script>
		<script type="text/javascript">
		var count=30;

		var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

		function timer()
		{
		  count=count-1;
		  if (count <= 0)
		  {
		     clearInterval(counter);
		     alert("Boom!");
			 document.getElementById('button').style.visibility = 'hidden';
		     return;
		  }

			document.getElementById("timer").innerHTML=count + " secs";
		}
		</script>
	</body>
</html>