mirror of
https://github.com/Raghu-Ch/front-end-coding-challenge.git
synced 2026-02-10 04:43:01 -05:00
WB Test scenario1
This commit is contained in:
53
package-lock.json
generated
Normal file
53
package-lock.json
generated
Normal file
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -8,7 +8,8 @@
|
|||||||
|
|
||||||
#tag-browser .clear-button {
|
#tag-browser .clear-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1em;;
|
top: 1em;
|
||||||
|
;
|
||||||
right: 1em;
|
right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -16,3 +17,11 @@
|
|||||||
background: purple;
|
background: purple;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.is-link {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-items-list li {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@@ -1,46 +1,108 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/css/app.css">
|
|
||||||
<title>WBDL Front-End Coding Challenge</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="title">
|
|
||||||
WBDL Front-End Coding Challenge
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div id="tag-browser">
|
<head>
|
||||||
<h2 class="title">tag browser</h2>
|
<meta charset="UTF-8">
|
||||||
<a class="button clear-button">
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css">
|
||||||
Clear
|
<link rel="stylesheet" type="text/css" href="/css/app.css">
|
||||||
</a>
|
<title>WBDL Front-End Coding Challenge</title>
|
||||||
<div class="columns">
|
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
|
||||||
<div class="column is-one-fifth">
|
<script>
|
||||||
<div class="content">
|
var tags = [];
|
||||||
<h3 class="subtitle">Tag List</h3>
|
$.getJSON("/js/data.json", function (result) {
|
||||||
</div>
|
$.each(result, function (i, field) {
|
||||||
<ul class="tag-list">
|
$.each(field.tags, function (j, tagvalue) {
|
||||||
<li><span class="tag is-link">drama</span></li>
|
if (!tags[tagvalue]) {
|
||||||
|
$('.tag-list').append('<li class="tag is-link">' + tagvalue + '</li><li></li>');
|
||||||
|
tags[tagvalue] = [];
|
||||||
|
}
|
||||||
|
if (!tags[tagvalue][field.title])
|
||||||
|
tags[tagvalue][field.title] = [];
|
||||||
|
tags[tagvalue][field.title] = field;
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
$(".is-link").click(function (e) {
|
||||||
|
var tagval = $(this).text();
|
||||||
|
$(".is-link").removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
$('.titlelist').html();
|
||||||
|
var titlehtml = '<h3 class="subtitle">' + tagval + '</h3>' +
|
||||||
|
'<ul class="matching-items-list">';
|
||||||
|
$(".matching-items-list").html('');
|
||||||
|
$('.selected-item .content').html('');
|
||||||
|
for (var title in tags[tagval]) {
|
||||||
|
titlehtml += '<li>' + title + '</li>';
|
||||||
|
}
|
||||||
|
titlehtml += '</ul>';
|
||||||
|
$(".titlelist").html(titlehtml);
|
||||||
|
$(".matching-items-list > li").click(function (e) {
|
||||||
|
$(".matching-items-list li").removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
var titleval = $(this).text();
|
||||||
|
$('.selected-item .content').html('');
|
||||||
|
var contenthtml = '<h3 class="subtitle">' + titleval + '</h3>' +
|
||||||
|
'<img src="' + tags[tagval][titleval]['thumbnail'] + '" />' +
|
||||||
|
'<p>' + tags[tagval][titleval]['description'] + '</p>' +
|
||||||
|
'</div>' +
|
||||||
|
'<ul>' +
|
||||||
|
'<li><strong>Rating:</strong> <span>' + tags[tagval][titleval]['rating'] + '</span></li>' +
|
||||||
|
'<li><strong>Native Language Title:</strong> <span>' + tags[tagval][titleval][
|
||||||
|
'nativeLanguageTitle'
|
||||||
|
] + '</span></li>' +
|
||||||
|
'<li><strong>Source Country:</strong> <span>' + tags[tagval][titleval]['sourceCountry'] +
|
||||||
|
'</span></li>' +
|
||||||
|
'<li><strong>Type:</strong> <span>' + tags[tagval][titleval]['type'] + '</span></li>' +
|
||||||
|
'<li><strong>Episodes:</strong> <span>' + tags[tagval][titleval]['episodes'] + '</span></li>' +
|
||||||
|
'</ul>';
|
||||||
|
$('.selected-item .content').html(contenthtml);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
$('.clear-button').click(function () {
|
||||||
|
$(".is-link").removeClass('active');
|
||||||
|
$(".titlelist").html('');
|
||||||
|
$('.selected-item .content').html('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
WBDL Front-End Coding Challenge
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div id="tag-browser">
|
||||||
|
<h2 class="title">tag browser</h2>
|
||||||
|
<a class="button clear-button">
|
||||||
|
Clear
|
||||||
|
</a>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-fifth">
|
||||||
|
<div class="content">
|
||||||
|
<h3 class="subtitle">Tag List</h3>
|
||||||
|
</div>
|
||||||
|
<ul class="tag-list">
|
||||||
|
<!-- <li><span class="tag is-link">drama</span></li>
|
||||||
<li><span class="tag is-link active">selected-tag</span></li>
|
<li><span class="tag is-link active">selected-tag</span></li>
|
||||||
<li><span class="tag is-link">comedy</span></li>
|
<li><span class="tag is-link">comedy</span></li>
|
||||||
<li><span class="tag is-link">fantasy</span></li>
|
<li><span class="tag is-link">fantasy</span></li> -->
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="column content">
|
<div class="column content titlelist">
|
||||||
<h3 class="subtitle">[SELECTED TAG]</h3>
|
<!-- <h3 class="subtitle">[SELECTED TAG]</h3>
|
||||||
<ul class="matching-items-list">
|
<ul class="matching-items-list">
|
||||||
<li>A Series Title</li>
|
<li>A Series Title</li>
|
||||||
<li>Another Title</li>
|
<li>Another Title</li>
|
||||||
<li class="active">Example style of the selected Title!</li>
|
<li class="active">Example style of the selected Title!</li>
|
||||||
<li>Some other Title</li>
|
<li>Some other Title</li>
|
||||||
</ul>
|
</ul> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-half selected-item">
|
<div class="column is-half selected-item">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h3 class="subtitle">[SELECTED SERIES TITLE]</h3>
|
<!-- <h3 class="subtitle">[SELECTED SERIES TITLE]</h3>
|
||||||
<img src="http://via.placeholder.com/350x350" />
|
<img src="http://via.placeholder.com/350x350" />
|
||||||
<p>
|
<p>
|
||||||
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.
|
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.
|
||||||
@@ -52,22 +114,21 @@
|
|||||||
<li><strong>Source Country:</strong> <span>Korea</span></li>
|
<li><strong>Source Country:</strong> <span>Korea</span></li>
|
||||||
<li><strong>Type:</strong> <span>Series</span></li>
|
<li><strong>Type:</strong> <span>Series</span></li>
|
||||||
<li><strong>Episodes:</strong> <span>10</span></li>
|
<li><strong>Episodes:</strong> <span>10</span></li>
|
||||||
</ul>
|
</ul> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h3 class="subtitle">Specification</h3>
|
<h3 class="subtitle">Specification</h3>
|
||||||
<p>
|
<p>
|
||||||
Create a series/movie tag browser using the provided data.
|
Create a series/movie tag browser using the provided data.
|
||||||
</p>
|
</p>
|
||||||
<hr />
|
<hr /> The tag list
|
||||||
The tag list
|
|
||||||
<ol>
|
<ol>
|
||||||
<li>Render a list of all the tags from all the series into the '.tag-list' ul.</li>
|
<li>Render a list of all the tags from all the series into the '.tag-list' ul.</li>
|
||||||
<li>There should not be duplicate tags</li>
|
<li>There should not be duplicate tags</li>
|
||||||
@@ -76,7 +137,9 @@
|
|||||||
|
|
||||||
The Series List
|
The Series List
|
||||||
<ol>
|
<ol>
|
||||||
<li>When a tag is selected (clicked), render the list of series with the matching tag into the '.matching-items-list' ul</li>
|
<li>When a tag is selected (clicked), render the list of series with the matching tag into the '.matching-items-list'
|
||||||
|
ul
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
The Selected Series Data
|
The Selected Series Data
|
||||||
@@ -86,15 +149,21 @@
|
|||||||
|
|
||||||
The Clear Button
|
The Clear Button
|
||||||
<ol>
|
<ol>
|
||||||
<li>When the clear button is clicked, clear the selected tag, clear the series list, and clear all series data. Essentially, reset the widget.</li>
|
<li>When the clear button is clicked, clear the selected tag, clear the series list, and clear all series data. Essentially,
|
||||||
|
reset the widget.</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h3 class="subtitle">Dependencies</h3>
|
<h3 class="subtitle">Dependencies</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li><a href="http://bulma.io" target="_new">Bulma</a> is included on the page and provides basic styling. You may add any new styles you need or remove this dependency if desired.</li>
|
<li>
|
||||||
<li><a href="http://jquery.com" target="_new">jQuery</a> 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 <strong>do not</strong> add additional libraries to the page (react, angular, vue, etc).</li>
|
<a href="http://bulma.io" target="_new">Bulma</a> is included on the page and provides basic styling. You may add any new styles you need or remove this
|
||||||
|
dependency if desired.</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://jquery.com" target="_new">jQuery</a> 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
|
||||||
|
<strong>do not</strong> add additional libraries to the page (react, angular, vue, etc).</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
@@ -109,8 +178,11 @@
|
|||||||
|
|
||||||
<h3 class="subtitle">Some Tips</h3>
|
<h3 class="subtitle">Some Tips</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li>There are two titles with the same name: <strong>The Bride of the Water God (Habaek)</strong>. You will want to base your event handling on the IDs to diferentiate between these. (perhaps using something like a data- attribute)</li>
|
<li>There are two titles with the same name:
|
||||||
<li>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.</li>
|
<strong>The Bride of the Water God (Habaek)</strong>. You will want to base your event handling on the IDs to diferentiate
|
||||||
|
between these. (perhaps using something like a data- attribute)</li>
|
||||||
|
<li>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.</li>
|
||||||
<li>Do not worry about browser support outside of the latest version of chrome.</li>
|
<li>Do not worry about browser support outside of the latest version of chrome.</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
@@ -124,8 +196,7 @@
|
|||||||
|
|
||||||
<h3>Completed Sample Video</h3>
|
<h3>Completed Sample Video</h3>
|
||||||
<video preload="auto" controls>
|
<video preload="auto" controls>
|
||||||
<source src="/sample.mp4" type="video/mp4">
|
<source src="/sample.mp4" type="video/mp4"> Your browser does not support the video tag.
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
@@ -133,11 +204,9 @@
|
|||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
|
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import TagBrowserWidget from '/js/app.js';
|
import TagBrowserWidget from '/js/app.js'; const myWidget = new TagBrowserWidget({ element: document.getElementById('tag-browser')
|
||||||
|
|
||||||
const myWidget = new TagBrowserWidget({
|
|
||||||
element: document.getElementById('tag-browser')
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user