Added style, units as mph

master
Keith Irwin 2019-02-21 20:07:06 -05:00
parent bf50194a10
commit 1c22e87acd
No known key found for this signature in database
GPG Key ID: 7A2D6993A44010AA
3 changed files with 30 additions and 10 deletions

View File

@ -1,12 +1,12 @@
<html> <html>
<head> <head>
<title>Spedometer</title> <title>Spedometer</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div id="speedometer"> <div id="speed">0.0</div>
<span id="speed"></span> <div id="units">m.p.h.</div>
</div>
<script type="application/javascript" src="main.js"></script> <script type="application/javascript" src="main.js"></script>

18
main.js
View File

@ -1,16 +1,20 @@
'use strict'; 'use strict';
const speedometer = document.getElementById('speedometer') const speedDiv = document.getElementById('speed')
const speedSpan = document.getElementById('speed')
// Check for API // Check for API
if (!'geolocation' in navigator) { if (!'geolocation' in navigator) {
alert('No geolocation API available') alert('No geolocation API available')
speedometer.innerHTML = 'No API' speedDiv.innerHTML = 'No API'
} else { } else {
const WID = navigator.geolocation.watchPosition( function(loc) {
console.log(JSON.stringify(loc.coords.speed)) const WID = navigator.geolocation.watchPosition( function (loc) {
//alert('speed:',loc.coords.speed) // got speed
if (loc.coords.speed) speedSpan.innerHTML = loc.coords.speed if (loc.coords.speed) {
// convert to mph and display
speedDiv.innerHTML = (2.23693629205*loc.coords.speed).toFixed(1)
} else {
speedDiv.innerHTML = '0.0'
}
}) })
} }

16
style.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0;
background: #080808;
color: #FFF;
}
#speed, #units {
font-family: 'sans';
text-align: center;
}
#units {
font-size: 10vw;
}
#speed {
font-size: 30vw;
}