grade-calc-rm

What Is This Project? :

• This is a coding challenge given out to people interested in becoming web developer interns for RipeMetrics.
• The application is a simple gpa calculator that displays a list of students, their grades for different subjects and of course their gpas.
• It also allows the user to add new students that will automatically be displayed in the list after submission.
• Students with the highest gpa will be highlighted green whereas students with lowest gpas will be highlighted in red.
• To see the exact specs for the project, read the "Project Specs" area below.

How Did I Build This Project? :

• I used Vue.js and Bootstrap for the front-end aspects
• For the input validation I used a package called Vuelidate

Making the list of students:

• For the student list, I used Vuex to serve as the store for all of the student data. When the application first starts an action in vuex grabs the stored data from the students.json file and transfers it to an empty array in Vuex's store. From this array I use a getter to retreive all of the students to be shown in the list.
• When new students are added an action pushes that data into the same array in Vuex's store. The getter used to retrieve that data is used a computed method so that whenever the data in the store changes, the list updates automatically.
• To render the list I use a technique from Vue.js known as "v-for" which acts as a for loop. It uses the id of the student to serve as a key then searches for each object(student) in the array (studentList.data). With "student" being the object it grabs each element nested inside to be shown in the list (name, grades, gpa).

Getting the letter grades for each subject:

• If you look at the code in "StudentList.vue" where the v-for is you will see that in order to get the actual letter grade for each subject I had to use a "split". The reason for this is that the data for each student's grade in the students.json file is stored as "subject - A". In order to get that letter at the end of the string I had to use a split to separate it.
• When adding new students to the store, I actually append the value for each subject into a similar string as seen in students.json so that the v-for can read it the same way.

Calculating each student's gpa:

• To retrieve the gpa for each student I have a mutation in Vuex. The mutation uses several for loops to retrieve the letter grades just as mentioned in the v-for loop. If I wanted to I could have potentially just made an array for each subject in the store and used those values wherever needed but I didn't think it was necessary. Once the letter grades for each of the students subjects are retrieved they are converted into numeric values with "if" statements. Instead of having different arrays for each subject I simply add up the points for each student then place them into an array. That array is used by a method that calculated the gpa for each student then creates a new gpa element for each student in the Vuex store.

Highlighting students with the highest and lowest gpas:

• To highlight the student or students with the highest gpa I started by finding the highest gpa value. In the store I made a mutation called 'TOP_STUDENT' that pushes all of the gpa values into an empty array. I then used "Math.max" to find the highest value in that array and send it to an empty object in the state called "highestGpa". In the v-for loop in StudentList.vue I have a use a v-bind for css that determines if the value for each student's gpa matches the value in the state (highestGpa). If true, that student's row is highlighted green. If a new student with a better gpa is added, students with lower grades lose their green highlight.
• For highlighting students with the lowest gpa scores I simply just used "Math.min" in the 'TOP_STUDENT' mutation to find the lowest value in that array then sent that value to an empty object in the state (lowestGpa). The same v-bind for css that highlights top students green also has logic for highlighting the students with the lowest gpas in red.

Project Specs

---

Goal :

• Using vue or react, create a table which calculates the GPA off of a list of students. New students can be added via user input.

Project Specs :

• Table with 6 columns: Name, Math, History, Science, English, GPA.
• 5 text inputs labeled Name, Math, History, Science, and English.
• A button to input a new student defined by the text inputs.

Requirements :

• Uses provided json file as initial data.
• Built using Vue.js or React.js.
• Basic input validation.
• The student with the top GPA will have their row highlighted green and the student with the lowest GPA will have their row highlighted red.
• If multiple students share the top or lowest GPA are highlighted accordingly.
• If a student is added with the highest or lowest GPA, the table will correctly highlight the student or students.
• Project is uploaded onto github.

Notes :

• If any of the instructions are unclear, feel free to send an email addressing them.
• Any additional development is not required, but is encouraged.
• Extra development to consider:
  • Use a Store (ex Redux/Vuex).
  • Create CSS styles/Animations.
  • Save new students into the json file.
  • Create remove functionality for students.
  • Creative liberties - add in a feature not listed here!