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);
}