Skip to content

Commit ec4b8a7

Browse files
aaronaxvigaaronaxvig
committed
Make things look nicer
1 parent b812ab0 commit ec4b8a7

File tree

4 files changed

+4644
-17
lines changed

4 files changed

+4644
-17
lines changed

‎css/styles.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.menu ul {
2+
list-style-type: none;
3+
}
4+
.menu li {
5+
display: inline;
6+
}

‎data.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<link rel="stylesheet" href="css/styles.css">
5+
</head>
36
<style type="text/css">
47
td
58
{

‎index.html

+33-17
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<link rel="stylesheet" href="css/styles.css">
5+
</head>
36
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
47
<script src="js/LoadData.js"></script>
8+
<script src="js/moment.js"></script>
59
<script>
610

711
function start() {
8-
document.getElementById("status").innerHTML = "loading data";
12+
document.getElementById("status").innerHTML = "Loading data";
913
loadAllData()
1014
.then(function() {
1115
getLocation();
1216
});
1317
}
1418

1519
function getLocation() {
16-
document.getElementById("status").innerHTML = "getting location";
20+
document.getElementById("status").innerHTML = "Getting location";
1721
if (navigator.geolocation) {
1822
navigator.geolocation.getCurrentPosition(showPosition, showError);
1923
}
@@ -33,11 +37,12 @@
3337

3438
var nearest = turf.nearestPoint(currentLocation, data);
3539

36-
document.getElementById("location").innerHTML = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude;
40+
document.getElementById("latitude").innerHTML = position.coords.latitude.toFixed(5);
41+
document.getElementById("longitude").innerHTML = position.coords.longitude.toFixed(5);
3742
document.getElementById("nearest").innerHTML = nearest.properties.name;
38-
document.getElementById("distance").innerHTML = nearest.properties.distanceToPoint / 1.852 + " nautical miles";
39-
40-
document.getElementById("status").innerHTML = "Updated at " + new Date(position.timestamp).toString();
43+
document.getElementById("distance").innerHTML = (nearest.properties.distanceToPoint / 1.852).toFixed(2) + " nautical miles";
44+
var now = new moment();
45+
document.getElementById("status").innerHTML = "Updated at " + now.format("HH:mm:ss");
4146
}
4247

4348
function showError(error) {
@@ -66,16 +71,27 @@
6671
<li><a href="data.html">Data</a></li>
6772
</ul>
6873
</nav>
69-
<div>Status: </div>
70-
<div id="status"></div>
71-
<br />
72-
<div>Current location: </div>
73-
<div id="location"></div>
74-
<br />
75-
<div>Nearest marker: </div>
76-
<div id="nearest"></div>
77-
<br />
78-
<div>Distance: </div>
79-
<div id="distance"></div>
74+
<div style='border: 3px solid black; border-radius: 10px; text-align: center; display: inline-block; padding: 10px'>
75+
<h2>Nearest marker</h2>
76+
<h1 id="nearest"></h1>
77+
</div>
78+
<table>
79+
<tr>
80+
<td>Status:</td>
81+
<td id="status"></td>
82+
</tr>
83+
<tr>
84+
<td>Latitude:</td>
85+
<td id="latitude"></td>
86+
</tr>
87+
<tr>
88+
<td>Longitude:</td>
89+
<td id="longitude"></td>
90+
</tr>
91+
<tr>
92+
<td>Distance to nearest mile mark:</td>
93+
<td id="distance"></td>
94+
</tr>
95+
</table>
8096
</body>
8197
</html>

0 commit comments

Comments
 (0)