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

Compare commits

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

6 Commits
29cd6cbd41 ... 8ed12bf7bc

Author SHA1 Message Date
ktyl 8ed12bf7bc chore: remove user profile 2024-07-13 01:52:23 +01:00
ktyl 97157be747 chore: remove home button 2024-07-13 01:51:10 +01:00
ktyl 9cac3645c9 feat: size post dependong on comments 2024-07-13 01:48:17 +01:00
ktyl e7cb9f1bfc style: change feed width and breakpoint 2024-07-13 01:46:47 +01:00
ktyl cd17ad53ad feat: add post comments 2024-07-13 01:45:55 +01:00
ktyl 1bf1395ef6 feat: add more usernames 2024-07-13 01:45:29 +01:00
3 changed files with 28 additions and 83 deletions
Show Stats Expand all files Collapse all files

7
index.html
View File

@ -4,13 +4,6 @@
</head>
<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 -->
<div id="post-container"></div>

71
main.js
View File

@ -27,7 +27,14 @@ function getUsername() {
const usernames = [
"xXPu55y5l4y3r69Xx",
"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);
@ -62,60 +69,32 @@ class Post {
postElem.appendChild(profileLinkElem);
// TODO: add content to the post
const contentElem = document.createElement("p");
contentElem.innerHTML = this.content;
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;
}
}
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() {
const post = new Post();
postContainer.appendChild(post.getElement());

33
styles.css
View File

@ -1,37 +1,11 @@
#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) {
@media only screen and (min-width: 800px) {
/* For bigger than phones */
#profile {
visibility: visible;
}
#post-container {
max-width: 600px;
max-width: 800px;
}
#loader {
max-width: 600px;
max-width: 800px;
}
}
@ -45,7 +19,6 @@
}
.post {
height: 55vh;
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;