WBDL Front-End Coding Challenge

tag browser

Clear

Tag List

  • drama
  • selected-tag
  • comedy
  • fantasy

Series with [SELECTED TAG]

  • A Series Title that has the selected tag
  • Another Title
  • Example style of the selected Title!
  • Some other Title

SELECTED SERIES title

The description for the series goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper, nunc viverra aliquam ultricies, lacus lorem semper mi, mattis convallis risus nisi id nunc. Pellentesque ultrices quis urna nec malesuada. In hac habitasse platea dictumst. Maecenas vitae lacus bibendum, lobortis mauris eget, lobortis ligula.

  • Rating: TV-14
  • Native Language Title: 원라인
  • Source Country: Korea
  • Type: Series
  • Episodes: 10

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 is at least two titles with the same name. 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