[HeartFX] Threads

by Codi Bezouka-Smith

HTML

<div id="app">
	<main class="forums" id="content">
		<a href="#">new</a>
	</main>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

$color-active: #32A852;
$color-base: #C4C4C4;
$color-black: rgb(0, 0, 0);
$color-gray: #424242;
$color-offset: #A1A1A1;
$color-orange: #D0520E;
$color-red: rgb(128, 46, 46);
$color-secondary: dodgerblue;
$color-twitch-purple: #6441A5;
$color-white: rgb(255, 255, 255);
$color-yellow: #FFFFE1;

$font-shadow: 2px 2px 2px $color-black;
$font-stack: "Roboto", sans-serif;

$image-jess:"https://i.imgur.com/i4KG5WL.jpg";
$image-minecraft: "https://i.imgur.com/fwsr4q7.png";
$image-sho:"https://i.imgur.com/NJLANBU.jpg";

@mixin flex($direction, $align, $justify) {
	align-items: $align;
	display: flex;
	flex-direction: $direction;
	justify-content: $justify;
}
@mixin respond($breakpoint) {
	@if ($breakpoint == xl) { @media (max-width: 1200px) { @content } };
	@if ($breakpoint == lg) { @media (max-width: 900px) { @content } };
	@if ($breakpoint == md) { @media (max-width: 600px) { @content } };
	@if ($breakpoint == sm) { @media (max-width: 480px) { @content } };
	@if ($breakpoint == xs) { @media (max-width: 400px) { @content } };
	@if ($breakpoint == xxs) { @media (max-width: 320px) { @content } };
}

* {
	box-sizing:border-box;
	margin:0;
	padding:0;
	position:relative;
}

// entire document.body
body {
	@include flex(column, center, flex-start);
	background:$color-base;
	font-family: $font-stack;
	height:100vh;
	overflow-x:hidden;

	.container-fluid { margin:0 auto; }
	.image-jess { background: url($image-jess); }
	.image-sho { background: url($image-sho); }
	.no-select {
		user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		-webkit-user-select: none;
	}
	.small { font-size: 14px; }
}

// div#app (wrapper)
#app {
	@extend .no-select;
	@include flex(column, center, center);
	// @include respond(md) { width: 95%; }
	@include respond(xs) { display: none; }
	width: 100%;
	
	main.forums#content...

JavaScript

const fns = {
	getThreads: () => {
		const threads = [
			{
				id: 1,
				author: 'codibez',
				topic: 'introductions',
				title: 'HeartFX Photo Album',
			},
			{
				id: 2,
				author: 'codibez',
				topic: 'sports',
				title: 'Your favorite sports team',
			},
			{
				id: 3,
				author: 'codibez',
				topic: 'introductions',
				title: 'hello world!',
			},
			{
				id: 4,
				author: 'msheartrate',
				topic: 'introductions',
				title: 'Hi, My name is Jessie! (:',
			},
		];
		return threads;
	},
	getTopic: () => {
		
	},
	setThreads: (data) => {
		// if threads exists && populated:
		if (data.length > 0) {
			// declare target/destination:
			const trg = document.getElementById("topics");
			// for each thread:
			data.forEach((th) => {
				// gather threads in specified topic:
				if (trg.classList.contains(th.topic)) {
					// create div.thread:
					const thread = document.createElement("DIV");
					thread.setAttribute("class", "thread");
					// append div.thread to trg/destination:
					trg.appendChild(thread);

					// create div.overview:
					const overview = document.createElement("DIV");
					overview.setAttribute("class", "overview");
					// append div.overview to div.thread:
					thread.appendChild(overview);

					// create indent:
					const overview_span = document.createElement("SPAN");
					// append <SPAN> to div.overview:
					overview.appendChild(overview_span);

					// create a.topic:
					const overview_topic = document.createElement("A");
					overview_topic.setAttribute("class", "topic");
					overview_topic.setAttribute("href", "#");
					// append a.topic to div.overview:
					overview.appendChild(overview_topic);

					// create p.title:
					const overview_title = document.createElement("P");
					overview_title.setAttribute("class", "title");
					overview_title.innerHTML = th.title;
					// append p.title to a.topic:
					overview_topic.appendChild(overview_title);
					
					// create div.details:
					const details =...