Hajime, the duck guy

Introduction

In this exercise you will practice sorting and filtering lists as well as tying different parts of the UI using custom elements and an event bus.

Skills you will acquire

• Using custom elements
• Using an event bus
• Manipulating lists of DOM nodes
• Advanced animation techniques (optional)

Objective

• Using the provided HTML file, implement the two custom elements to facilitate list sorting and filtering

Check your solution

• When page loads, the search and sort form controls appear above the list
• When you type a keyword in the text field, the list only shows cities such that the keyword appears anywhere in the city name
• The keyword match is case-insensitive
• When you change the value of the select list, the ordering of the list changes
• Sorting and filtering both apply to the list at the same time
• (Optional) Animate the changes in the list

Materials

• The HTML page you will work on

Keep in mind

The provided HTML already includes two custom elements, <x-filter-controls> and <x-filtered-list>. Each element has a specific job: the <x-filter-controls> deals with the user input, while the <x-filter-list> deals with the list.

Communication between the two custom elements can be established using an event bus. In the browser, every element as well as the global window objects are already event busses. They all implement the EventTarget interface. Additionally the EventTarget constructor can be used directly to create a custom bus. Try both options.

For the event name, I recommend using a name with an x- prefix, just like the custom elements. This is a reliable way of avoiding potential conflicts with event names you may not be aware of. As a good naming practice, consider the naming pattern of the platform (identify the theme of the event names in the DOM API, in other words), and try to construct a name that follows the theme.

There are three ways to communicate information in this situation.

1. Keep the information in a variable that is visible to both custom elements and use the event as just a signal that the information is changed.
2. Expose the information on the <x-filter-controls> element (e.g., by defining getters), and trigger the event on the element so that it bubbles up to the window object where the <x-filtered-list> will listen for it. In this case, the event.target represents the <x-filter-controls> element.
3. Do not keep the information at all, and send it using a CustomEvent in its details property.

You should practice all three options, and note each one's advantages and disadvantages.

The filtering can be applied in two ways.

1. You can toggle the individual items on and off by using their hidden attribute.
2. You can keep the list of all items in an array and pre-filter that array, and then insert those items into the DOM tree while removing items not found in the array.

The difference in complexity between the two solutions is about as what it sounds like. You should still try both approaches as practice.

Sorting is done in a similar way as the second method of filtering. You first sort an array containing the list items, and then you append the items one by one. Remember that a DOM node cannot exist in two places at the same time. By appending the items in order, they are simultaneously removed from whatever position it was in previously.

To animate the changes, use the FLIP technique.

Reading list

• EventTarget (MDN)
• Creating and triggering events (MDN)
• hidden (MDN)
• Element.append() (MDN)
• Animating Layouts with the FLIP Technique (CSS-Tricks)

Hints & spoilers

var $city = $listItem.querySelector('.city')
$listItem._city = $city.textContent