Skip to content

Commit ec04b40

Browse files
john-smilgajohn-smilga
committed
18-pagination added
1 parent 19c2232 commit ec04b40

14 files changed

+613
-0
lines changed

‎18-pagination/final/app.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import fetchFollowers from './fetchFollowers.js'
2+
import displayFollowers from './displayFollowers.js'
3+
import paginate from './paginate.js'
4+
import displayButtons from './displayButtons.js'
5+
const title = document.querySelector('.section-title h1')
6+
const btnContainer = document.querySelector('.btn-container')
7+
8+
let index = 0
9+
let pages = []
10+
11+
const setupUI = () => {
12+
displayFollowers(pages[index])
13+
displayButtons(btnContainer, pages, index)
14+
}
15+
16+
const init = async () => {
17+
const followers = await fetchFollowers()
18+
title.textContent = 'pagination'
19+
pages = paginate(followers)
20+
setupUI()
21+
}
22+
23+
btnContainer.addEventListener('click', function (e) {
24+
if (e.target.classList.contains('btn-container')) return
25+
if (e.target.classList.contains('page-btn')) {
26+
index = parseInt(e.target.dataset.index)
27+
}
28+
if (e.target.classList.contains('next-btn')) {
29+
index++
30+
if (index > pages.length - 1) {
31+
index = 0
32+
}
33+
}
34+
if (e.target.classList.contains('prev-btn')) {
35+
index--
36+
if (index < 0) {
37+
index = pages.length - 1
38+
}
39+
}
40+
setupUI()
41+
})
42+
43+
window.addEventListener('load', init)

‎18-pagination/final/displayButtons.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const displayButtons = (container, pages, activeIndex) => {
2+
let btns = pages.map((_, pageIndex) => {
3+
return `<button class="page-btn ${
4+
activeIndex === pageIndex ? 'active-btn' : 'null '
5+
}" data-index="${pageIndex}">
6+
${pageIndex + 1}
7+
</button>`
8+
})
9+
btns.push(`<button class="next-btn">next</button>`)
10+
btns.unshift(`<button class="prev-btn">prev</button>`)
11+
container.innerHTML = btns.join('')
12+
}
13+
14+
export default displayButtons

‎18-pagination/final/displayFollowers.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const container = document.querySelector('.container')
2+
3+
const display = (followers) => {
4+
const newFollowers = followers
5+
.map((person) => {
6+
const { avatar_url, login, html_url } = person
7+
return `
8+
<article class='card'>
9+
<img src="${avatar_url}" alt='person' />
10+
<h4>${login}</h4>
11+
<a href="${html_url}" class="btn">view profile</a>
12+
</article>
13+
`
14+
})
15+
.join('')
16+
container.innerHTML = newFollowers
17+
}
18+
19+
export default display

‎18-pagination/final/fetchFollowers.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const url = 'https://api.github.com/users/john-smilga/followers?per_page=100'
2+
3+
const fetchFollowers = async () => {
4+
const response = await fetch(url)
5+
const data = await response.json()
6+
return data
7+
}
8+
9+
export default fetchFollowers

‎18-pagination/final/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Pagination Complete</title>
7+
<!-- font-awesome -->
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
11+
/>
12+
13+
<!-- stylesheet -->
14+
<link rel="stylesheet" href="./styles.css" />
15+
</head>
16+
<body>
17+
<main>
18+
<div class="section-title">
19+
<h1>Loading...</h1>
20+
<div class="underline"></div>
21+
</div>
22+
<section class="followers">
23+
<div class="container"></div>
24+
25+
<div class="btn-container"></div>
26+
</section>
27+
</main>
28+
<script type="module" src="./app.js"></script>
29+
</body>
30+
</html>

‎18-pagination/final/paginate.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const paginate = (followers) => {
2+
const itemsPerPage = 10
3+
const numberOfPages = Math.ceil(followers.length / itemsPerPage)
4+
5+
const newFollowers = Array.from({ length: numberOfPages }, (_, index) => {
6+
const start = index * itemsPerPage
7+
return followers.slice(start, start + itemsPerPage)
8+
})
9+
return newFollowers
10+
}
11+
12+
export default paginate

