-
In your project directory, clone and start the mock server:
- git clone https://github.com/oferk1/sidebar-mock-data-server
- cd sidebar-mock-data-server
- npm install
- npm start
-
In your project directory, clone and start the main task project
- git clone https://github.com/oferk1/sidebar-task
- cd sidebar-task
- npm install
- npm start
-
Go to http://localhost:3000 to view the sidebar
- Any Javascript tools, frameworks, libraries or code.
Result should be a web page (html) that can include any style or script (using native or script loader)
Resulting page should work and look the same on all major browsers (Chrome, Firefox, IE 9+)
Result should try to match the expected screenshot as much as possible.
Load the attached sidebar.json
using any Ajax method of your choice, can be done with the aid of a button, or page load, or whichever way you want.
What you are looking at in the expected result is actually a part of the Blazemeter application - a sidebar.
- It opens and closes, has an open width of
250px
. x
button closes it, and you can add any action item to open it to your choosing.- When it is closed - the sidebar is not visible on screen.
- Make the sidebar full height of screen.
- If the amount of items in the sidebar do not fit in the visible screen, it is scrollable
- Refresh button reloads the data
- Reports is a title for the sidebar, and alongside it is the count of the amount of reports from the supplied json.
- Grid is sorted based on updated time, using
updated
field. - Button of up/down arrows to the right of the search toggles the sort order of the grid (ascending, descending). (Optional)
- Below the title there is a search input box that will filter the sidebar data by using the
name
field. (Optional)
- Height is
53px
. - Ignore icons and the dot on the left
- on middle top - shows
name
field - on right side -
updated
as a formatted time (date on top, time on bottom) - bottom row shows test type.
- location is taken from the
location
field.
If you have any open questions about css/data - just assume whichever answer seems the most appropriate. Just go with the flow, the general idea and execution is much more important
- General design and concept
- Tools and libraries selections (overkill is a minus)
- Code quality and style
- Execution
- Css and UI quality
- General flow
- UI
- Overall working model