Compare commits
5 Commits
bf242897b6
...
6aee9f0d75
| Author | SHA1 | Date |
|---|---|---|
 ktyl
|
6aee9f0d75 | |
|
ktyl
|
b512176f19 | |
|
ktyl
|
52fa5a2df5 | |
|
ktyl
|
3db1310934 | |
|
ktyl
|
a6c7bd54f6 |
10
index.html
10
index.html
|
|
@ -1,11 +1,17 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- posts are added by JavaScript so container starts empty -->
|
||||
<div id="post-container"></div>
|
||||
<!-- blocks are added by JavaScript so container starts empty -->
|
||||
<div id="block-container"></div>
|
||||
|
||||
<!-- loader displays an animation before adding the next batch of posts -->
|
||||
<div id="loader">
|
||||
|
|
|
|||
39
main.js
39
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());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,6 +188,23 @@ function removeInfiniteScroll() {
|
|||
window.removeEventListener("scroll", handleInfiniteScroll);
|
||||
}
|
||||
|
||||
function addWritePostBlock() {
|
||||
const blockElem = document.createElement("div");
|
||||
blockElem.className = "block";
|
||||
blockElem.style.backgroundColor = "red";
|
||||
|
||||
const buttonElem = document.createElement("a");
|
||||
buttonElem.setAttribute("href", "#");
|
||||
buttonElem.innerHTML = "Write something interesting for me!";
|
||||
buttonElem.addEventListener("click", () => {
|
||||
// TODO: inject a new post element at the top of the feed
|
||||
console.log("write something interesting");
|
||||
});
|
||||
blockElem.append(buttonElem);
|
||||
|
||||
blockContainer.append(blockElem)
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (posts == undefined)
|
||||
{
|
||||
|
|
@ -198,10 +213,15 @@ function init() {
|
|||
}
|
||||
|
||||
// need to load all the resources first
|
||||
if (users.length == 0 || Object.keys(posts).length == 0)
|
||||
const postCount = Object.keys(posts).length;
|
||||
if (users.length == 0 || postCount == 0)
|
||||
return;
|
||||
|
||||
console.log(`loaded ${users.length} users and ${posts.length} posts`);
|
||||
console.log(`loaded ${users.length} users and ${postCount} posts`);
|
||||
|
||||
// TODO: add write post block
|
||||
addWritePostBlock();
|
||||
// TODO: add bio
|
||||
|
||||
addPosts(currentPage);
|
||||
window.addEventListener("scroll", handleInfiniteScroll);
|
||||
|
|
@ -216,9 +236,8 @@ function loadDataFromEndpoint(endpoint, callback) {
|
|||
});
|
||||
}
|
||||
|
||||
const baseUrl = "https://api.wayfarer.games/singularity";
|
||||
loadDataFromEndpoint(`{baseUrl}/users.json`, json => { users = json.users; });
|
||||
loadDataFromEndpoint(`{baseUrl}/posts.json`, json => {
|
||||
loadDataFromEndpoint("https://api.wayfarer.games/singularity/users.json", json => { users = json.users; });
|
||||
loadDataFromEndpoint("https://api.wayfarer.games/singularity/posts.json", json => {
|
||||
// first pass to instantiate all the posts
|
||||
for (let i = 0; i < json.content.length; i++) {
|
||||
const post = new Post(json.content[i]);
|
||||
|
|
|
|||
14
styles.css
14
styles.css
|
|
@ -1,6 +1,12 @@
|
|||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
/* For bigger than phones */
|
||||
#post-container {
|
||||
#block-container {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
|
|
@ -10,7 +16,7 @@
|
|||
}
|
||||
|
||||
|
||||
#post-container {
|
||||
#block-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
|
@ -18,14 +24,14 @@
|
|||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue