Project 2 of Full Stack JavaScript Techdegree
Branch: master
Clone or download
Latest commit 0cdf726 Oct 13, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
css initial commit Oct 10, 2017
js merge of refactor Oct 13, 2017
student-list-examples initial commit Oct 10, 2017
LICENSE Create LICENSE Oct 12, 2017
example-exceeds.html initial commit Oct 10, 2017
index.html removal of unneeded jQuery inclusion Oct 12, 2017 check off submission checklist Oct 12, 2017

Project 2 - Full Stack JavaScript Techdegree

Project instructions

  • When the page loads, your program should hide all but the first 10 students in the list.
  • Look at the HTML in the example-meets.html on lines 119-137 -- this is an example of the markup you'll need to add dynamically to the index.html page to create pagination links.
  • 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.
  • 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.
  • Your program should work for any number of students. There are 54 students in index.html, but you can test your code by adding the JavaScript file your write to the other lists of students we’ve provided in the student-list-examples folder.
  • If you would like some extra guidance on how to do this project, read Pagination Project Guide listed in the project resources for some helpful hints!
  • 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!

Extra Credit

  • Include a search component so that a user could search for a particular student or students. See the file example-exceeds.html and lines 16-19 for what the markup for the search component should look like.
  • When the "Search" button is clicked, the list of students is filtered to match the search. For example if the name Phillip is typed into the box list all students whose name or email includes Phillip.
  • If no matches are found by the search, include a message in the HTML to tell the user there are no matches.