‎18-pagination/final/styles.css

+224
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
/*
2+
===============
3+
Variables
4+
===============
5+
*/
6+
7+
:root {
8+
/* dark shades of primary color*/
9+
--clr-primary-1: hsl(205, 86%, 17%);
10+
--clr-primary-2: hsl(205, 77%, 27%);
11+
--clr-primary-3: hsl(205, 72%, 37%);
12+
--clr-primary-4: hsl(205, 63%, 48%);
13+
/* primary/main color */
14+
--clr-primary-5: hsl(205, 78%, 60%);
15+
/* lighter shades of primary color */
16+
--clr-primary-6: hsl(205, 89%, 70%);
17+
--clr-primary-7: hsl(205, 90%, 76%);
18+
--clr-primary-8: hsl(205, 86%, 81%);
19+
--clr-primary-9: hsl(205, 90%, 88%);
20+
--clr-primary-10: hsl(205, 100%, 96%);
21+
/* darkest grey - used for headings */
22+
--clr-grey-1: hsl(209, 61%, 16%);
23+
--clr-grey-2: hsl(211, 39%, 23%);
24+
--clr-grey-3: hsl(209, 34%, 30%);
25+
--clr-grey-4: hsl(209, 28%, 39%);
26+
/* grey used for paragraphs */
27+
--clr-grey-5: hsl(210, 22%, 49%);
28+
--clr-grey-6: hsl(209, 23%, 60%);
29+
--clr-grey-7: hsl(211, 27%, 70%);
30+
--clr-grey-8: hsl(210, 31%, 80%);
31+
--clr-grey-9: hsl(212, 33%, 89%);
32+
--clr-grey-10: hsl(210, 36%, 96%);
33+
--clr-white: #fff;
34+
--clr-red-dark: hsl(360, 67%, 44%);
35+
--clr-red-light: hsl(360, 71%, 66%);
36+
--clr-green-dark: hsl(125, 67%, 44%);
37+
--clr-green-light: hsl(125, 71%, 66%);
38+
--clr-black: #222;
39+
40+
--transition: all 0.3s linear;
41+
--spacing: 0.1rem;
42+
--radius: 0.75rem;
43+
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
44+
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
45+
--max-width: 1170px;
46+
--fixed-width: 620px;
47+
}
48+
/*
49+
===============
50+
Global Styles
51+
===============
52+
*/
53+
54+
*,
55+
::after,
56+
::before {
57+
margin: 0;
58+
padding: 0;
59+
box-sizing: border-box;
60+
}
61+
body {
62+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
63+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
64+
background: var(--clr-white);
65+
color: var(--clr-grey-1);
66+
line-height: 1.5;
67+
font-size: 0.875rem;
68+
}
69+
ul {
70+
list-style-type: none;
71+
}
72+
a {
73+
text-decoration: none;
74+
}
75+
h1,
76+
h2,
77+
h3,
78+
h4 {
79+
letter-spacing: var(--spacing);
80+
text-transform: capitalize;
81+
line-height: 1.25;
82+
margin-bottom: 0.75rem;
83+
}
84+
h1 {
85+
font-size: 2.75rem;
86+
}
87+
h2 {
88+
font-size: 2rem;
89+
}
90+
h3 {
91+
font-size: 1.25rem;
92+
}
93+
h4 {
94+
font-size: 0.875rem;
95+
}
96+
p {
97+
margin-bottom: 1.25rem;
98+
color: var(--clr-grey-5);
99+
}
100+
@media screen and (min-width: 800px) {
101+
h1 {
102+
font-size: 3rem;
103+
}
104+
h2 {
105+
font-size: 2.5rem;
106+
}
107+
h3 {
108+
font-size: 1.75rem;
109+
}
110+
h4 {
111+
font-size: 1rem;
112+
}
113+
body {
114+
font-size: 1rem;
115+
}
116+
h1,
117+
h2,
118+
h3,
119+
h4 {
120+
line-height: 1;
121+
}
122+
}
123+
124+
/*
125+
===============
126+
Pagination
127+
===============
128+
*/
129+
.section-title {
130+
text-align: center;
131+
margin: 4rem 0 6rem 0;
132+
}
133+
.underline {
134+
width: 8rem;
135+
height: 0.25rem;
136+
background: var(--clr-primary-5);
137+
margin: 0 auto;
138+
}
139+
.followers {
140+
width: 90vw;
141+
max-width: var(--max-width);
142+
margin: 5rem auto;
143+
}
144+
.container {
145+
display: grid;
146+
gap: 2rem;
147+
margin-bottom: 4rem;
148+
}
149+
@media screen and (min-width: 576px) {
150+
.container {
151+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
152+
}
153+
}
154+
.card {
155+
background: var(--clr-white);
156+
border-radius: var(--radius);
157+
box-shadow: var(--light-shadow);
158+
padding: 2rem 3.5rem;
159+
text-align: center;
160+
}
161+
.card img {
162+
width: 130px;
163+
height: 130px;
164+
border-radius: 50%;
165+
object-fit: cover;
166+
margin-bottom: 0.75rem;
167+
}
168+
169+
.card h4 {
170+
margin-bottom: 1.5rem;
171+
font-size: 0.85rem;
172+
color: var(--clr-grey-5);
173+
}
174+
175+
.btn {
176+
padding: 0.35rem 0.75rem;
177+
letter-spacing: 1.6px;
178+
font-size: 0.75rem;
179+
color: var(--clr-white);
180+
background: var(--clr-primary-5);
181+
border-radius: var(--radius);
182+
border-color: transparent;
183+
text-transform: uppercase;
184+
transition: var(--transition);
185+
cursor: pointer;
186+
}
187+
188+
.btn-container {
189+
display: flex;
190+
justify-content: center;
191+
flex-wrap: wrap;
192+
}
193+
.page-btn {
194+
width: 2rem;
195+
height: 2rem;
196+
background: var(--clr-primary-7);
197+
border-color: transparent;
198+
border-radius: 5px;
199+
cursor: pointer;
200+
margin: 0.5rem;
201+
transition: var(--transition);
202+
}
203+
.active-btn {
204+
background: var(--clr-primary-1);
205+
color: var(--clr-white);
206+
}
207+
.prev-btn,
208+
.next-btn {
209+
background: transparent;
210+
border-color: transparent;
211+
font-weight: bold;
212+
text-transform: capitalize;
213+
letter-spacing: var(--spacing);
214+
margin: 0.5rem;
215+
font-size: 1rem;
216+
cursor: pointer;
217+
}
218+
219+
@media screen and (min-width: 775px) {
220+
.btn-container {
221+
margin: 0 auto;
222+
max-width: 700px;
223+
}
224+
}

‎18-pagination/setup/app.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import fetchFollowers from './fetchFollowers.js'
2+
import displayFollowers from './displayFollowers.js'
3+
import paginate from './paginate.js'
4+
import displayButtons from './displayButtons.js'

‎18-pagination/setup/displayButtons.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const displayButtons = () => {}
2+
3+
export default displayButtons

‎18-pagination/setup/displayFollowers.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const display = () => {}
2+
3+
export default display

‎18-pagination/setup/fetchFollowers.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const url = 'https://api.github.com/users/john-smilga/followers?per_page=100'
2+
3+
const fetchFollowers = async () => {}
4+
5+
export default fetchFollowers

‎18-pagination/setup/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Pagination Starter</title>
7+
<!-- font-awesome -->
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
11+
/>
12+
13+
<!-- stylesheet -->
14+
<link rel="stylesheet" href="./styles.css" />
15+
</head>
16+
<body>
17+
<h1>pagination starter</h1>
18+
<script type="module" src="./app.js"></script>
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)