jacktrusler/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>replit</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="myData"></div>
	<script src="script.js"></script>
</body>

</html>

## script.js
function appendDiv(classes, container, divId) {
	let div = document.createElement("div");
	div.setAttribute("class", classes);
	if (divId != undefined) {
		div.setAttribute("id", divId);
	}
	container.appendChild(div);
	return div;
}

function appendImg(container, img) {
	if (img == undefined) {
		let defaultImg = new Image();
		defaultImg.src = "https://picsum.photos/300"
		container.appendChild(defaultImg);
	} else {
		let newImg = new Image();
		newImg.src = `images/${img}`;
		container.appendChild(newImg);
	}
}

function appendText(textVal, container, textTag, classes) {
	let text = document.createElement(textTag);
	if (classes != undefined) {
		text.setAttribute("class", classes);
	}
	text.innerHTML = textVal;
	container.appendChild(text);
}

function createRegionSection(regionName, regionData) {
	const section = document.createElement("section");
	section.setAttribute("class", "region");

	//create Title
	const headerDiv = appendDiv("headerDiv", section);
	const regionHeader = appendText(regionName, headerDiv, "h1", "header");

	//create Cards
	const groupsDiv = appendDiv("groupsDiv", section);
	regionData.forEach((group) => {
		groupsDiv.appendChild(createGroupCard(group));
	});

	return section;
}

function createGroupCard(group){
	const {groupName, period, location, size, desc, img, links, status} = group;

	const groupCard = document.createElement("div");
	groupCard.setAttribute('class', 'groupCard');

	appendImg(groupCard, img);
	appendText(groupName, groupCard, "h2", "textCenter");
	appendText(`<i>${period}</i>`, groupCard, "p", "textCenter lessHeight");
	appendText(`${location}<br><b>Member Count: </b>${size}<br>${desc}`, groupCard, "p");
	let linksLoc = links;
	appendDiv("links", groupCard, "links");
	for (var e = 0; e < linksLoc.length/2; e++) {
		appendText(`<a href=${linksLoc[2*e+1]}>${linksLoc[e*2]}</a> `, groupCard.lastChild, "span", linksLoc[e*2]);
	}
	appendDiv(`${status} activityDiv`, groupCard)
	appendText(`<b>${status.toUpperCase()}</b>`, groupCard.lastChild, "p");

	return groupCard;
}

fetch('worldstuck.json')
	.then(function(response) {
		return response.json();
	})
	.then(function(data) {
		const mainContainer = document.getElementById("myData");
		for (const [regionName, regionData] of Object.entries(data)) {
			regionData.sort((a,b) => a.groupName.localeCompare(b.groupName))
			const section = createRegionSection(regionName, regionData)
			mainContainer.appendChild(section);
		}
		})
	.catch(function(err) {
		console.log('error: ' + err);
	});

## style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Zanabazar+Square&display=swap');

html {
  height: 100%;
  width: 100%;
}
body {
	background-color: #404258;
	color: white;
	font-family: Open Sans, Helvetica, sans-serif;
}
h1 {
	font-family: Noto Sans Zanabazar Square;
}
.textCenter {
	text-align: center;
}
img {
	width: 95%;
	margin-top: 15px;
	display: block;
  margin-left: auto;
  margin-right: auto;
}
span {
	border: 2px solid white;
	border-radius: 25px;
	padding: 3px;
	padding-left: 6px;
	margin: 3px;
	line-height: 35px;
}
a {
	color: white;
}
a:link,visited,hover,active {
  text-decoration: none;
}
.links {
	margin-bottom: 10px;
}
.region {
	border-radius: 10px;
	margin: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #474E68;
}
.groupsDiv {
	-webkit-column-width: 10em;
	-webkit-column-gap: 1em;
	-webkit-column-count: 5;
	-moz-column-width: 20em;
	-moz-column-gap: 2em;
	-moz-column-count: 2;
	-ms-column-width: 20em;
	-ms-column-gap: 2em;
	-ms-column-count: 5;
	column-width: 20em;
	column-gap: 2em;
	column-count: 5;
	padding-bottom: 15px;
}
.groupCard {
	border: 2px solid black;
	border-radius: 25px;
	padding: 10px;
	background-color: #50577A;


	/* COLUMNS */
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	width: 100%;
	box-sizing:border-box;
}
.groupCard:not(:first-of-type) {
  margin: 20px 0;
}

