npm install
npm run serve
npm run build
npm run test
npm run lint
Students of a Class
A class has a set of students. Each student has a
firstname,
lastnameand a
grade
Requirements
- We need a dashboard to display the top three students
- When the user clicks on the dashboard (button) the three top students (firstname, lastname, grade) should appear
- By the dashboard button there is another button called student list
- When the user clicks student list then the whole list of students should appear on the right hand side of the dashboard
- When the user clicks on a student label then at the bottom of the page the student record should appear along with an input field that will allow the teacher to amend the grade
Bonus #1
Due to national class competition the teacher wants to categorise the grades of all the students.
The requirements of the bonus feature are as follows:
- A new button with the label average should be created
- When the teacher clicks this button she should be navigated to a new page (using best practise)
- In the new page the classification should be displayed for example a class of 10 students can have a table like this:
Bonus #2 – Use of CSS
We expect a reasonable use of CSS in styling to make the page reactive.
For example, when the mouse pointer hovers over the student record in the student area we can expect the student record to move slightly to the right.
Or when the student record is selected, the record is highlighted with a different colour.
This task is developed using VueCli. The approach is with reusable components. For the UI CSS is used Bootstrap v4.x Also, the given data has been converted into a valid json format and extracted to a seperate file with the name students.json.
Please ask me for any question you might have.
Note: The design is subjective.
Thank you for your time.