Javascript Proficiency Quiz:
In the zip file named IW JS Quiz.zip you’ll find the following 4 files:
- index.html
- data.json
- default_view.png
- filterDropdown.png
Using the data.json file provided IW would like to see you create a similar page of HTML markup as shown in the screenshots contained.
The data.json file contains a json object show in the example below:
{
"vclala": {
"Devices": 5,
"Channels": 2
},
"ggrneied": {
"Devices": 1,
"Channels": 1
}
}
The keys (indicated in Red) of each object is an example title of a dataset contained within our system. In the screenshots provided you’ll notice these are displayed along the vertical axis on the left hand side of the image.
The colored bars aside the title contains the number of Devices, and number of Channels, both which are contained within the json as child objects nodes attached to the title.
At the top you’ll see a total count for each Devices and Channels.
The task is to create a similar page of HTML/CSS and Javascript which either recreates or improves on the examples listed in the screenshots.
Must Haves:
● Total Count of Devices and Channels at the top
● A Legend describing the data shown
● Graphical representation of Devices and Channels in relation to the parent title.
● The ability to filter results based on a Title (in Red).
Considerations:
● You can use whatever tools you have at your disposal.
● Any and all frameworks, classes or libraries are available to use.
● Bonus points will be given for using native JS.
● Bonus points for creativity.
● Must only work in Modern Browsers eg. IE10+, Firefox, Chrome, Safari.
● You will be judged on the time it takes you to complete the task from response acknowledging the receipt of the email to the completed set of files zipped and delivered back to IW.