/* ACTIVITY BANNER */
.activityDiv {
	font-size: 30px;
	padding: 10px 5px;
	margin: 10px -10px -10px -10px;
	border-radius: 0% 0% 23px 23px;
	text-align: center;
}
.activityDiv * {
	margin-top: auto;
	margin-bottom: auto;
}
.Active {
	background-color: #7cd992;
}
.Inactive {
	background-color: #f7e463;
}
.Dead {
	background-color: #eb6060;
}
.Unknown {
	background-color: #a8a8a8;
}
/* END ACTIVITY BANNER */

/* LINK COLORS */
.Instagram {
	background-image: linear-gradient(to bottom right, #d62976, 	#962fbf);
	border-color: #000000;
}
.Discord {
	background-color:	#7289da;
	border-color: #23272a;
}
.Tumblr {
	background-color: #001935;
	border-color: #00B8FF;
}
.TikTok {
	background-image: linear-gradient(to bottom right, #00f2ea, #ff0050);
	border-color: black;
}
.YouTube {
	background-color: #FF0000;
	border-color: #282828;
}
.Linktree {
	background-color: #4d6d17;
	border-color: black;
}
.Facebook {
	background-color: #4292FF;
	border-color: #18191A;
}
/* END LINK COLORS */

## worldstuck.json
{
	"Template": [
		{
			"img": "",
			"groupName": "",
			"location": "",
			"size": "",
			"desc": "",
			"period": "",
			"links": [],
			"status": ""
    }
	],
	"California": [
		{
			"img": "CaliborniaHomestucks.jpg",
			"groupName": "Calibornia Homestucks",
			"location": "California",
			"size": "215",
			"desc": "Calibornia Homestucks is a California-wide Homestuck group founded at FanimeCon 2022. They are very active in online spaces, particularly their Discord, and host gatherings and/or panels at most major California conventions. They have a 15+ age limit.",
			"period": "2022-present",
			"links": ["Discord", "https://discord.gg/calibornia", "Instagram", "https://instagram.com/caliborniahomestucks", "Tumblr", "https://tumblr.com/caliborniastuck", "TikTok", "https://tiktok.com/@calibornia.stuck", "YouTube", "https://youtube.com/channel/UC77y1UjGT_TKFNG6XkMAfcQ", "Linktree", "https://linktr.ee/calibornia"],
			"status": "Active"
    },
		{
			"groupName": "SoCal Homestuck 18 and Over Group",
			"location": "Southern California",
			"size": "32",
			"desc": "A Facebook group for adult Homestuck cosplayers located in Southern California. Had a very short and inactive lifespan.",
			"period": "2014-2017",
			"links": ["Facebook", "https://www.facebook.com/groups/666498250112498/"],
			"status": "Dead"
    },
		{
			"img": "SoCalStuck.jpg",
			"groupName": "SoCalStuck",
			"location": "Southern California",
			"size": "Unknown",
			"desc": "A Tumblr page dedicated to tracking Homestuck meetups and groups in Southern California. While mostly dedicated to reporting on the activity of other, seperate SoCal groups, it did host multiple meetups of its own.",
			"period": "2012-2013",
			"links": ["Tumblr", "https://socalstuck.tumblr.com/"],
			"status": "Dead"
    },
		{
			"img": "SanDiegoStuck.jpg",
			"groupName": "SanDiegoStuck",
			"location": "San Diego",
			"size": "81",
			"desc": "A San Diego Homestuck group that at one point hosted bi-monthly meetups. The group seems to have amassed a pretty significant following at one point and had initially formed from a meetup at a local convention. It seems as though the group eventually morphed into a general San Diego cosplay group judging by the Facebook page.",
			"period": "2012-2018",
			"links": ["Tumblr", "https://sandiegostuck.tumblr.com/", "Facebook", "https://www.facebook.com/groups/282144831811932/"],
			"status": "Dead"
    },
		{
			"groupName": "Orange County Homestuck Team",
			"location": "Orange County",
			"size": "170",
			"desc": "All information on the page is wiped with only the note \"This group is now inactive. Sorry about that!\". No more information can be found.",
			"period": "2011-Unknown",
			"links": ["Facebook", "https://www.facebook.com/groups/208196309218508/"],
			"status": "Dead"
    },
		{
			"groupName": "SoCal Homestuck Cosplay Group",
			"location": "Southern California",
			"size": "236",
			"desc": "The Facebook page is locked to members only. Judging by the member count, they amassed a significant following in their peak. The group is most likely dead.",
			"period": "2012-Unknown",
			"links": ["Facebook", "https://www.facebook.com/groups/243886025731762/"],
			"status": "Unknown"
    },
		{
			"groupName": "Southern? California Homestuck Meetup",
			"location": "California",
			"size": "134",
			"desc": "The Facebook page is locked to members only. It can be inferred from the title and member count that this was once a thriving Homestuck group spanning Southern California and at least part of Northern California. Latest activity is unknown, but can be safely assumed to be dead.",
			"period": "2012-Unknown",
			"links": ["Facebook", "https://www.facebook.com/groups/383399895048609/"],
			"status": "Unknown"
    },
		{
			"img": "SouthernCaliforniaHomestucks.jpg",
			"groupName": "Southern California Homestucks",
			"location": "Southern California",
			"size": "165",
			"desc": "A Homestuck group based in Southern California that seems to have been active for a longer period of time than most. Some members do appear to be active on Facebook still, although there hasn't been any significant activity in the group since 2018.",
			"period": "2013-2018",
			"links": ["Facebook", "https://www.facebook.com/groups/515355595200162/"],
			"status": "Dead"
    }
	],
	"Oregon": [
		{
			"img": "MSPA_Logo.gif",
			"groupName": "Targetstuck",
			"location": "San Jose",
			"size": "100",
			"desc": "Lots of cool cats and hip chicks",
			"period": "2010-2011",
			"links": ["Instagram", "https://instagram.com/battleblockb0ss", "Google", "https://google.com", "test", "test"],
			"status": "Active"
		},
		{
			"img": "Homestuck.jpg",
			"groupName": "the Simpsons",
			"location": "San Jose",
			"size": "100",
			"desc": "Lots of cool cats and hip chicks",
			"period": "2010-2011",
			"links": ["Instagram", "https://instagram.com/battleblockb0ss", "Google", "https://google.com", "test", "test"],
			"status": "Active"
		}
	]
}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>replit</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
	<div id="myData"></div>
	<script src="script.js"></script>
	</body>

	</html>
	function appendDiv(classes, container, divId) {
	let div = document.createElement("div");
	div.setAttribute("class", classes);
	if (divId != undefined) {
	div.setAttribute("id", divId);
	}
	container.appendChild(div);
	return div;
	}

	function appendImg(container, img) {
	if (img == undefined) {
	let defaultImg = new Image();
	defaultImg.src = "https://picsum.photos/300"
	container.appendChild(defaultImg);
	} else {
	let newImg = new Image();
	newImg.src = `images/${img}`;
	container.appendChild(newImg);
	}
	}

	function appendText(textVal, container, textTag, classes) {
	let text = document.createElement(textTag);
	if (classes != undefined) {
	text.setAttribute("class", classes);
	}
	text.innerHTML = textVal;
	container.appendChild(text);
	}

	function createRegionSection(regionName, regionData) {
	const section = document.createElement("section");
	section.setAttribute("class", "region");

	//create Title
	const headerDiv = appendDiv("headerDiv", section);
	const regionHeader = appendText(regionName, headerDiv, "h1", "header");

	//create Cards
	const groupsDiv = appendDiv("groupsDiv", section);
	regionData.forEach((group) => {
	groupsDiv.appendChild(createGroupCard(group));
	});

	return section;
	}

	function createGroupCard(group){
	const {groupName, period, location, size, desc, img, links, status} = group;

	const groupCard = document.createElement("div");
	groupCard.setAttribute('class', 'groupCard');

	appendImg(groupCard, img);
	appendText(groupName, groupCard, "h2", "textCenter");
	appendText(`<i>${period}</i>`, groupCard, "p", "textCenter lessHeight");
	appendText(`${location}<br><b>Member Count: </b>${size}<br>${desc}`, groupCard, "p");
	let linksLoc = links;
	appendDiv("links", groupCard, "links");
	for (var e = 0; e < linksLoc.length/2; e++) {
	appendText(`<a href=${linksLoc[2e+1]}>${linksLoc[e2]}</a> `, groupCard.lastChild, "span", linksLoc[e*2]);
	}
	appendDiv(`${status} activityDiv`, groupCard)
	appendText(`<b>${status.toUpperCase()}</b>`, groupCard.lastChild, "p");

	return groupCard;
	}

	fetch('worldstuck.json')
	.then(function(response) {
	return response.json();
	})
	.then(function(data) {
	const mainContainer = document.getElementById("myData");
	for (const [regionName, regionData] of Object.entries(data)) {
	regionData.sort((a,b) => a.groupName.localeCompare(b.groupName))
	const section = createRegionSection(regionName, regionData)
	mainContainer.appendChild(section);
	}
	})
	.catch(function(err) {
	console.log('error: ' + err);
	});
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Zanabazar+Square&display=swap');

	html {
	height: 100%;
	width: 100%;
	}
	body {
	background-color: #404258;
	color: white;
	font-family: Open Sans, Helvetica, sans-serif;
	}
	h1 {
	font-family: Noto Sans Zanabazar Square;
	}
	.textCenter {
	text-align: center;
	}
	img {
	width: 95%;
	margin-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	span {
	border: 2px solid white;
	border-radius: 25px;
	padding: 3px;
	padding-left: 6px;
	margin: 3px;
	line-height: 35px;
	}
	a {
	color: white;
	}
	a:link,visited,hover,active {
	text-decoration: none;
	}
	.links {
	margin-bottom: 10px;
	}
	.region {
	border-radius: 10px;
	margin: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #474E68;
	}
	.groupsDiv {
	-webkit-column-width: 10em;
	-webkit-column-gap: 1em;
	-webkit-column-count: 5;
	-moz-column-width: 20em;
	-moz-column-gap: 2em;
	-moz-column-count: 2;
	-ms-column-width: 20em;
	-ms-column-gap: 2em;
	-ms-column-count: 5;
	column-width: 20em;
	column-gap: 2em;
	column-count: 5;
	padding-bottom: 15px;
	}
	.groupCard {
	border: 2px solid black;
	border-radius: 25px;
	padding: 10px;
	background-color: #50577A;


	/* COLUMNS */
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	width: 100%;
	box-sizing:border-box;
	}
	.groupCard:not(:first-of-type) {
	margin: 20px 0;
	}

	/* ACTIVITY BANNER */
	.activityDiv {
	font-size: 30px;
	padding: 10px 5px;
	margin: 10px -10px -10px -10px;
	border-radius: 0% 0% 23px 23px;
	text-align: center;
	}
	.activityDiv * {
	margin-top: auto;
	margin-bottom: auto;
	}
	.Active {
	background-color: #7cd992;
	}
	.Inactive {
	background-color: #f7e463;
	}
	.Dead {
	background-color: #eb6060;
	}
	.Unknown {
	background-color: #a8a8a8;
	}
	/* END ACTIVITY BANNER */

	/* LINK COLORS */
	.Instagram {
	background-image: linear-gradient(to bottom right, #d62976, #962fbf);
	border-color: #000000;
	}
	.Discord {
	background-color: #7289da;
	border-color: #23272a;
	}
	.Tumblr {
	background-color: #001935;
	border-color: #00B8FF;
	}
	.TikTok {
	background-image: linear-gradient(to bottom right, #00f2ea, #ff0050);
	border-color: black;
	}
	.YouTube {
	background-color: #FF0000;
	border-color: #282828;
	}
	.Linktree {
	background-color: #4d6d17;
	border-color: black;
	}
	.Facebook {
	background-color: #4292FF;
	border-color: #18191A;
	}
	/* END LINK COLORS */
	{
	"Template": [
	{
	"img": "",
	"groupName": "",
	"location": "",
	"size": "",
	"desc": "",
	"period": "",
	"links": [],
	"status": ""
	}
	],
	"California": [
	{
	"img": "CaliborniaHomestucks.jpg",
	"groupName": "Calibornia Homestucks",
	"location": "California",
	"size": "215",
	"desc": "Calibornia Homestucks is a California-wide Homestuck group founded at FanimeCon 2022. They are very active in online spaces, particularly their Discord, and host gatherings and/or panels at most major California conventions. They have a 15+ age limit.",
	"period": "2022-present",
	"links": ["Discord", "https://discord.gg/calibornia", "Instagram", "https://instagram.com/caliborniahomestucks", "Tumblr", "https://tumblr.com/caliborniastuck", "TikTok", "https://tiktok.com/@calibornia.stuck", "YouTube", "https://youtube.com/channel/UC77y1UjGT_TKFNG6XkMAfcQ", "Linktree", "https://linktr.ee/calibornia"],
	"status": "Active"
	},
	{
	"groupName": "SoCal Homestuck 18 and Over Group",
	"location": "Southern California",
	"size": "32",
	"desc": "A Facebook group for adult Homestuck cosplayers located in Southern California. Had a very short and inactive lifespan.",
	"period": "2014-2017",
	"links": ["Facebook", "https://www.facebook.com/groups/666498250112498/"],
	"status": "Dead"
	},
	{
	"img": "SoCalStuck.jpg",
	"groupName": "SoCalStuck",
	"location": "Southern California",
	"size": "Unknown",
	"desc": "A Tumblr page dedicated to tracking Homestuck meetups and groups in Southern California. While mostly dedicated to reporting on the activity of other, seperate SoCal groups, it did host multiple meetups of its own.",
	"period": "2012-2013",
	"links": ["Tumblr", "https://socalstuck.tumblr.com/"],
	"status": "Dead"
	},
	{
	"img": "SanDiegoStuck.jpg",
	"groupName": "SanDiegoStuck",
	"location": "San Diego",
	"size": "81",
	"desc": "A San Diego Homestuck group that at one point hosted bi-monthly meetups. The group seems to have amassed a pretty significant following at one point and had initially formed from a meetup at a local convention. It seems as though the group eventually morphed into a general San Diego cosplay group judging by the Facebook page.",
	"period": "2012-2018",
	"links": ["Tumblr", "https://sandiegostuck.tumblr.com/", "Facebook", "https://www.facebook.com/groups/282144831811932/"],
	"status": "Dead"
	},
	{
	"groupName": "Orange County Homestuck Team",
	"location": "Orange County",
	"size": "170",
	"desc": "All information on the page is wiped with only the note \"This group is now inactive. Sorry about that!\". No more information can be found.",
	"period": "2011-Unknown",
	"links": ["Facebook", "https://www.facebook.com/groups/208196309218508/"],
	"status": "Dead"
	},
	{
	"groupName": "SoCal Homestuck Cosplay Group",
	"location": "Southern California",
	"size": "236",
	"desc": "The Facebook page is locked to members only. Judging by the member count, they amassed a significant following in their peak. The group is most likely dead.",
	"period": "2012-Unknown",
	"links": ["Facebook", "https://www.facebook.com/groups/243886025731762/"],
	"status": "Unknown"
	},
	{
	"groupName": "Southern? California Homestuck Meetup",
	"location": "California",
	"size": "134",
	"desc": "The Facebook page is locked to members only. It can be inferred from the title and member count that this was once a thriving Homestuck group spanning Southern California and at least part of Northern California. Latest activity is unknown, but can be safely assumed to be dead.",
	"period": "2012-Unknown",
	"links": ["Facebook", "https://www.facebook.com/groups/383399895048609/"],
	"status": "Unknown"
	},
	{
	"img": "SouthernCaliforniaHomestucks.jpg",
	"groupName": "Southern California Homestucks",
	"location": "Southern California",
	"size": "165",
	"desc": "A Homestuck group based in Southern California that seems to have been active for a longer period of time than most. Some members do appear to be active on Facebook still, although there hasn't been any significant activity in the group since 2018.",
	"period": "2013-2018",
	"links": ["Facebook", "https://www.facebook.com/groups/515355595200162/"],
	"status": "Dead"
	}
	],
	"Oregon": [
	{
	"img": "MSPA_Logo.gif",
	"groupName": "Targetstuck",
	"location": "San Jose",
	"size": "100",
	"desc": "Lots of cool cats and hip chicks",
	"period": "2010-2011",
	"links": ["Instagram", "https://instagram.com/battleblockb0ss", "Google", "https://google.com", "test", "test"],
	"status": "Active"
	},
	{
	"img": "Homestuck.jpg",
	"groupName": "the Simpsons",
	"location": "San Jose",
	"size": "100",
	"desc": "Lots of cool cats and hip chicks",
	"period": "2010-2011",
	"links": ["Instagram", "https://instagram.com/battleblockb0ss", "Google", "https://google.com", "test", "test"],
	"status": "Active"
	}
	]
	}