Skip to content

Commit eaa086b

Browse files
CodeDotJSCodeDotJS
authored
pagination simulation
1 parent 86ed90e commit eaa086b

File tree

1 file changed

+151
-0
lines changed

1 file changed

+151
-0
lines changed

‎random/index1.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Free Classic Books (PDF)</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
max-width: 700px;
11+
margin: 40px auto;
12+
padding: 0 16px;
13+
line-height: 1.6;
14+
background-color: #f9f9f9;
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
}
20+
21+
.book {
22+
background: #fff;
23+
padding: 20px;
24+
border-radius: 6px;
25+
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
}
30+
31+
a.download {
32+
text-decoration: none;
33+
background: #007bff;
34+
color: #fff;
35+
padding: 8px 12px;
36+
border-radius: 4px;
37+
font-size: 14px;
38+
}
39+
40+
a.download:hover {
41+
background: #0056b3;
42+
}
43+
44+
.pagination {
45+
display: flex;
46+
justify-content: space-between;
47+
align-items: center;
48+
margin-top: 24px;
49+
}
50+
51+
button {
52+
padding: 8px 14px;
53+
border: none;
54+
border-radius: 4px;
55+
background: #333;
56+
color: #fff;
57+
cursor: pointer;
58+
}
59+
60+
button:disabled {
61+
background: #aaa;
62+
cursor: not-allowed;
63+
}
64+
65+
footer {
66+
text-align: center;
67+
margin-top: 40px;
68+
font-size: 14px;
69+
color: #666;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
75+
<h1>Free Classic Books (PDF)</h1>
76+
<p>Click the download button to get a free PDF copy of each book.</p>
77+
78+
<div id="book-container"></div>
79+
80+
<div class="pagination">
81+
<button id="prevBtn">← Previous</button>
82+
<span id="pageInfo"></span>
83+
<button id="nextBtn">Next →</button>
84+
</div>
85+
86+
<footer>
87+
<p>All books provided via Planet eBook.</p>
88+
</footer>
89+
90+
<script>
91+
const books = [
92+
{
93+
title: "Dubliners",
94+
author: "James Joyce",
95+
url: "https://www.planetebook.com/free-ebooks/dubliners.pdf"
96+
},
97+
{
98+
title: "The Adventures of Huckleberry Finn",
99+
author: "Mark Twain",
100+
url: "https://www.planetebook.com/free-ebooks/the-adventures-of-huckleberry-finn.pdf"
101+
},
102+
{
103+
title: "Middlemarch",
104+
author: "George Eliot",
105+
url: "https://www.planetebook.com/free-ebooks/middlemarch.pdf"
106+
}
107+
];
108+
109+
let currentPage = 0;
110+
111+
const container = document.getElementById("book-container");
112+
const pageInfo = document.getElementById("pageInfo");
113+
const prevBtn = document.getElementById("prevBtn");
114+
const nextBtn = document.getElementById("nextBtn");
115+
116+
function renderBook() {
117+
const book = books[currentPage];
118+
119+
container.innerHTML = `
120+
<div class="book">
121+
<span><strong>${book.title}</strong> – ${book.author}</span>
122+
<a class="download" href="${book.url}" target="_blank" rel="noopener">
123+
Download PDF
124+
</a>
125+
</div>
126+
`;
127+
128+
pageInfo.textContent = `Page ${currentPage + 1} of ${books.length}`;
129+
prevBtn.disabled = currentPage === 0;
130+
nextBtn.disabled = currentPage === books.length - 1;
131+
}
132+
133+
prevBtn.onclick = () => {
134+
if (currentPage > 0) {
135+
currentPage--;
136+
renderBook();
137+
}
138+
};
139+
140+
nextBtn.onclick = () => {
141+
if (currentPage < books.length - 1) {
142+
currentPage++;
143+
renderBook();
144+
}
145+
};
146+
147+
renderBook();
148+
</script>
149+
150+
</body>
151+
</html>

0 commit comments

Comments
 (0)