Skip to content

Commit f7246eb

Browse files
solygambassolygambas
committed
add inifinite scroll posts
1 parent 6fc2656 commit f7246eb

File tree

8 files changed

+236
-10
lines changed

8 files changed

+236
-10
lines changed

‎67-expense tracker/style.css

+1-7
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,9 @@ body {
5252
}
5353

5454
h1 {
55-
font-size: 1.5rem;
55+
font-size: 1.25rem;
5656
}
5757

58-
/* h1 {
59-
font-size: 1.17rem;
60-
font-weight: lighter;
61-
margin: 1rem;
62-
} */
63-
6458
h2 {
6559
font-size: 1.17rem;
6660
}

‎68-music player/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ <h2 id="title" class="title"></h2>
2424
</div>
2525
</div>
2626
<audio
27-
src="https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/music/ukulele.mp3?raw=true"
27+
src="https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/music/summer.mp3?raw=true"
2828
id="audio"
2929
></audio>
3030
<div class="img-container">
3131
<img
32-
src="https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/images/ukulele.jpg?raw=true"
32+
src="https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/images/summer.jpg?raw=true"
3333
alt="music-cover"
3434
id="cover"
3535
/>

‎68-music player/script.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const title = document.getElementById("title");
99
const cover = document.getElementById("cover");
1010

1111
const songs = ["hey", "summer", "ukulele"];
12-
let songIndex = 2;
12+
let songIndex = 1;
1313

1414
function getSongTitle(song) {
1515
return song.charAt(0).toUpperCase() + song.slice(1);

‎68-music player/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
}
66

