Navigating the National Park Service API

A JavaScript webpage that fetches and displays info on the national parks, monuments, and facilities in the USA

Project Overview

The U.S. National Sites webpage displays general information about the USA’s national parks, monuments, and facilities. I created the site with HTML, JavaScript, and CSS, and used the National Park Service API to gather all the data.

Overall, the project involves fetching and displaying information about U.S. national sites based on user-selected states.

The Goal

The project’s primary goal was to provide a user-friendly interface for exploring national site data. To do so, the primary function of the project is a dropdown menu that categorizes the national sites based on the U.S. State where they are located. Once a state is selected, a list with all of the national sites appears, along with a short description and a “Learn More” button.

When the “Learn More” button is clicked, more information about the national site is displayed on a details page, such as the physical and mailing address, directions, contact information, and more images.

The Solution

Fetching the API data

I leveraged jQuery, through an AJAX request, to fetch data from the National Park Service API on three occasions.

1. To get a list of ALL the national sites in the API.
2. To get a list of the national sites based on the state where it is located.
3. To get detailed information on each site.

Once the data was received on each occasion, I dynamically generated HTML elements to display information about each park.

Each time the user selects a state from the dropdown or clicks on the “Learn More” button, the previous results are cleared from the page.

Example:

function getState(stateCode) {
  $.getJSON(
    "https://developer.nps.gov/api/v1/parks?stateCode=" +
      stateCode +
      "&api_key=EkdpRXraz4hFOZhnQVeXF5XZ87HjDBnw1qJJbywd",

    function (data) {
      allParksDiv.innerHTML = "";
      parksDiv.innerHTML = ""; // Clear previous results before adding new ones

      // Find the state name in the states array based on the index
      let selectedStateIndex = st.indexOf(stateCode);
      let selectedStateName = states[selectedStateIndex];

      // Update the statesDiv element with the selected state name
      parksDiv.innerHTML = "<h2 id='sta'>" + selectedStateName + "</h2>";

      for (var i = 0; i < data.data.length; i++) {
        let pc = data.data[i].parkCode;

        parksDiv.innerHTML +=
          "<div class='park-container'> <div class='park-content'><h2>" +
          data.data[i].fullName +
          "</h2>" +
          "<p>" +
          data.data[i].description +
          "</p><br><button class='learn' onclick='getPark(\"" +
          pc +
          "\")'>Learn More</button> </div> <div class='park-image'> <img src=" +
          data.data[i].images[0].url +
          " alt=" +
          data.data[i].images[0].altText +
          "> </div> </div>";
      }
    }
  );
}

Dropdown Menu and State Selection

I populated a dropdown menu with the names of U.S. states. Once the user selects a state from the dropdown menu, it triggers an event that fetches data for national parks in that state.

<select name="astate" id="astate" onchange="getState(this.value)">
    <option value="">Select a State</option>
</select>

let stateList = document.querySelector("#astate");

for (i = 0; i < states.length; i++) {
  stateList.innerHTML +=
    "<option value=" + st[i] + ">" + states[i] + "</option";
}

“Learn More” Button

The “Learn More” button was done with a simple on click event that triggers the getPark function which fetches API data to get detailed information on each site.

The button is also dynamically generated with JavaScript.

Creating the structure and Styling

I set up a very basic structure with HTML. It includes sections for background images, headings, the dropdown menu for selecting states, and a section to display the national site information once dynamically generated in the JavaScript file.

I also used CSS to style elements of the webpage, including the background image, headings, dropdown menu, and park containers. The styling includes setting margins, widths, fonts, and background colors.

Check out all the source code!

Results

The US National Sites webpage serves as a great prototype for an improved iteration with further functionality, or for any webpage that needs an API to collect its data. The opportunity for growth in an improved version is immense:

• Further filtering can be implemented, rather than merely by state.
• A slideshow on the details page to display all the images
• Further details about each site, such as price of entry, available activities, and more.

Nevertheless, the most rewarding result, which achieves the main purpose of this project, is my improved confidence and ability to execute API calls with JavaScript! Yayy!