In this assignment, you will create a search and results page using AJAX and the Reddit API. The Reddit API endpoint you'll be working with looks like this:

GET https://www.reddit.com/r/{subreddit}.json

To get data for the "cats" subreddit, swap {subreddit} with "cats":

https://www.reddit.com/r/cats.json

The Search Form

At the top of the page, create a form with a single search input and a submit button. When the user submits the form, fire off an AJAX request to get all the posts for the subreddit that was typed into the search box.

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, render the title, score, and author of each post. Each post can be found in data.children. The title should be an anchor tag that links to url (or permalink if you'd prefer) and opens in a new tab/window (e.g. target="_blank"). (If you would like the link to open in a new tab, add DOMPurify.setConfig({ ADD_ATTR: ['target'] }); to the top of your script. Long story short, using target="_blank" can present a vulnerability, and DOMPurify now strips out this attribute. To learn more about why, read Target=”_blank” — the most underestimated vulnerability ever.

Make sure that you are taking measures to protect against XSS attacks either by using DOMPurify or creating document fragments and/or nodes.

A Loading Spinner

While the AJAX request is pending, show a loading indicator on the screen using one of these CSS spinners. Be sure to change the foreground color to something other than white if your app has a white background.

Error Handling

If your search term returns no results (data.children is an empty array), render a paragraph with the text "No results found". For example, search for "mycatss": https://www.reddit.com/r/mycatss.json.

Reddit will respond with a 404 HTTP status code (e.g. https://www.reddit.com/r/catssss.json) or you may see a net::ERR_FAILED error in Chrome's console. In either case, this will cause the promise returned from $.ajax to reject (error). Please add the following rejection function to your promise:

promise.then(
  () => {
    // This function will be called with Reddit responds successfully.
    // Render posts here.
  },
  () => {
    // This function will be called when a 404 or net::ERR_FAILED error occurs.
    $('#results').html(
      '<p>Oops! Something went wrong. Please try again later.</p>'
    );
  }
);

Tips

• The JSON response for this API is more complicated than the one we used in class. If you have questions on how to traverse it, please reach out!
• Install the JSONView Chrome Extension to pretty print JSON responses in the browser

Deploy Your Assignment to Surge

First, cd into your Assignment 1 folder from your Terminal. Then run the following:

npm install --global surge
surge

Learn more about Surge here.

Next, create a README.md file. Paste the 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/n8cRsPiw.