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

Compare commits

base: ktyl:8ed12bf7bc2051d3cb6ca97188a5e25d692dc707
Branches Tags
ktyl:main
..
compare: ktyl:29cd6cbd411571d28aeadec2f92b9e4f7245b914
Branches Tags
ktyl:main

No commits in common. "8ed12bf7bc2051d3cb6ca97188a5e25d692dc707" and "29cd6cbd411571d28aeadec2f92b9e4f7245b914" have entirely different histories.
8ed12bf7bc ... 29cd6cbd41

3 changed files with 83 additions and 28 deletions
Show Stats Expand all files Collapse all files

7
index.html
View File

@ -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
View File

@ -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
View File

@ -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;