From 39974fe4e8ec3b6881fa435936a1e9132dc89fd2 Mon Sep 17 00:00:00 2001 From: Anatoly Date: Wed, 14 Apr 2021 13:47:35 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83=20=D1=87=D1=82=D0=BE=D0=B1?= =?UTF-8?q?=D1=8B=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D0=B8=D1=82=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- main.js | 53 ++++++++++++++++++++++++++++++----------------------- style.css | 45 ++++++++++++++++++++++++++++++++++++++------- 3 files changed, 69 insertions(+), 31 deletions(-) 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