anatolykopyl/scrollable-cards
1
0
Fork 0
mirror of https://github.com/anatolykopyl/scrollable-cards.git synced 2026-03-26 15:04:36 +00:00
Code Issues Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Anatoly Kopyl
2021-04-14 12:36:02 +03:00
commit 3958f0b76c
3 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Cards</title>
</head>
<body>
<div id='cardholder'></div>
<span id="scroll_btn">👀</span>
<script src='main.js'></script>
</body>
</html>

56
main.js Normal file
View File

@@ -0,0 +1,56 @@
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}
const InsertCard = (card_obj) => {
const card = document.createElement('div');
card.classList.add('card')
img_el = document.createElement('img')
Object.assign(img_el, { src: card_obj.url });
card.appendChild(img_el)
text = document.createElement('p')
text.innerHTML = card_obj.title;
card.appendChild(text)
document.getElementById('cardholder').appendChild(card)
};
let cards_amount = findGetParameter('n')
let current_card = 0
function getCards() {
fetch('https://jsonplaceholder.typicode.com/photos?_start=' + current_card + '&_limit=' + cards_amount)
.then((response) => response.json())
.then((json) => {
json.forEach(card => {
console.log(card)
InsertCard(card)
})
current_card += Number(cards_amount)
})
}
getCards()
let lastKnownScrollPosition = 0;
function updCards(scrollPos) {
if (scrollPos === 0) {
getCards()
}
}
let cardholder = document.getElementById('cardholder')
cardholder.onscroll = function (e) {
lastKnownScrollPosition = cardholder.scrollWidth - cardholder.clientWidth - cardholder.scrollLeft;
updCards(lastKnownScrollPosition);
}

29
style.css Normal file
View File

@@ -0,0 +1,29 @@
* {
margin: 0;
text-align: center;
}
#cardholder {
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
#scroll_btn {
font-size: xx-large;
cursor: pointer;
}
.card {
display: inline-block;
padding: 10px;
margin: 10px;
border: 1px solid;
border-radius: 12px;
width: 400px;
}
img {
max-width: 100%;
border-radius: 7px;
}