https://github.com/thehelpfultipper/custom_pagination
https://github.com/thehelpfultipper/custom_pagination
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/thehelpfultipper/custom_pagination
- Owner: thehelpfultipper
- License: other
- Created: 2023-10-15T18:35:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-17T16:05:43.000Z (over 2 years ago)
- Last Synced: 2025-12-19T09:31:04.313Z (6 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Custom Pagination (Vanilla JS)
Develop custom pagination nav that collapses multiple pages into interactive ellipses. A user is able to click the ellipsis to input a page that isn’t displaying in the pagination nav. Complete the project using vanilla JS.
## Live Demo
A Pen created on CodePen.io. Original URL: [https://codepen.io/thehelpfultipper/pen/vYvwKbR](https://codepen.io/thehelpfultipper/pen/vYvwKbR)
## Tutorial
Find the deets on our tutorial blog post: [This Is How To Build Custom Pagination With JavaScript](https://thehelpfultipper.com/how-to-build-custom-pagination-with-javascript/)
## Objective
Navigate across pages of data using pagination buttons. Include the option to navigate via user input.
**Highlights:**
- Integrating and modifying third-party code into personal project
- Working with custom `Pagination` JavaScript object
- Responsive font and layout design using SCSS
## Credits
- This project was inspired by DM's design portfolio (a work in progress).
- Pagination design inspo from [Aung Thu Hein on dribbble](https://dribbble.com/shots/22586587-Pagination-DailyUi-085).
- Integrated code ref from [Dave Alger on CodePen](https://codepen.io/run-time/pen/raVGMp).
## License
This project is licensed under the MIT License.