diff --git a/index.html b/index.html
index dbffdd7..d3b01d1 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
- 👀
+ 👀
diff --git a/main.js b/main.js
index ce96fce..d4bc97c 100644
--- a/main.js
+++ b/main.js
@@ -1,38 +1,39 @@
function findGetParameter(parameterName) {
- var result = null,
- tmp = [];
+ let result = null
+ let tmp = []
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
- if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
- });
- return result;
+ if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1])
+ })
+ return result
}
+const cardholder = document.getElementById('cardholder')
+const scroll_btn = document.getElementById('scroll_btn')
+let cards_amount = findGetParameter('n')
+let current_card = 0
+
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 });
+ const 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;
+ const 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
+ cardholder.appendChild(card)
+}
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)
@@ -41,16 +42,22 @@ function getCards() {
getCards()
-let lastKnownScrollPosition = 0;
+let ticking = false
-function updCards(scrollPos) {
- if (scrollPos === 0) {
- getCards()
+cardholder.onscroll = function () {
+ let pos = cardholder.scrollWidth - cardholder.clientWidth - cardholder.scrollLeft
+
+ if (!ticking) {
+ window.requestAnimationFrame(function () {
+ if (pos <= cardholder.clientWidth)
+ getCards()
+ ticking = false
+ })
+
+ ticking = true
}
}
-let cardholder = document.getElementById('cardholder')
-cardholder.onscroll = function (e) {
- lastKnownScrollPosition = cardholder.scrollWidth - cardholder.clientWidth - cardholder.scrollLeft;
- updCards(lastKnownScrollPosition);
+scroll_btn.onclick = function () {
+ cardholder.scrollLeft += cardholder.clientWidth
}
\ No newline at end of file
diff --git a/style.css b/style.css
index 95c2f42..f127ea9 100644
--- a/style.css
+++ b/style.css
@@ -1,29 +1,60 @@
* {
margin: 0;
text-align: center;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: rgb(41, 41, 41)
+}
+
+body {
+ background-color: rgb(241, 241, 241);
}
#cardholder {
width: 100%;
+ display: flex;
+ flex-wrap: nowrap;
overflow-x: auto;
- white-space: nowrap;
+ scroll-behavior: smooth;
}
#scroll_btn {
+ background-color: white;
+ margin: auto;
font-size: xx-large;
cursor: pointer;
+ border-radius: 50%;
+ width: 1.5em;
+ height: 1.5em;
+ box-shadow: 1px 1px 10px rgba(71, 71, 71, 0.397);
+ -webkit-touch-callout: none;
+ /* iOS Safari */
+ -webkit-user-select: none;
+ /* Safari */
+ -khtml-user-select: none;
+ /* Konqueror HTML */
+ -moz-user-select: none;
+ /* Old versions of Firefox */
+ -ms-user-select: none;
+ /* Internet Explorer/Edge */
+ user-select: none;
}
.card {
- display: inline-block;
- padding: 10px;
- margin: 10px;
- border: 1px solid;
- border-radius: 12px;
+ background-color: white;
+ padding: 1em;
+ margin: 1em;
width: 400px;
+ flex: 0 0 auto;
+ border-radius: 12px;
+ box-shadow: 1px 1px 10px rgba(71, 71, 71, 0.397);
}
-img {
+.card img {
max-width: 100%;
border-radius: 7px;
+}
+
+.card p {
+ width: 90%;
+ margin: 1em auto 0 auto;
}
\ No newline at end of file