/studentlist-safarimobile-vuecli

task from safarimobile. Manipulation with student json data

Primary LanguageVue

student-safarimobile

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Task

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.

Development

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.