The assignment here is to write an app using a database named CIT$321$ with a collection named students; we will provide a CSV file of the data. You need to use Vue.js to display $2$ pages.

The database contains $51$ documents. The first rows of the CSV file look like this:

sid last$\_$name first$\_$name major hrs$\_$attempted gpa$\_$points

$1$ Astaire Humphrey CIT $1034$

$2$ Bacall Katharine EET $40128$

$3$ Bergman Bette EET $4297$

$4$ Bogart Cary CIT $1133$

$5$ Brando James WEB $59183$

$6$ Cagney Marlon CIT $1340$

GPA is calculated as gpa$\_$points divided by hrs$\_$attempted. GPA points would have been arrived at by adding $4$ points for each credit hour of A$,3$ points for each credit hour of B$,$ and so on$.$ Humphrey Astaire would have a gpa of $34/10=3\mathrm{.}4.$

The CSV file will be on the course website. It is named CIT$321.$csv$.$

Here is what your model should look like. The model is named Student.js

var mongoose $=$ require$(\text{'}$mongoose$\text{'})$;

mongoose.connect$(\text{'}$mongodb:$//127\mathrm{.}0\mathrm{.}0\mathrm{.}1$:$27017/$CIT$321\text{'})$;

var studentSchema $=$ new mongoose.Schema$(\{$

sid: $\{$type: Number, required: true, unique: true$\},$

last$\_$name: $\{$type: String, required: true$\},$

first$\_$name: $\{$type: String, required: true$\},$

major: $\{$type: String, required: true$\},$

hrs$\_$attempted: $\{$type: Number, required: true$\},$

gpa$\_$points: $\{$type: Number, required: true$\}$

$\})$;

module.exports $=$ mongoose.model$(\text{'}$Student$\text{'},$ studentSchema$)$;

Here$$s what the pages should look like, more or less. You have $2$ pages, index.html and edit.html in the public folder. The navbar has links named Home and Edit Student Data. Home opens the index.html page that has a drop$-$down list that will allow us to filter the students by major If you click the arrow and select CIT, for example, you get something that looks like this.

Note the GPA is calculated and displayed.

You can calculate the gpa a couple of ways, but this will work.

$\{\{($student$.$gpa$\_$points $/$ student.hrs$\_$attempted$).$toFixed$(1)\}\}$

On the other hand, when you click the navbar link for Edit Student Data, you get this, with the first

record displaying as the page loads.

The operation of this page is described in the lecture notes for the week of Vue.js $2$ in the cars$4$sale

example. But The buttons should allow you to step forward and backward thru the data and not exceed

the limits$,$ and you should be able to update the major, gpa points and hrs attempted of a student. You

should also be able to delete a student.

Here are the requirements.

$$ Use Vue.js and Bootstrap. Your pages do not need to look exactly like mine, but they need to

convey the same information.

$$ Your database and collection, along with your model, must be compatible with mine.

$$ The index page should allow filtering all students by major and displaying their GPA

$$ The Edit Student data pages should allow displaying each document one at a time, allowing editing major, gpa points, and hrs attempted.

$$ You should be able to delete a student.

$$ you need to put yout two JavaScript files somewhere in the public public folder and link them to the appropriate html page.

$$ Your routes in index.js should only have to provide data. Formatting is done thru Vue.js