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.
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.
To search through episodes, the user is presented with a text input:
<input placeholder="filter" type="search" autofocus/>
Below the search text input are fields that they can select. These fields represent where the search control is looking:
<ul>
<li>
<label>
Title
<input type="checkbox" name="title" checked/>
</label>
</li>
<li>
<label>
Date
<input type="checkbox" name="date"/>
</label>
</li>
<li>
<label>
Director
...