-
Use the filters-example.html file to guide your decision making. Using progressive enhancement, your work should affect the index.html file.
-
Since only 10 students should be shown at a time, your programming needs to calculate the number of pages needed and add the appropriate number of links to the bottom of the page.
-
Hide all but the first 10 students when the page loads.
-
When a user clicks on “2” in the pagination, students 11 through 20 are shown. When a user clicks “3”, students 21 through 30 are shown. And so on. When “6” is clicked 51 through 55 should be shown.
-
Using progressive enhancement, add the student search markup as presented in the filters-example.html file to the index.html file.
-
Add an event listener to the search button. When the user clicks on the button it should use the text in the search input to filter the results. Searching should be case insensitive. e.g. a search for “Susan” should return results for “susan” and “Susan".
-
Users should be able to search by name or e-mail address. And partial matches, like just a first name, should be displayed in the results.
-
Search results should also be paginated. For example, if the search returns more than 10 results, those results should be paginated too.
-
Before you submit your project for review, make sure you can check off all of the items on the Student Project Submission Checklist. The checklist is designed to help you make sure you’ve met the grading requirements and that your project is complete and ready to be submitted!
-
Include simple animations when transitioning between pages.
-
As the user types in the search box, dynamically filter the student listings. In other words, after each letter is typed into the search box, display any listings that match .
-
If no matches are found, include a message in the HTML to tell the user there are no matches.
Live Demo of this project for peer review.