For this assignment, you will build a dad joke search application using the icanhazdadjoke API.

The Search Form

At the top of the page, create a form with a single search input and a submit button. When a user submits the form, make an AJAX request to get a list of dad jokes that match the value that was typed into the search box. For example, if a user types in "cat", make an AJAX request to https://icanhazdadjoke.com/search?term=cats&page=1. If a user submits the form without typing a search term, make an AJAX request to https://icanhazdadjoke.com/search?term=&page=1.

Unlike other APIs we've used in this class, this API requires sending the Accept HTTP header. For example:

$.ajax({
  type: "GET",
  url: "https://icanhazdadjoke.com/search?term=cats",
  headers: { Accept: "application/json" },
}).then(data => {
  console.log(data);
});

This API uses the Accept header to determine the format it should respond with. Setting the Accept header to application/json tells the API to respond with JSON.

Bind to the submit event on the form element instead of binding to the click event on the submit button. For example:

$("form").on("submit", function (event) {
  event.preventDefault(); // prevents the form from submitting to another page

  // put your AJAX code here
});

Rendering the Results

When the AJAX request responds with the data and there are results (results isn't an empty array), render the following using Handlebars:

• Render total_jokes at the top of the results.
• Render each joke within results.
• Render current_page and total_pages underneath the list of dad jokes.
• Add Previous Page and Next Page buttons underneath the list of dad jokes so a user can paginate the results. Use the previous_page and next_page properties. Most of the search terms only return a single page. When this happens, the previous_page and next_page properties contain the value 1. When this happens, it is fine if clicking these buttons just search for page 1 again. If you submit the form without a search term, you will get back multiple pages.

If there are no results (results is an empty array), simply render a paragraph with the text "No results found". For this, you can do something like the following:

{{#if results.length}}
  <!-- Dad jokes were found. Render them here. -->
{{else}}
  <!-- Dad jokes were not found. -->
{{/if}}

A Loading Spinner

While an AJAX request is pending (during initial load and paginating results), show a loading indicator on the screen using one of these CSS spinners. Put the HTML for this loading spinner in a separate Handlebars template. Be sure to change the foreground color to something other than white if your app has a white background.

Deploy Your Assignment to Surge

cd into your Assignment 2 folder from your Terminal. Run the following, as you should have installed the surge command in Assignment 1:

surge

Create a README.md file. Paste the Surge URL on your README.md. GitHub uses this file as the documentation for a repository. The .md extension stands for Markdown. Markdown is an easy-to-use markup language that is less verbose than HTML and is great for documentation. Behind the scenes, GitHub will turn your Markdown into HTML on the repository webpage. For example, the URL you pasted in the README.md will be turned into an anchor tag.

Learn more about Markdown here.

Submission

Create your GitHub repository here: https://classroom.github.com/a/ZWwFaGFl.