HTML and CSS Reference
In-Depth Information
5.
Add code to this new block that will add the
nearest
class to the
<section>
element with the ID
loc-
ation2
.
function findNearest(lat, lon) {
...
// Find the smallest distance.
if (d1 <= d2 && d1 <= d3) {
// Location 1
document.getElementById(“location1").className = “nearest";
} else if (d2 <= d1 && d2 <= d3) {
// Location 2
document.getElementById(“location2").className = “nearest";
}
}
6.
Finally, add an
else
clause to the end of your
if
statement that contains some code that adds the
nearest
class to the
<section>
element with the ID
location3
. If
d1
and
d2
are not the smallest,
you can assume that
d3
(location3) is your winner, so there is no need for another condition here.
function findNearest(lat, lon) {
...
// Find the smallest distance.
if (d1 <= d2 && d1 <= d3) {
// Location 1
document.getElementById(“location1").className = “nearest";
} else if (d2 <= d1 && d2 <= d3) {
// Location 2
document.getElementById(“location2").className = “nearest";
}
else {
// Location 3
document.getElementById(“location3").className = “nearest";
}
}
7.
Save the
geolocation.js
file.
That's it! Your Locations page is now complete. Open it in your web browser and take a look. The stylesheet will
take care of adding some styling to the nearest location, as shown in Figure 13-5.
