Initial commit

2026-03-26 18:54:33 +00:00 · 2021-04-14 12:36:02 +03:00
commit 3958f0b76c
3 changed files with 103 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -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>
--- a/main.js
+++ 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);
+}
--- a/style.css
+++ 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;
+}