Cam Dresie

Greetings! I spend my weekdays building the future of AI in the legal industry at Ontra. I'm a California licensed attorney and hold a law degree from Washington University in St. Louis and a Masters in Computer and Information Technology from the University of Pennsylvania.

Learn More →
Cam Dresie

Paginated Student List

For this project, I utilized vanilla JavaScript (no libraries) to create a dynamic pagination system for a list. My code appends a list of links to the bottom of the page that allows a user to navigate through the full list of students 10 at a time. The list is dynamic, so it updates automatically depending on the size of the list input. After completing the initial code mentioned above, I elected to add a search bar function. It is appended to the DOM using vanilla JavaScript. There are two event listeners, one on the search button and one on the search text input field. As a user types, the search function dynamically searches through each name on the list to see if there are any matches. If the user inputs a string of text that matches a user's name in entirety or in part, the function displays that name and hides all others. If no matches are found, a message is displayed telling the user to try another name as no matches were found.

Technologies
  • HTML
  • CSS
  • JavaScript
  • Dynamic Pagination and Searchbar
Live DemoGitHub Repo