Assignment 2

In this assignment, you will build a Reddit search application that consumes two Reddit APIs and renders the data using client-side templating with Handlebars.

Subreddit Search and Results

At the top of the page, create a form with a single search input and a submit button. When the user submits the form (bind to the submit event of the form instead of a click event on the button), fire off an Ajax request to GET{subreddit}.json to retrieve all of the posts for the subreddit that was typed into the search box.

Display a div for each subreddit post containing the following fields:

  • title that links to url in a new tab
  • score
  • subreddit_subscribers formatted with commas. To format a number, check out Number.prototype.toLocaleString(). You can implement this two ways. The first approach is to format this data before passing it to the template to be rendered. A second approach is to use a custom Handlebars helper. Choose whichever one you feel comfortable with.
  • If num_comments > 0, show the number of comments, also formatted with commas. Otherwise, show “No comments”. Use the Handlebars if helper. In Handlebars, 0 is treated as falsey.

Subreddit Details

Next, use the endpoint GET<subreddit_id> to fetch and render details about the given subreddit. For example, GET returns details for the cats subreddit. Now you may be wondering where the subreddit_id value in the id query string parameter comes from. This value can be found in the response of the first API endpoint under the key subreddit_id in each post resource.

Display the following fields:

  • title
  • description or public_description
  • display_name_prefixed
  • subscribers

A Loading Spinner

While Ajax requests are pending, show a loading indicator on the screen using one of these CSS spinners.

Deploy to Surge

  • Create a file
  • Deploy your code to Surge and paste the URL on your See this Markdown guide to learn how to create a link in Markdown.