WBDL Front-End Coding Challenge

tag browser

Clear

Tag List

Specification

Create a series/movie tag browser using the provided data.

The tag list
  1. Render a list of all the tags from all the series into the '.tag-list' ul.
  2. There should not be duplicate tags
  3. The list should be alphabetized
The Series List
  1. When a tag is selected (clicked), render the list of series with the matching tag into the '.matching-items-list' ul
The Selected Series Data
  1. When a series is selected (clicked), render the data for that series into the '.selected-item' div
The Clear Button
  1. When the clear button is clicked, clear the selected tag, clear the series list, and clear all series data. Essentially, reset the widget.

Dependencies

  1. Bulma is included on the page and provides basic styling. You may add any new styles you need or remove this dependency if desired.
  2. jQuery is included on the page. While we typically use Angular or Vue.js here at WBDL, it is important to be familiar with plain vanilla javascript (in this case, with jquery for convenience). Please do not add additional libraries to the page (react, angular, vue, etc).

What are we looking for?

  1. How do you work with a dataset?
  2. How do you handle templating/dom manipulation without a framework?
  3. What strategies do you employ for event binding?
  4. How do you organize a class containing the different methods for performing these tasks?

Some Tips

  1. There are two titles with the same name: The Bride of the Water God (Habaek). You will want to base your event handling on the IDs to diferentiate between these. (perhaps using something like a data- attribute)
  2. It will probably create more complexity to try to break this into multiple sub-components. I wouldn't recommend it unless you are very ambitious.
  3. Do not worry about browser support outside of the latest version of chrome.

Bonus

  1. It doesn't have to be pretty, but bonus points for doing some interesting styling or animations
  2. Bonus for rendering semantically correct markup (anchors, etc)
  3. Bonus: Render "No Tag Selected" and "No Series Selected" text when there is not a selected tag/series.
  4. Bonus: Disable the "clear" button when there is not a selected tag/series

Completed Sample Video