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 {
|
||||
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;
|
||||
}
|
||||
@@ -1,11 +1,73 @@
|
||||
<!DOCTYPE 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>
|
||||
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
|
||||
<script>
|
||||
var tags = [];
|
||||
$.getJSON("/js/data.json", function (result) {
|
||||
$.each(result, function (i, field) {
|
||||
$.each(field.tags, function (j, tagvalue) {
|
||||
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">
|
||||
@@ -23,24 +85,24 @@
|
||||
<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">drama</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">fantasy</span></li>
|
||||
<li><span class="tag is-link">fantasy</span></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column content">
|
||||
<h3 class="subtitle">[SELECTED TAG]</h3>
|
||||
<div class="column content titlelist">
|
||||
<!-- <h3 class="subtitle">[SELECTED TAG]</h3>
|
||||
<ul class="matching-items-list">
|
||||
<li>A Series Title</li>
|
||||
<li>Another Title</li>
|
||||
<li class="active">Example style of the selected Title!</li>
|
||||
<li>Some other Title</li>
|
||||
</ul>
|
||||
</ul> -->
|
||||
</div>
|
||||
<div class="column is-half selected-item">
|
||||
<div class="content">
|
||||
<h3 class="subtitle">[SELECTED SERIES TITLE]</h3>
|
||||
<!-- <h3 class="subtitle">[SELECTED SERIES TITLE]</h3>
|
||||
<img src="http://via.placeholder.com/350x350" />
|
||||
<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.
|
||||
@@ -52,7 +114,7 @@
|
||||
<li><strong>Source Country:</strong> <span>Korea</span></li>
|
||||
<li><strong>Type:</strong> <span>Series</span></li>
|
||||
<li><strong>Episodes:</strong> <span>10</span></li>
|
||||
</ul>
|
||||
</ul> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,8 +128,7 @@
|
||||
<p>
|
||||
Create a series/movie tag browser using the provided data.
|
||||
</p>
|
||||
<hr />
|
||||
The tag list
|
||||
<hr /> The tag list
|
||||
<ol>
|
||||
<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>
|
||||
@@ -76,7 +137,9 @@
|
||||
|
||||
The Series List
|
||||
<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>
|
||||
|
||||
The Selected Series Data
|
||||
@@ -86,15 +149,21 @@
|
||||
|
||||
The Clear Button
|
||||
<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>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="content">
|
||||
<h3 class="subtitle">Dependencies</h3>
|
||||
<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><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>
|
||||
<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>
|
||||
</div>
|
||||
<hr />
|
||||
@@ -109,8 +178,11 @@
|
||||
|
||||
<h3 class="subtitle">Some Tips</h3>
|
||||
<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>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>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>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>
|
||||
</ol>
|
||||
|
||||
@@ -124,8 +196,7 @@
|
||||
|
||||
<h3>Completed Sample Video</h3>
|
||||
<video preload="auto" controls>
|
||||
<source src="/sample.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
<source src="/sample.mp4" type="video/mp4"> Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<hr />
|
||||
@@ -133,11 +204,9 @@
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
|
||||
<script type="module">
|
||||
import TagBrowserWidget from '/js/app.js';
|
||||
|
||||
const myWidget = new TagBrowserWidget({
|
||||
element: document.getElementById('tag-browser')
|
||||
import TagBrowserWidget from '/js/app.js'; const myWidget = new TagBrowserWidget({ element: document.getElementById('tag-browser')
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user