diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..1d87012 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,53 @@ +{ + "name": "frontend-test", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "colors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.3.0.tgz", + "integrity": "sha512-EDpX3a7wHMWFA7PUHWPHNWqOxIIRSJetuwl0AS5Oi/5FMV8kWm69RTlgm00GKjBO1xFHMtBbL49yRtMMdticBw==", + "dev": true + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true + }, + "minimist": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", + "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", + "dev": true + }, + "node-static": { + "version": "0.7.10", + "resolved": "https://registry.npmjs.org/node-static/-/node-static-0.7.10.tgz", + "integrity": "sha512-bd7zO5hvCWzdglgwz9t82T4mYTEUzEG5pXnSqEzitvmEacusbhl8/VwuCbMaYR9g2PNK5191yBtAEQLJEmQh1A==", + "dev": true, + "requires": { + "colors": "1.3.0", + "mime": "1.6.0", + "optimist": "0.6.1" + } + }, + "optimist": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", + "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", + "dev": true, + "requires": { + "minimist": "0.0.10", + "wordwrap": "0.0.3" + } + }, + "wordwrap": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", + "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=", + "dev": true + } + } +} diff --git a/public/css/app.css b/public/css/app.css index 3eb4e6d..598e58e 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -8,7 +8,8 @@ #tag-browser .clear-button { position: absolute; - top: 1em;; + top: 1em; + ; right: 1em; } @@ -16,3 +17,11 @@ background: purple; color: white; } + +.is-link { + cursor: pointer; +} + +.matching-items-list li { + cursor: pointer; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 6fab3ca..37b508d 100644 --- a/public/index.html +++ b/public/index.html @@ -1,46 +1,108 @@ - - - - - WBDL Front-End Coding Challenge - - -
-

- WBDL Front-End Coding Challenge -

-
-

tag browser

- - Clear - -
-
-
-

Tag List

-
-
    -
  • drama
    • + + + + + WBDL Front-End Coding Challenge + + + + + +
    +

    + WBDL Front-End Coding Challenge +

    + +
    +

    tag browser

    + + Clear + +
    +
    +
    +

    Tag List

    +
    +
      + +
    +
    +
    + +
    +
    +
    +
    - - + +
    - +

    Specification

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

    -
    - The tag list +
    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. @@ -76,7 +137,9 @@ 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
        2. +
      2. 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 @@ -86,15 +149,21 @@ 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.
        2. +
      2. 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. -
    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).
      3. +
    3. + Bulma is included on the page and provides basic styling. You may add any new styles you need or remove this + dependency if desired.
      4. +
    4. + 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).
    @@ -109,8 +178,11 @@

    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. -
    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. +
    3. 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)
      4. +
    4. 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.
    5. Do not worry about browser support outside of the latest version of chrome.
    @@ -124,8 +196,7 @@

    Completed Sample Video

    @@ -133,11 +204,9 @@ - - + + + \ No newline at end of file