Project 2 from TreeHouse. List Pagination and Filtering.

In this project, I use a common web development technique known as "pagination" to enhance the usability of a web page.

I start with a page that contains a list of 54 student names, photos and email addresses. I write JavaScript to display 10 names at a time, and add a navigation system -- a series of links at the bottom of the page -- to let users click through the other student entries, 10 at a time.

While making these improvements, I use the principle of "progressive enhancement." The page still display the students' names without JavaScript turned on, but will be much improved (enhanced) with the JavaScript programming I add. In other words, I add JavaScript to paginate and improve the project, without altering the project in such a way that JavaScript is required to use the web page.

My pagination solution work with a list of any number of students, not just with the supplied list of 54 students. This means my solution flexible enough to respond to lists of different lengths.

List Pagination and Filtering

Open file:

index.html

Project contains only plain "vanilla" JavaScript and doesn't rely on jQuery, some other library, or any code snippets or plugins.

Code comments have been added explaining how the functions work.