The goal of this project is to build a tool to help users find the nearest food pantry location. Below is an example of what we're building. Click on the button below the table to see how it uses your location to list food pantries near you.

We start by constructing an HTML table and the button that will go beneath it. Below is a specification for these HTML elements.

1. There must be a table element.
2. The table element must have a class of food-pantries
3. The table must contain two immediate children: thead (the table header) and tbody (the body of the table).
4. The thead element must contain a single child. That child should be a tr element.
5. The tr element within the thead element should have five immediate children, each of them being a th element.
6. The th elements should each contain the title for a column (i.e., name, hours, address, phone number, and distance).
7. The tbody element must contain three immediate children. Those children should each be a tr element.
8. The tr elements within the tbody element each represent a row in the table. They should each contain five td elements, one for each column in the table. The content of each column should be as shown in the previous example.
9. The button is a sibling of the table (i.e., it is not a child of the table). It should contain the text: "Sort by Distance" and have class "sort".

Below is a diagram communicating the same ideas as above.

We now want to style the table and button to give it a more professional look. We will change the font, add some padding to the cells, and draw the borders. Add the following styles to the CSS.

1. Use the food-pantries class as a selector and style it to have font-family set to sans-serif, background-color set to white, and border-collapse set to collapse.
2. Style the td and th elements within the food-pantries class to have padding set to 5px and border set to 1px solid #ccc. Remember that selector ".x y" selects elements with tag y inside any element with class x and that you can use a comma to separate multiple selectors.
3. Style the button element using the sort class to have background-color set to darkblue, color set to white, margin-top set to 5px, padding set to 10px.

We now wish to make our application interactive. We want it to compute the distances to each food pantry and sort the table accordingly. Below, when you create variables and functions, please use the var keyword so that the automatic checking code will work.

1. Create a locations variable that stores the contents of the table as an array of objects. Each object should have the following properties: name, hours, address, phone, latitude, and longitude. You can get the latitude and longitude for each address by finding the address in Google Maps and right-clicking on the location to get the latitude and longitude.
2. Create a function called populateByDistanceUsingPosition that takes a position object and populates the table with the locations sorted by distance from the user's location. The position object will have a coords property that contains a latitude and longitude property. You can use the haversineDistanceMiles function to calculate the distance between two points on the Earth's surface. The signature for this function is (latitude1, longitude1, latitude2, longitude2) and it returns the distance between (latitude1, longitude1) and (latitude2, longitude2) in miles. You may want to make use of the map(), sort(), and forEach methods of arrays to accomplish this.
3. Create a function called populateByDistance that calls navigator.geolocation.getCurrentPosition with the populateByDistanceUsingPosition function as an argument.
4. Set the onclick property on the HTML button to populateByDistance(), so that this function gets executed upon clicking.