Step 6

Let's put in place a process to display search results. For now, since the search function is not really performing a search, we will simply display the entire courses data object.

Add the following function to script.js

function showSearchResults(data) {
  const resultDiv = document.querySelector(".result");
  resultDiv.innerHTML = "";
  const list = document.createElement("ul");
  for (let i = 0; i < data.length; i++) {
    const item = document.createElement("li");
    item.innerText = `${data[i]["OfferingName"]} (${data[i]["SectionName"]}) ${data[i]["Title"]}`;
    list.append(item);
  }
  resultDiv.append(list);
}

Let's have the search method call showSearchResults:

function search() {
  const query = document.getElementById("query").value.trim();
  const school = document.getElementById("schools").value;
  const term = document.getElementById("terms").value;

  console.log(`search for ${query} in the ${school} during ${term}`);
+ showSearchResults(courses);
 }

As you run the application and perform a search, the UI should look like this: