HTML and CSS Reference
In-Depth Information
haversine(lat1, lon1, lat2, lon2);
This function returns a distance in miles, rounded to two decimal points.
The Haversine formula would usually return a distance in kilometers but for the purposes of this topic I have
altered it to return a distance in miles. This is all taken care of in the
geo.js
file.
You will use this function to calculate the distance between the user and each of the restaurant locations. Once you
have the distances, you will update the Locations page, adding a distance label under each of the locations.
Updating the Locations Page
First you need to add an element that will hold the distance label for each location, using the following steps.
The code for this exercise can be found in folder 3.
1.
Open the
locations.html
file in your text editor.
2.
Underneath the opening hours for location 1, create a new
<div>
element with the ID
location1dis-
tance
.
<h2>Opening Hours:</h2>
<p>
<time itemprop="openingHours"
datetime="Mo-Fr 12:00-22:00">
Mon-Fri: 12:00 - 22:00
</time><br>
<time itemprop="openingHours"
datetime="Sa,Su 11:00-23:00">
Sat-Sun: 11:00 - 23:00
</time>
</p>
<div id="location1distance"></div>
</section>
3.
Now do the same for location 2, this time using the ID
location2distance
.
<div id="location2distance"></div>
4.
Finally, add a
<div>
element for location 3 with the ID
location3distance
.
<div id="location3distance"></div>
5.
Save the
locations.html
file.
