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).

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

If you choose to use DOMPurify and you would like the link to open in a new tab using target="_blank", add DOMPurify.setConfig({ ADD_ATTR: ['target'] }); to the top of your script. Long story short, using target="_blank" can present a security vulnerability, and DOMPurify strips out this attribute. To learn more about why, read [Target="_blank" — the most underestimated vulnerability ever](https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c.

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.

Tips

• The JSON response for this API is more complicated than the one we used in class. Once you get the data, use console.log() to access each property in the JSON. If you do it one property at a time, it'll be easier to identify if you make a mistake.
• Install the JSON Viewer Chrome Extension to pretty print JSON responses in the browser

Other Requirements

1. You are not allowed to use any libraries. Your implementation should only use plain JavaScript, jQuery and optionally Bootstrap.
2. Your implementation must only use the techniques, patterns, and concepts that we covered in class.

Submission

Create a video with audio using Zoom where you demo your assignment and explain where you fulfilled or did not fulfill each requirement. Put a link to this recording in the README.md file at the root of your project.

https://classroom.github.com/a/2m3cFGDX

If you're having problems uploading to GitHub, please zip up your project and email it to the instructor and TA. Please include the Zoom recording URL in the email. You can also zip up your project, put it in Google Drive or Dropbox, make the link sharable, and email us that link.