commit 3958f0b76cce5db92787bc2dabd7bc70d313881d Author: Anatoly Date: Wed Apr 14 12:36:02 2021 +0300 Initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..dbffdd7 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + + Cards + + + +
+ 👀 + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..ce96fce --- /dev/null +++ b/main.js @@ -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); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..95c2f42 --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file