Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ddb9d9d

Browse files
added 1 dom folder
1 parent 9775d2b commit ddb9d9d

File tree

3 files changed

+222
-0
lines changed

3 files changed

+222
-0
lines changed

‎DOM - Scroll Infinito/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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="./styles.css">
7+
<title>DevSpace</title>
8+
</head>
9+
<body>
10+
<h1>DevSpace</h1>
11+
12+
<div class="filter-container">
13+
<input
14+
type="text"
15+
id="filter"
16+
class="filter"
17+
placeholder="Posts..."
18+
>
19+
</div>
20+
21+
<div id="posts-container"></div>
22+
23+
<div class="loader">
24+
<div class="circle"></div>
25+
<div class="circle"></div>
26+
<div class="circle"></div>
27+
</div>
28+
29+
<script src="script.js"></script>
30+
31+
</body>
32+
</html>

‎DOM - Scroll Infinito/script.js

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

‎DOM - Scroll Infinito/styles.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background:#191622;
7+
color: #fff;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: center;
12+
min-width: 100vh;
13+
margin: 0;
14+
padding-bottom: 100px;
15+
}
16+
17+
h1 {
18+
margin-bottom: 0;
19+
text-align: center;
20+
}
21+
22+
.filter-container {
23+
margin-top: 20px;
24+
width: 80vw;
25+
max-width: 800px;
26+
}
27+
28+
.filter {
29+
width: 100%;
30+
padding: 12px;
31+
font-size: 15px;
32+
}
33+
34+
.post {
35+
position: relative;
36+
background-color: #233DFF;
37+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
38+
border-radius: 3px;
39+
padding: 20px;
40+
margin: 40px 0;
41+
display: flex;
42+
width: 80vw;
43+
max-width: 800px;
44+
}
45+
46+
.post .post-title {
47+
margin: 0;
48+
}
49+
50+
.post .post-body {
51+
margin: 15px 0 0;
52+
line-height: 1.3;
53+
}
54+
55+
.post .post-info {
56+
margin-left: 20px;
57+
}
58+
59+
.post .number {
60+
position: absolute;
61+
top: -15px;
62+
left: -15px;
63+
font-size: 15px;
64+
width: 40px;
65+
height: 40px;
66+
border-radius: 50%;
67+
background: #fff;
68+
color: #296ca8;
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
padding: 7px 10px;
73+
}
74+
75+
.loader {
76+
opacity: 0;
77+
display: flex;
78+
position: fixed;
79+
bottom: 50px;
80+
transition: opacity 0.3s ease-in;
81+
}
82+
83+
.loader.show {
84+
opacity: 1;
85+
}
86+
87+
88+
.circle {
89+
background-color: #fff;
90+
width: 10px;
91+
height: 10px;
92+
border-radius: 50%;
93+
margin: 5px;
94+
animation: bounce 0.5s ease-in infinite;
95+
}
96+
97+
.circle:nth-of-type(2) {
98+
animation-delay: 0.1s;
99+
}
100+
101+
.circle:nth-of-type(3) {
102+
animation-delay: 0.2s;
103+
}
104+
105+
@keyframes bounce {
106+
0%,
107+
100% {
108+
transform: translateY(0);
109+
}
110+
111+
50% {
112+
transform: translateY(-10px)
113+
}
114+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /