Grade App with Vue.js Learning objectives
• Use a component-based front-end framework to create a web application Requirements
Create an application using Vue.js which allows an instructor to manage and analyze a list of grades associated with courses. The functionality should be implemented using Vue.js in the expected ways (e.g. using templates, directives, Vue instance data, computed properties, etc.).
The focus of the application should be a list of grades, with each grade having an associated course name.
The instructor should be able to do the following:
• Create a grade. After clicking on a create button, a modal dialog box should appear. The instructor should be able to enter a new grade between 0- 100 and a course name (e.g. math/95, english/67). If the course name already exists in the list of grades or the grade is not between 0-100, the instructor should be presented with an instructive error message and asked to fix their grade entry. If the data entered is OK, the modal dialog box should disappear and the grade and course name should appear in a list.
• Delete a grade The instructor should be able to click a delete icon next to each grade in the list to delete the grade from the list.
• Edit a grade. The instructor should be able to click an edit icon next to each grade in the list, and the same modal dialog used to create the grade item should appear. The model dialog should allow the instructor to edit the grade and course name the same as if they were creating it for the first time.
• Sort grades. By clicking arrow icons at the top of the list, the instructor should be able to sort the grades entered by grade (ascending/descending) or course name (ascending/descending).
• Filter courses. An input text box at the top of the page should allow the instructor to type in a course filter. As the instructor types in each individual letter, the list of grades should be filtered to contain only those grades with course names containing the filter text. So for example if the instructor has typed in “History” than “American History” and “Canadian History” would
appear in the grade list, but “Math” and “Science” would not. If the instructor returns the input text box to a blank state, the entire unfiltered list should appear again.
• Filter honor grades. An “honor grades” button at the top of the page should have an on/off state, and it should initially be off. When the instructor clicks the button, the button itself should switch to a noticeably “on” state (e.g. make it green), and the grade list should only contain grades in which the grade is >= 80. When the instructor clicks the button when it is in an “on” state, it should revert back to the “off” state, and the list of grades should no longer be filtered for grades >=80.
• Filter fail grades. A “fail grades” button at the top of the page should have an on/off state, and it should initially be off. When the instructor clicks the button, the button itself should switch to a noticeably “on” state (e.g. make it green), and the grade list should only contain grades in which the grade is <50. When the instructor clicks the button when it is in an “on” state, it should revert back to the “off” state, and the list of grades should no longer be filtered for grades <50.Note that the effects of sorting and/or filtering grades should be cumulative. For example, if a user sorts grades by course name ascending, they could also filter for fail grades, and filter by entering a course filter, and all of these should together impact how the list is displayed (and how much of the list is displayed). This goes for any other combination of filters and any sort option.At the bottom of the page there should be three values: min, max and average. The values should each have a label so that the instructor knows what is what. The values should be the min, max and average of whatever grades currently appear in the list (i.e. the values should take into account any filtering that is currently occurring).Style the application to a professional quality. Just changing the background and font color isn’t enough… grades in the list, icons and data should all be done to your best ability. If you want to use styles you find online to help you, that is OK so long as you cite them. Use some kind of nice looking transition or animation for deleting grades from the list (see: https://vuejs.org/v2/guide/transitions.html#CSS- Animations).For this lab, just include Vue.js and any other libraries you use with script tags (i.e. no build tools or pre-compilation of templates). We will go over build tools before we’re done with Vue.js, but it doesn’t matter for our purposes with this lab and Ican see your source this way.Save your main file as index.html. This application does not require a back-end.Submission instructionsWhen you have completed the lab, put your source files in a folder called lab6.zip and submit it in the Dropbox.Marking scheme List 10 Create10 Edit10 Delete10 Sort 10 Filter20 Max/Min/Avg10 Style20 Total
Reviews
There are no reviews yet.