Add project with Infinite Scroll example. · k1499/30DaysOfJavaScript@a103018 · GitHub
Skip to content

Commit a103018

Browse files
author
Alejandro Ventura Contreras
committed
Add project with Infinite Scroll example.
1 parent 4d88cb1 commit a103018

5 files changed

Lines changed: 205 additions & 0 deletions

File tree

‎30DaysOfJavaScript/assets/40.png‎

99.1 KB
Loading

‎40 - Infinite Scroll/app.js‎

Lines changed: 48 additions & 0 deletions

‎40 - Infinite Scroll/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Infinite Scroll</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<h1>Rick & Morty Scroll</h1>
12+
<div class="container">
13+
<div id="items_container" class="items_container"></div>
14+
<div id="loader" class="loader">
15+
<div></div>
16+
<div></div>
17+
<div></div>
18+
</div>
19+
</div>
20+
<script src="app.js"></script>
21+
</body>
22+
</html>

‎40 - Infinite Scroll/styles.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
color: #fff;
11+
font-family: 'Open Sans', sans-serif;
12+
font-size: 12px;
13+
background-color: #19172e;
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
min-height: 100vh;
19+
}
20+
21+
.container {
22+
padding: 1em;
23+
border-radius: 5px;
24+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
25+
text-align: center;
26+
max-width: 320px;
27+
margin: 0 auto 10px;
28+
}
29+
30+
h1 {
31+
color: #fff;
32+
font-size: 36px;
33+
margin: 30px;
34+
text-align: center;
35+
text-transform: uppercase;
36+
}
37+
38+
/* Items */
39+
.item {
40+
border: 1px solid;
41+
backdrop-filter: blur(10px);
42+
margin-bottom: 20px;
43+
border-radius: 4px;
44+
display: grid;
45+
font-size: 25px;
46+
place-items: center;
47+
text-align: center;
48+
}
49+
50+
.title {
51+
font-size: 80px;
52+
}
53+
54+
.char-img {
55+
width: 125px;
56+
border-radius: 50%;
57+
margin: 30px;
58+
}
59+
60+
.char-id {
61+
background-color: #fff;
62+
color: #000;
63+
border: 1px solid #000;
64+
width: 60px;
65+
height: 60px;
66+
border-radius: 50%;
67+
display: grid;
68+
place-items: center;
69+
margin: 30px 0 10px;
70+
}
71+
72+
.char-species {
73+
background-color: #fff;
74+
color: #000;
75+
width: 100%;
76+
padding: 10px 0;
77+
border-bottom-right-radius: 3px;
78+
border-bottom-left-radius: 3px;
79+
}
80+
81+
/* loader */
82+
.loader {
83+
display: inline-block;
84+
position: relative;
85+
width: 80px;
86+
height: 80px;
87+
opacity: 0;
88+
}
89+
90+
.loader.show {
91+
opacity: 1;
92+
}
93+
94+
.loader div {
95+
display: inline-block;
96+
position: absolute;
97+
left: 8px;
98+
width: 16px;
99+
background: #f4f4f4;
100+
animation: loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
101+
}
102+
103+
.loader div:nth-child(1) {
104+
left: 8px;
105+
animation-delay: -0.24s;
106+
}
107+
108+
.loader div:nth-child(2) {
109+
left: 32px;
110+
animation-delay: -0.12s;
111+
}
112+
113+
.loader div:nth-child(3) {
114+
left: 56px;
115+
animation-delay: 0;
116+
}
117+
118+
@keyframes loader {
119+
0% {
120+
top: 8px;
121+
height: 64px;
122+
}
123+
124+
50%,
125+
100% {
126+
top: 24px;
127+
height: 32px;
128+
}
129+
}

‎index.html‎

Lines changed: 6 additions & 0 deletions

0 commit comments

Comments
 (0)