ktyl
/
singularity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: genericise posts to blocks

This commit is contained in:
ktyl 2024-07-17 00:08:03 +01:00
parent 52fa5a2df5
commit b512176f19
3 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -10,8 +10,8 @@
</head> </head>
<body> <body>
<!-- posts are added by JavaScript so container starts empty --> <!-- blocks are added by JavaScript so container starts empty -->
<div id="post-container"></div> <div id="block-container"></div>
<!-- loader displays an animation before adding the next batch of posts --> <!-- loader displays an animation before adding the next batch of posts -->
<div id="loader"> <div id="loader">

8
main.js
View File

@ -1,8 +1,7 @@
var users = []; var users = [];
var posts = {}; var posts = {};
// first, let's get all the elements we'll need from our DOM const blockContainer = document.getElementById("block-container");
const postContainer = document.getElementById("post-container");
const postCountElem = document.getElementById("post-count"); const postCountElem = document.getElementById("post-count");
const postTotalElem = document.getElementById("post-total"); const postTotalElem = document.getElementById("post-total");
const loader = document.getElementById("loader"); const loader = document.getElementById("loader");
@ -66,7 +65,7 @@ class Post {
getElement() { getElement() {
const postElem = document.createElement("div"); const postElem = document.createElement("div");
postElem.className = "post"; postElem.className = "block";
postElem.style.backgroundColor = getRandomColor(); postElem.style.backgroundColor = getRandomColor();
// add a header to the post // add a header to the post
@ -148,10 +147,9 @@ function addPosts(pageIdx) {
postCountElem.innerHTML = endRange; postCountElem.innerHTML = endRange;
const rootPosts = getRootPosts(); const rootPosts = getRootPosts();
console.log(rootPosts);
for (let i = startRange + 1; i <= endRange; i++) { for (let i = startRange + 1; i <= endRange; i++) {
postContainer.appendChild(rootPosts[i].getElement()); blockContainer.appendChild(rootPosts[i].getElement());
} }
} }

8
styles.css
View File

@ -6,7 +6,7 @@ body {
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
/* For bigger than phones */ /* For bigger than phones */
#post-container { #block-container {
max-width: 800px; max-width: 800px;
} }
@ -16,7 +16,7 @@ body {
} }
#post-container { #block-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -24,14 +24,14 @@ body {
width: 100%; width: 100%;
} }
.post { .block {
width: calc(100% - 16px); width: calc(100% - 16px);
margin: 8px; margin: 8px;
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
} }
.post:hover { .block:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }