Added Grade Select Filter Tool

[kyleteeter]

Add Grade Select Filter Tool

The goal of this feature was to add functionality that will allow the user to quickly filter the students by their grades. I also added a reset button that clears the filter and reverts back to seeing all students. In addition to those functionality changes, I have also updated the UI to be a little more dynamic and interesting for the user.

Before Screenshot:

After Screenshot:

Testing

In order to test this feature, we need to verify that all previous functionality is still working as expected and then we also need to test the new filter and reset buttons. Please follow the below steps to test.

Previous functionality remains

1. Open any given student information card.
2. Click the "Edit" button and verify that fields become editable.
3. Update some of the fields and click "Done Editing".
4. Verify that the changes remain.
5. Refresh your browser tab and confirm that the edits you made persist in the UI.
6. Repeat Steps 1-5 on a parent that is nested inside the student cards.

New features work as expected

1. Ensure that the default on page load shows all of the students.
2. Use the Select dropdown in the top right to select the Grade you would like to filter for.
3. Ensure that the expected grades appear.
4. Select several different grades as well as reselect "All" on the dropdown to verify that the filter is working properly.
5. When you have selected a specific grade, click the "Reset" button and the UI should restore the view of all.
6. Make sure that the dropdown doesn't have repeat grades and that it is showing all the grades of the students in the directory.

Notes:

I decided to filter out the student card by adding and removing classes of "show" and "hide" so that I could easily target the elements in CSS. Also, I think it makes the most logical sense when reading the code as to what each class does.