The task is to build from the mockup supplied the test page as a fully responsive webpage. We have added into the mockup a table for call records, we'd like you to populate that table through importing the data in the CSV file, you can do this direct from the file or convert the file into JSON if you prefer working with JSON. We would also like JS show/hide accordion functionality added to the button in the mockup, that will display and then hide the table as it is clicked.
The mockup shows you the table column, you just need to add in the remaining data.
Extra Credit: Build the tests you would build for this page to show the functionality has been correctly developed.
Below is a list highlighting features implemented:
- The company logo is large in dimensions to cater for high-resolution devices
- PNG images have been crushed and JPG images compressed
- I have applied my own styling to the navigation to satisfy accessibility to AA standard
- I have implemented a functional mobile menu/hamburger icon using just CSS and no javascript
- I would normally use jQuery for ajax request as it is less convoluted and better error management
- No frameworks or bootstraps have been used for greater scalability and as requested
- I personally would not restrict the website width as per your design, but would provide support for 4K devices
- The markup is symantically correct
- It is responsive, x-browser and x-platform
- This page supports accessiblity to a high standard; I am guessing AA as not tested
- Table has a "no JavaScript" and "Loading" message
- I have presumed that you would want to trim the underscore from telephone data
- Table data has been restyled as a list for mobile users to prevent horizontal scrolling
- Other than the navigation list html taken from your site, all code has been written by me
- I was tempted to use the jQuery TabaKordion (Show/Hide / Tabs / Accordion) plugin I had built, but coded it specifically for this test as requested using vanilla JavaScript
- Built most of the tests