Compare commits
No commits in common. "8ed12bf7bc2051d3cb6ca97188a5e25d692dc707" and "29cd6cbd411571d28aeadec2f92b9e4f7245b914" have entirely different histories.
8ed12bf7bc
...
29cd6cbd41
|
|
@ -4,6 +4,13 @@
|
||||||
</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,14 +27,7 @@ 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);
|
||||||
|
|
@ -69,32 +62,60 @@ 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,11 +1,37 @@
|
||||||
@media only screen and (min-width: 800px) {
|
#home {
|
||||||
|
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: 800px;
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loader {
|
#loader {
|
||||||
max-width: 800px;
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -19,6 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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