Objective:
To work with our “Restaurants” API (from Assignment 1) on the client-side to produce a rich user interface for
accessing data. We will practice using well-known CSS/JS code and libraries including Lodash, Moment.js,
Leaflet, jQuery & Bootstrap
Sample Solution:
You can see a video of the solution running at the following location:
Specification:
For this assignment, we will create a single table that shows a subset of the restaurant data (ie: columns:
Name, Cuisine, Address and Average Score). When the user clicks on a specific restaurant (row) in the table,
they will be shown a modal window that shows an interactive map indicating where the restaurant is located.
We will be making use of the Bootstrap framework to help design our UI, jQuery to work with the DOM,
Lodash to specify our template(s) and Leaflet to render the map.
The Solution Directory
The first step is to create a new directory for your solution, open it in Visual Studio Code and add following
folders / files:
We will not be including any of the JavaScript / CSS libraries locally. Instead, we will be leveraging their CDN
locations (See the Week 2 notes for the
• Your main.js file
With all of our libraries and files in place, we can concentrate on placing the static HTML content on the page.
This includes the following:
Navbar
Assignment 2 will use an extremely simplified Bootstrap 3 navbar. Begin by copying the full Default
Navbar example HTML code from the official documentation:
https://getbootstrap.com/docs/3.4/components/#navbar-default and pasting it as the first element
within the of your file.
• Next, proceed to remove all child elements from the "bs-example-navbar-collapse-1"
element
• In the (now empty) "bs-example-navbar-collapse-1"
element, put back a single navigation item
and label it "Restaurants", ie:
• Finally, change the "navbar-brand" to be your name
When completed, your navbar should look like the following
Bootstrap Grid System (1 Column)
Since we are leveraging Bootstrap for this assignment, we should make use of their excellent
responsive grid system. Beneath the navbar, add the following HTML
• Include a
element with the class "container" (so that our content is centered)
• Within the "container", create a
with class "row"
• Within the "row", create a
with class "col-md-12" (we will only have one column to show our data)
Main Table Skeleton
The main interface that users will interact with to view data in our application is a HTML table
consisting of 4 columns: Name, Cuisine, Address and Average Score. Create this table within your
"col-md-12" container according to the following specification:
• The
element should have the class "table" and a unique id, ie: "restaurant-table", since we will
be accessing it programmatically from JavaScript
• The
element should contain one row
• The single header row should have 4 table heading elements with the text:
o Name
o Cuisine
o Address
o Average Score
• The
element should be empty
Once your table is in place, your app should look like the following:
Paging Control
Since our "restaurants" collection contains approximately 25000 documents, we will leverage our Web
API's pagination feature when pulling restaurants from the database (ie:
/api/restaurants?page=1&perPage=10, etc). To give the user some control over which page they wish
to see, we must include a primitive pagination control (for this assignment, we will not let them "jump"
to a specific page, but instead we will let them go back and forth between the pages in sequence). To
accomplish this, we must place the pagination buttons on our page before wiring up their functionality
using jQuery:
• Begin by copying the full Pagination HTML code from the official documentation:
https://getbootstrap.com/docs/3.4/components/#pagination and pasting it directly underneath your
newly created "restaurant-table".
• Next, delete the list items that contain the numbers 2, 3, 4 and 5 (leaving just 1)
• Give each of the 3 remaining elements (nested within the
