Embedded Files
<html><head><base href="https://tip-calculator.example.com#about">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Pagination</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
padding: 20px;
background-color: #f4f4f4;
}
h1 {
margin-bottom: 30px;
text-align: center;
color: #333;
}
.pagination-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
list-style: none;
margin-bottom: 30px;
}
.pagination-list li {
background-color: #fff;
padding: 20px;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pagination-list li:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.pagination-list li.hide-list-item {
display: none;
}
.pagination-container {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.pagination-button {
padding: 10px 15px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.pagination-button:hover:not(.disabled) {
background-color: #0056b3;
}
.pagination-button.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination-numbers {
display: flex;
gap: 10px;
}
.pagination-number {
padding: 8px 12px;
font-size: 16px;
background-color: #fff;
color: #333;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.pagination-number:hover:not(.active-state) {
background-color: #f0f0f0;
}
.pagination-number.active-state {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
@media (max-width: 600px) {
.pagination-list {
grid-template-columns: 1fr;
}
.pagination-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>Enhanced Pagination Using JavaScript</h1>
<ul class="pagination-list" data-current-page="1"></ul>
<div class="pagination-container">
<button class="pagination-button prev-btn">Previous</button>
<div class="pagination-numbers"></div>
<button class="pagination-button next-btn">Next</button>
</div>
<script>
const paginationListWrapper = document.querySelector(".pagination-list");
const paginationNumbers = document.querySelector(".pagination-numbers");
const previousButton = document.querySelector(".prev-btn");
const nextButton = document.querySelector(".next-btn");
let paginationLimit = 10;
let pageCount;
let currentPage = 1;
function createDummyData() {
for (let i = 1; i <= 100; i++) {
const li = document.createElement("li");
li.textContent = `Card ${i}`;
paginationListWrapper.appendChild(li);
}
}
function createPageNumber(index) {
const pageNumber = document.createElement("button");
pageNumber.classList.add("pagination-number");
pageNumber.textContent = index;
pageNumber.setAttribute("page-index", index);
pageNumber.addEventListener("click", () => handleCurrentPage(index));
return pageNumber;
}
function createPaginationNumbers() {
paginationNumbers.innerHTML = '';
const extractAllListItems = document.querySelectorAll(".pagination-list li");
pageCount = Math.ceil(extractAllListItems.length / paginationLimit);
if (pageCount <= 7) {
for (let i = 1; i <= pageCount; i++) {
paginationNumbers.appendChild(createPageNumber(i));
}
} else {
paginationNumbers.appendChild(createPageNumber(1));
if (currentPage > 3) {
paginationNumbers.appendChild(document.createTextNode('...'));
}
let start = Math.max(2, currentPage - 1);
let end = Math.min(pageCount - 1, currentPage + 1);
for (let i = start; i <= end; i++) {
paginationNumbers.appendChild(createPageNumber(i));
}
if (currentPage < pageCount - 2) {
paginationNumbers.appendChild(document.createTextNode('...'));
}
paginationNumbers.appendChild(createPageNumber(pageCount));
}
}
function handleActiveCurrentPageNumber() {
document.querySelectorAll(".pagination-number").forEach((button) => {
button.classList.remove("active-state");
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex === currentPage) {
button.classList.add("active-state");
}
});
}
function handlePaginationButtonStatus() {
previousButton.classList.toggle("disabled", currentPage === 1);
nextButton.classList.toggle("disabled", currentPage === pageCount);
}
function handleCurrentPage(pageNumber) {
currentPage = pageNumber;
const extractAllListItems = document.querySelectorAll(".pagination-list li");
const prevRange = (pageNumber - 1) * paginationLimit;
const currRange = pageNumber * paginationLimit;
extractAllListItems.forEach((item, index) => {
item.classList.toggle("hide-list-item", index < prevRange || index >= currRange);
});
createPaginationNumbers();
handleActiveCurrentPageNumber();
handlePaginationButtonStatus();
}
function initPagination() {
createDummyData();
createPaginationNumbers();
handleCurrentPage(1);
previousButton.addEventListener("click", () => {
if (currentPage > 1) handleCurrentPage(currentPage - 1);
});
nextButton.addEventListener("click", () => {
if (currentPage < pageCount) handleCurrentPage(currentPage + 1);
});
}
initPagination();
</script>
</body>
</html>
Page updated
Google Sites
Report abuse