77
body {
8+
background-color: #f7f7f7;
89
background-image: linear-gradient(
910
0deg,
1011
rgba(247,247,247, 1) 23.8%,

‎69-infinite scroll posts/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>My Blog</title>
8+
</head>
9+
<body>
10+
<h1>My Blog</h1>
11+
<div class="filter-container">
12+
<input
13+
type="text"
14+
name="filter"
15+
id="filter"
16+
class="filter"
17+
placeholder="Filter posts..."
18+
/>
19+
</div>
20+
<div id="posts-container"></div>
21+
<div class="loader" id="loader">
22+
<div class="circle"></div>
23+
<div class="circle"></div>
24+
<div class="circle"></div>
25+
</div>
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

‎69-infinite scroll posts/script.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const postsContainer = document.getElementById("posts-container");
2+
const loading = document.getElementById("loader");
3+
const filter = document.getElementById("filter");
4+
5+
let limit = 5;
6+
let page = 1;
7+
let isLoading = false;
8+
9+
async function getPosts() {
10+
const res = await fetch(
11+
`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
12+
);
13+
const data = await res.json();
14+
return data;
15+
}
16+
17+
function capitalize(text) {
18+
return text.charAt(0).toUpperCase() + text.slice(1);
19+
}
20+
21+
async function showPosts() {
22+
const posts = await getPosts();
23+
posts.forEach((post) => {
24+
const postEl = document.createElement("div");
25+
postEl.classList.add("post");
26+
postEl.innerHTML = `
27+
<div class="number">${post.id}</div>
28+
<div class="post-info">
29+
<h2 class="post-title">${capitalize(post.title)}</h2>
30+
<p class="post-body">${capitalize(post.body)}</p>
31+
</div>
32+
`;
33+
postsContainer.appendChild(postEl);
34+
});
35+
}
36+
37+
function showLoading() {
38+
isLoading = true;
39+
loader.classList.add("show");
40+
setTimeout(() => {
41+
loader.classList.remove("show");
42+
setTimeout(() => {
43+
page++;
44+
showPosts();
45+
}, 300);
46+
isLoading = false;
47+
}, 1000);
48+
}
49+
50+
function filterPosts(e) {
51+
console.log("running");
52+
const term = e.target.value.toUpperCase();
53+
const posts = document.querySelectorAll(".post");
54+
posts.forEach((post) => {
55+
const title = post.querySelector(".post-title").innerText.toUpperCase();
56+
const body = post.querySelector(".post-body").innerText.toUpperCase();
57+
if (title.indexOf(term) > -1 || body.indexOf(term) > -1) {
58+
post.style.display = "flex";
59+
} else {
60+
post.style.display = "none";
61+
}
62+
});
63+
}
64+
65+
window.addEventListener("scroll", () => {
66+
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
67+
if (scrollTop + clientHeight >= scrollHeight - 5 && !isLoading) showLoading();
68+
});
69+
70+
filter.addEventListener("input", filterPosts);
71+
72+
// Init
73+
showPosts();

‎69-infinite scroll posts/style.css

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
:root {
4+
--main-color: #9cd4fa;
5+
--secondary-color: #5da7e1;
6+
--light-color: #eef7fc;
7+
--dark-color: #171830;
8+
}
9+
10+
* {
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
background-color: var(--main-color);
16+
color: var(--dark-color);
17+
font-family: "Roboto", sans-serif;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
justify-content: center;
22+
min-height: 100vh;
23+
margin: 0;
24+
padding-bottom: 100px;
25+
}
26+
27+
h1 {
28+
margin-bottom: 0;
29+
text-align: center;
30+
}
31+
32+
.filter-container {
33+
margin-top: 20px;
34+
width: 80vw;
35+
max-width: 800px;
36+
}
37+
38+
.filter {
39+
width: 100%;
40+
padding: 12px;
41+
border-radius: 1rem;
42+
font-size: 1rem;
43+
border: none;
44+
}
45+
46+
.filter:focus {
47+
outline: none;
48+
}
49+
50+
.post {
51+
position: relative;
52+
background-color: var(--light-color);
53+
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
54+
border-radius: 1rem;
55+
padding: 20px;
56+
margin: 40px 0;
57+
display: flex;
58+
width: 80vw;
59+
max-width: 800px;
60+
}
61+
62+
.post .post-title {
63+
margin: 0;
64+
}
65+
66+
.post .post-body {
67+
margin: 15px 0 0;
68+
line-height: 1.3;
69+
}
70+
71+
.post .post-info {
72+
margin-left: 20px;
73+
}
74+
75+
.post .number {
76+
position: absolute;
77+
top: -15px;
78+
left: -15px;
79+
font-size: 15px;
80+
width: 40px;
81+
height: 40px;
82+
border-radius: 50%;
83+
background-color: var(--secondary-color);
84+
color: var(--light-color);
85+
display: flex;
86+
align-items: center;
87+
justify-content: center;
88+
padding: 7px 10px;
89+
}
90+
91+
.loader {
92+
opacity: 0;
93+
display: flex;
94+
position: fixed;
95+
bottom: 50px;
96+
transition: opacity 0.3s ease-in;
97+
}
98+
99+
.loader.show {
100+
opacity: 1;
101+
}
102+
103+
.circle {
104+
background-color: var(--light-color);
105+
width: 10px;
106+
height: 10px;
107+
border-radius: 50%;
108+
margin: 5px;
109+
animation: bounce 0.5s ease-in infinite;
110+
}
111+
112+
.circle:nth-of-type(2) {
113+
animation-delay: 0.1s;
114+
opacity: 0.8;
115+
}
116+
117+
.circle:nth-of-type(3) {
118+
animation-delay: 0.2s;
119+
opacity: 0.6;
120+
}
121+
122+
@keyframes bounce {
123+
0%, 100% {
124+
transform: translateY(0);
125+
}
126+
50% {
127+
transform: translateY(-10px);
128+
}
129+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
| 66 | [Meal Finder](https://github.com/solygambas/html-css-fifty-projects/tree/master/66-meal%20finder) | [Live Demo](https://codepen.io/solygambas/full/dyOagYE) |
7575
| 67 | [Expense Tracker](https://github.com/solygambas/html-css-fifty-projects/tree/master/67-expense%20tracker) | [Live Demo](https://codepen.io/solygambas/full/OJbqyro) |
7676
| 68 | [Music Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/68-music%20player) | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG) |
77+
| 69 | [Infinite Scroll Posts](https://github.com/solygambas/html-css-fifty-projects/tree/master/69-infinite%20scroll%20posts) | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB) |
7778

7879
These projects are mostly based on 2 courses by Brad Traversy (2020):
7980

0 commit comments

Comments
 (0)