First JavaScript Web App: Filter Todos

[codingbootcampseu]

• [x] Add a filter to your todo app
  • [x] All your todos can be filtered between the options Show all todos, Show open todos and Show done todos
  • [ ] The Show all todos option should be selected by default
• [ ] Show or hide the todos according to the selected filter

Hints

You can use the hidden attribute to show or hide an element.

const el = document.querySelector('li');
el.hidden = true; // element is hidden
el.hidden = false; // element is not hidden

The configuration of radio buttons can be tricky. They need the same name attribute and a dedicated value attribute.

<label for="radio-yes">Yes!</label>
<input type="radio" name="xxx" value="yes" id="radio-yes">
<label for="radio-no">No!</label>
<input type="radio" name="xxx" value="no" id="radio-no">

Example Solution and Comparison

• Example solution for this task
• Comparison to previous task