[HeartFX] Topics

by Codi Bezouka-Smith

HTML

<div id="app">
	<main class="forums" id="content">
		<a href="#">new</a>
		<header>FORUMS</header>
		<!--
		<div class="content-block">
			<div class="heading">
				<p>general</p>
			</div>
			<div class="subheading">
				<p>Forum</p>
				<div>
					<p>Topics</p>
					<p>Posts</p>
					<p>Activity</p>
				</div>
			</div>
			<section class="category" id="topics">
				<div class="thread">
					<div class="overview">
						<span></span>
						<a href="#" class="topic">
							<p class="title">introductions</p>
							<p class="desc">introduce yourself to the community.</p>
						</a>
					</div>
					<div class="details">
						<p class="topics">0</p>
						<p class="posts">0</p>
						<div class="activity">
							<p class="date">Dec. 2024</p>
							<p class="author">author</p>
						</div>
					</div>
				</div>
			</section>
		</div>
		<div class="content-block" style="padding-top: 0">
			<div class="heading">
				<p>gaming</p>
			</div>
			<div class="subheading">
				<p>Forum</p>
				<div>
					<p>Topics</p>
					<p>Posts</p>
					<p>Activity</p>
				</div>
			</div>
			<section class="category" id="topics">
				<div class="thread">
					<div class="overview">
						<span></span>
						<a href="#" class="topic">
							<p class="title">gaming discussion</p>
							<p class="desc">generalized discussion for all things gaming.</p>
						</a>
					</div>
					<div class="details">
						<p class="topics">0</p>
						<p class="posts">0</p>
						<div class="activity">
							<p class="date">Dec. 2024</p>
							<p class="author">author</p>
						</div>
					</div>
				</div>
				<div class="thread">
					<div class="overview">
						<span></span>
						<a href="#" class="topic">
							<p class="title">PC gaming discussion</p>
							<p class="description">dedicated towards PC gaming.</p>
						</a>
					</div>
					<div class="details">
						<p class="topics">0</p>
						<p class="posts">0</p>
						<div class="activity">
							<p class="date">Apr....

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 = {
  getCategories: (data) => {
    let categories = new Array()
    data.forEach((topic) => {
      if (!categories.includes(topic.category)) {
        categories.push(topic.category)
      }
    })
    return categories
  },
  setCategories: (destination) => {
    const categories = fns.getCategories(fns.getTopics())
    categories.forEach((cat) => {
      const trg = document.querySelector(destination)

      // create section.category#topics
      const section = document.createElement("SECTION")
      section.setAttribute("class", `category ${cat}`)
      section.setAttribute("id", "topics")

      // create div.content-block#topics#category
      const content_block = document.createElement("DIV")
      content_block.setAttribute("class", "content-block")
      content_block.setAttribute("id", "topics")

      // create heading
      const heading = document.createElement("DIV")
      heading.setAttribute("class", "heading")
      // append heading to div.content-block
      content_block.appendChild(heading)

      // create heading *paragraph*
      const heading_para = document.createElement("P")
      heading_para.innerHTML = cat
      // append heading *paragraph* to heading
      heading.appendChild(heading_para)

      // create subheading
      const subheading = document.createElement("DIV")
      subheading.setAttribute("class", "subheading")
      // append subheading to div.content-block:
      content_block.appendChild(subheading)

      // create subheading *paragraph*
      const subheading_para = document.createElement("P")
      subheading_para.innerHTML = "Forum"
      // append subheading *paragraph* to div.subheading
      subheading.appendChild(subheading_para)

      // create subheading *div*
      const subheading_div = document.createElement("DIV")
      // append subheading *div* to div.subheading
      subheading.appendChild(subheading_div)

      // create subheading *div* *paragraph* | <p>Topics</p>
      const...