Compare commits
6 Commits
29cd6cbd41
...
8ed12bf7bc
| Author | SHA1 | Date |
|---|---|---|
 ktyl
|
8ed12bf7bc | |
|
ktyl
|
97157be747 | |
|
ktyl
|
9cac3645c9 | |
|
ktyl
|
e7cb9f1bfc | |
|
ktyl
|
cd17ad53ad | |
|
ktyl
|
1bf1395ef6 |
|
|
@ -4,13 +4,6 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<a id="home" href="#" onclick="goToHome()">Home</a>
|
|
||||||
|
|
||||||
<div id="profile">
|
|
||||||
<h1 id="profile-name"></h1>
|
|
||||||
<p id="profile-description"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- posts are added by JavaScript so container starts empty -->
|
<!-- posts are added by JavaScript so container starts empty -->
|
||||||
<div id="post-container"></div>
|
<div id="post-container"></div>
|
||||||
|
|
||||||
|
|
|
||||||
71
main.js
71
main.js
|
|
@ -27,7 +27,14 @@ function getUsername() {
|
||||||
const usernames = [
|
const usernames = [
|
||||||
"xXPu55y5l4y3r69Xx",
|
"xXPu55y5l4y3r69Xx",
|
||||||
"Keef Farmer",
|
"Keef Farmer",
|
||||||
"Alan"
|
"Alan",
|
||||||
|
"mongle boy",
|
||||||
|
"girlthing",
|
||||||
|
"doggle poggle",
|
||||||
|
"catlicker",
|
||||||
|
"350 million for the nhs",
|
||||||
|
"thoughts were a mistake",
|
||||||
|
"410,757,864,530 FRIENDS MADE"
|
||||||
];
|
];
|
||||||
|
|
||||||
const r = Math.floor(Math.random() * usernames.length);
|
const r = Math.floor(Math.random() * usernames.length);
|
||||||
|
|
@ -62,60 +69,32 @@ class Post {
|
||||||
|
|
||||||
postElem.appendChild(profileLinkElem);
|
postElem.appendChild(profileLinkElem);
|
||||||
|
|
||||||
// TODO: add content to the post
|
|
||||||
const contentElem = document.createElement("p");
|
const contentElem = document.createElement("p");
|
||||||
contentElem.innerHTML = this.content;
|
contentElem.innerHTML = this.content;
|
||||||
postElem.appendChild(contentElem);
|
postElem.appendChild(contentElem);
|
||||||
|
|
||||||
|
// add a random number of comments to the post
|
||||||
|
const numComments = Math.random() * 5;
|
||||||
|
for (let i = 0; i < numComments; i++) {
|
||||||
|
const commentElem = document.createElement("div");
|
||||||
|
commentElem.style.backgroundColor = getRandomColor();
|
||||||
|
|
||||||
|
const commentUserElem = document.createElement("h2");
|
||||||
|
commentUserElem.innerHTML = getUsername();
|
||||||
|
commentElem.appendChild(commentUserElem);
|
||||||
|
|
||||||
|
const commentContentElem = document.createElement("p");
|
||||||
|
commentContentElem.innerHTML = `comment ${i}`;
|
||||||
|
commentElem.appendChild(commentContentElem);
|
||||||
|
|
||||||
|
postElem.appendChild(commentElem);
|
||||||
|
}
|
||||||
|
|
||||||
return postElem;
|
return postElem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
var userProfile = null;
|
|
||||||
class UserProfile {
|
|
||||||
constructor(username) {
|
|
||||||
this.username = username;
|
|
||||||
this.bio = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
|
|
||||||
|
|
||||||
this.elem = document.getElementById("profile");
|
|
||||||
this.nameElem = document.getElementById("profile-name");
|
|
||||||
this.descElem = document.getElementById("profile-description");
|
|
||||||
}
|
|
||||||
|
|
||||||
show() {
|
|
||||||
this.nameElem.innerHTML = this.username;
|
|
||||||
this.descElem.innerHTML = this.bio;
|
|
||||||
this.elem.style.visibility = "visible";
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
this.descElem.innerHTML = "";
|
|
||||||
this.nameElem.innerHTML = "";
|
|
||||||
this.elem.style.visibility = "hidden";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function goToHome() {
|
|
||||||
updateUserProfile(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function updateUserProfile(username) {
|
|
||||||
if (userProfile != null) {
|
|
||||||
userProfile.hide();
|
|
||||||
userProfile = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!username)
|
|
||||||
return;
|
|
||||||
|
|
||||||
userProfile = new UserProfile(username);
|
|
||||||
userProfile.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function createPost() {
|
function createPost() {
|
||||||
const post = new Post();
|
const post = new Post();
|
||||||
postContainer.appendChild(post.getElement());
|
postContainer.appendChild(post.getElement());
|
||||||
|
|
|
||||||
33
styles.css
33
styles.css
|
|
@ -1,37 +1,11 @@
|
||||||
#home {
|
@media only screen and (min-width: 800px) {
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TODO: deal with visibility when screen cuts off left side */
|
|
||||||
/* TODO: how do we show the profile on mobile */
|
|
||||||
#profile {
|
|
||||||
/* profile starts hidden */
|
|
||||||
visibility: hidden;
|
|
||||||
position: fixed;
|
|
||||||
right: calc(50% + 300px + 8px);
|
|
||||||
left: auto;
|
|
||||||
top: 16px;
|
|
||||||
height: 600px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
|
||||||
/* For bigger than phones */
|
/* For bigger than phones */
|
||||||
#profile {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#post-container {
|
#post-container {
|
||||||
max-width: 600px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loader {
|
#loader {
|
||||||
max-width: 600px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -45,7 +19,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
height: 55vh;
|
|
||||||
width: calc(100% - 16px);
|
width: calc(100% - 16px);
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue