feat: initial commit
This commit is contained in:
commit
6731fe212c
|
|
@ -0,0 +1,2 @@
|
|||
infinite scrolling
|
||||
https://webdesign.tutsplus.com/how-to-implement-infinite-scrolling-with-javascript--cms-37055t
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- cards are added by JavaScript so it starts empty -->
|
||||
<div id="card-container"></div>
|
||||
|
||||
<!-- loader displays an animation before adding the next batch of cards -->
|
||||
<div id="loader">
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
</div>
|
||||
|
||||
<!-- card actions shows the card count and card total (we probably do not need this) -->
|
||||
<div id="card-actions">
|
||||
<span>Showing
|
||||
<span id="card-count"></span> of
|
||||
<span id="card-total"></span> cards
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
// first, let's get all the elements we'll need from our DOM
|
||||
const cardContainer = document.getElementById("card-container");
|
||||
const cardCountElem = document.getElementById("card-count");
|
||||
const cardTotalElem = document.getElementById("card-total");
|
||||
const loader = document.getElementById("loader");
|
||||
|
||||
// we'll need a value for the max numaer of cards to be added to the page
|
||||
const cardLimit = 99;
|
||||
// then we'll define a variable for how many cards we want to increase the
|
||||
// page by
|
||||
const cardIncrease = 9;
|
||||
// how many times can we increase the content until we reach the max limit?
|
||||
const pageCount = Math.ceil(cardLimit / cardIncrease);
|
||||
// and define a value to determine which page we're on
|
||||
let currentPage = 1;
|
||||
|
||||
cardTotalElem.innerHTML = cardLimit;
|
||||
|
||||
|
||||
function getRandomColor() {
|
||||
const h = Math.floor(Math.random() * 360);
|
||||
return `hsl(${h}deg, 90%, 85%)`;
|
||||
}
|
||||
|
||||
|
||||
function createCard(idx) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
card.innerHTML = idx;
|
||||
card.style.backgroundColor = getRandomColor();
|
||||
cardContainer.appendChild(card);
|
||||
}
|
||||
|
||||
|
||||
function addCards(pageIdx) {
|
||||
currentPage = pageIdx;
|
||||
|
||||
const startRange = (pageIdx - 1) * cardIncrease;
|
||||
const endRange = currentPage == pageCount
|
||||
? cardLimit
|
||||
: pageIdx * cardIncrease;
|
||||
|
||||
cardCountElem.innerHTML = endRange;
|
||||
|
||||
for (let i = startRange + 1; i <= endRange; i++) {
|
||||
createCard(i);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleInfiniteScroll() {
|
||||
throttle(() => {
|
||||
const endOfPage = window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
|
||||
|
||||
if (endOfPage) {
|
||||
addCards(currentPage + 1);
|
||||
}
|
||||
|
||||
if (currentPage === pageCount) {
|
||||
removeInfiniteScroll();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
|
||||
var throttleTimer;
|
||||
function throttle(callback, time) {
|
||||
if (throttleTimer) return;
|
||||
|
||||
throttleTimer = true;
|
||||
|
||||
setTimeout(() => {
|
||||
callback();
|
||||
throttleTimer = false;
|
||||
}, time);
|
||||
}
|
||||
|
||||
|
||||
function removeInfiniteScroll() {
|
||||
loader.remove();
|
||||
window.removeEventListener("scroll", handleInfiniteScroll);
|
||||
}
|
||||
|
||||
addCards(currentPage);
|
||||
window.addEventListener("scroll", handleInfiniteScroll);
|
||||
|
||||
// TODO: define the limit of the content to be loaded on the page
|
||||
// TODO: detect when the user has reached the end of the content container
|
||||
// TODO: load more content once the end of the container has been reached
|
||||
// TODO: if there's no more content to be loaded, stop the infinite scroll
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
#card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 55vh;
|
||||
width: calc((100% / 3) - 16px);
|
||||
margin: 8px;
|
||||
border-radius: 3px;
|
||||
transition: all 200ms ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
margin: 8px;
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 55vh;
|
||||
width: calc((100% / 3) - 16px);
|
||||
margin: 8px;
|
||||
border-radius: 3px;
|
||||
transition: all 200ms ease-in-out;
|
||||
position: relative;
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.skeleton-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
|
||||
animation: load is infinite;
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
}
|
||||
Loading…
Reference in New Issue