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>
<time itemprop="openingHours"
datetime="Mo-Fr 12:00-22:00">
Mon-Fri: 12:00 - 22:00
<time itemprop="openingHours"
datetime="Sa,Su 11:00-23:00">
Sat-Sun: 11:00 - 23:00
<div id="location1distance"></div>
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.
Search WWH ::

Custom Search