Tech Test Readme

kwMVcxaA.png

SgomlHJ0.png

techtest.md

Frontend Tech Test

This is a technical test to evaluate front-end development skills.

Please treat this task like you would any other task at work - feel free to search the web, and try to write code which is easily maintained by others.

This test uses an Express server to provide data to the frontend. Part of the setup of the application has been done for you and it should run in the browser as shown in the images below.

You can find the code for the task in the Express Demo repository. You should have already followed the technical setup ahead of time and be ready to start the exercise.

Note:

• Not all candidates will complete the task in the time allowed, and that is OK.
• The quality of your work is more important than the quantity. This is not a speed test.

Constraints

• You may add JavaScript to provide an improved user experience of sending the data to the backend, but do not violate the principles of Progressive Enhancement
• HTML and CSS must be valid
• Browser support should be broad: IE11+, latest stable release of Chrome, Firefox, Safari
• Solution must be accessible
• Code must be clear and easy to maintain

Submission

Create a new branch on the Express Demo repository and submit your changes via a Pull Request.

Instructions

Your task is to add a Ratings widget to the reviewer comments section in our fictional Reports app.

The widget will allow users to add a star rating to all comments received from reviewers for a given paper.

Implement the widget as shown in the below screenshot (Figure 1) with the following requirements:

1. When a rating is submitted, it should send the rating to the backend URL /result via the POST method
2. Each star corresponds to a rating value of 1 to 5, going from left to right
3. The selected star rating is indicated with the dark-blue filled star, while unselected stars will remain unfilled. (Please use the provided images in the public/images folder)
4. When a star is hovered, it should visually appear as if it were selected. If you have time, you may further enhance the design by filling all preceding stars before a selected/hovered star, e.g: if I hover over star "4", stars 1 - 3 should also appear selected
5. On a successful POST request, a message should be displayed beneath the star icons, telling the user what rating was submitted. E.g: clicking on the first star will display "Rated 1 star! Thanks" (see Figure 2 below)

Figure 1

Figure 2