3.ICE.2: Bigfoot EJS

Search…
Introduction
Update our Bigfoot app to use EJS templates.
Setup
Install the EJS package, create the views folder, and set the view engine as described in 3.2: EJS.
Base
Create an EJS template for each route in 3.ICE.1: Bigfoot.
Index Page
1.Create an index page (http://localhost:3004/) that lists all sightings.
2.For each sighting, use a link tag (<a>) to link to its individual sighting page.
1.For example, the 1st sighting in data.json...
1
{
2
  "sightings": [
3
    {
4
      "YEAR": "1989",
5
      ...
Copied!
2.... should produce the following link.
1
<a href="/sightings/0">Sighting 0</a>
Copied!
3.Use EJS templating to generate the link path and text.
4.Each sighting page (i.e. the HTML page at http://localhost:3004/sightings/0) should contain a link that navigates back to the index page.
Absolute and Relative URL Paths
We call the URL path / the "root path". Unlike Unix file paths, URL paths do not support ., .., and ~ special characters, but they do recognise absolute and relative paths.
In the following example, the path that begins with the root path is an "absolute" URL path, which will always go to the /apples route. The path that does NOT begin with "/" will navigate to a "relative" URL path, whose prefix is the URL path on which this link is currently rendered.
1
<a href="/apples">click me</a>
2
<a href="apples">click me</a>
Copied!
Comfortable
Years Page
Create a page http://localhost:3004/years with a list of links to "year pages". Each year page should contain a list of sightings from that year and a link back to the years list page.
/years Page
1
<ul>
2
  <li>
3
    <a href="/year-sighting/1989">1989</a>
4
  </li>
5
  <li>
6
    <a href="/year-sighting/1990">1990</a>
7
  </li>
8
  ...
9
</ul>
Copied!
More Comfortable
Sort By
1.On the index page, create a link for each attribute of the sighting except for "OBSERVED".
2.Set the path of each link to / with a query parameter sortBy whose value is the name of the clicked sighting attribute. The following is an example.
1
<a href="/?sortBy=year">Sort by Year</a>
Copied!
3.Use the query param to sort sightings by the sortBy attribute in ascending order. In the example above, when the user clicks on the link they will see the list of sightings ordered by year in ascending order.
4.The following link would show a list of sightings sorted by state in ascending order.
1
<a href="/?sortBy=state">Sort by State</a>
Copied!
3.ICE.1: Bigfoot
3.ICE.3: Bigfoot POST
Last modified 2mo ago
Copy link
Contents