From b512176f1937274264d39052bf445e4018c846b5 Mon Sep 17 00:00:00 2001 From: ktyl Date: Wed, 17 Jul 2024 00:08:03 +0100 Subject: [PATCH] chore: genericise posts to blocks --- index.html | 4 ++-- main.js | 8 +++----- styles.css | 8 ++++---- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 6a2af31..05b0ca1 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@ - -
+ +
diff --git a/main.js b/main.js index a27ec3d..8851ae6 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,7 @@ var users = []; var posts = {}; -// first, let's get all the elements we'll need from our DOM -const postContainer = document.getElementById("post-container"); +const blockContainer = document.getElementById("block-container"); const postCountElem = document.getElementById("post-count"); const postTotalElem = document.getElementById("post-total"); const loader = document.getElementById("loader"); @@ -66,7 +65,7 @@ class Post { getElement() { const postElem = document.createElement("div"); - postElem.className = "post"; + postElem.className = "block"; postElem.style.backgroundColor = getRandomColor(); // add a header to the post @@ -148,10 +147,9 @@ function addPosts(pageIdx) { postCountElem.innerHTML = endRange; const rootPosts = getRootPosts(); - console.log(rootPosts); for (let i = startRange + 1; i <= endRange; i++) { - postContainer.appendChild(rootPosts[i].getElement()); + blockContainer.appendChild(rootPosts[i].getElement()); } } diff --git a/styles.css b/styles.css index 6ba766c..85afd5c 100644 --- a/styles.css +++ b/styles.css @@ -6,7 +6,7 @@ body { @media only screen and (min-width: 800px) { /* For bigger than phones */ - #post-container { + #block-container { max-width: 800px; } @@ -16,7 +16,7 @@ body { } -#post-container { +#block-container { display: flex; flex-wrap: wrap; justify-content: center; @@ -24,14 +24,14 @@ body { width: 100%; } -.post { +.block { width: calc(100% - 16px); margin: 8px; border-radius: 3px; transition: all 200ms ease-in-out; } -.post:hover { +.block:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }