DOM side-effects

In this version of our user interface, the side-effects will interact directly with DOM APIs. First, we'll create the overall HTML structure of the UI. Then we'll implement the application logic.

HTML markup

There are three areas that make up this user interface: the filter fields, the rating slider, and the episode listing. Each of these areas will have initial HTML rendered before any JavaScript runs.

Filter fields

To search through episodes, the user is presented with a text input:

<input placeholder="filter" type="search...