Renamed script.js -> index.js

public/index.js

@@ -0,0 +1,66 @@
+const cardTemplate = document.getElementById('event-card');
+const eventsContainer = document.getElementById('events-container');
+const mainContainer = document.getElementById('container');
+
+
+async function main() {
+	const query = {
+		sort: 'start',
+	};
+
+	const stringifiedQuery = Qs.stringify({
+		...query
+	},
+	{
+		addQueryPrefix: true
+	}
+	);
+
+	const events = await (await fetch(`/api/events${stringifiedQuery}`)).json();
+
+	let currentDate;
+	let currentContainer;
+
+	for (const event of events.docs) {
+		if (currentDate !== event.startDate) {
+			currentContainer && mainContainer.append(currentContainer);
+
+			const c = eventsContainer.content.cloneNode(true);
+
+			c.querySelector('.events-container-title').innerText = event.startDate;
+
+			currentContainer = c;
+		}
+
+		currentDate = event.startDate;
+
+		const card = cardTemplate.content.cloneNode(true);
+
+		card.querySelector('.event-name').innerText = event.name;
+
+		const typeElem = card.querySelector('.event-type');
+		typeElem.innerText = event.type.value.name;
+		typeElem.style.backgroundColor = event.type.value.backgroundColour;
+
+		card.querySelector('.event-date .event-start').innerText = event.startDate;
+		card.querySelector('.event-time .event-start').innerText = event.startTime;
+
+		if (event.end) {
+			if (event.endDate !== event.startDate) {
+				card.querySelector('.event-date .event-end').innerText = event.endDate;
+				card.querySelector('.event-date .event-time-seperator').style.display = 'inline';
+			}
+
+			card.querySelector('.event-time .event-end').innerText = event.endTime;
+			card.querySelector('.event-time .event-time-seperator').style.display = 'inline';
+		}
+
+		card.querySelector('a.event-link').setAttribute('href', event.id);
+
+		currentContainer.querySelector('.grid').append(card);
+	}
+
+	currentContainer && mainContainer.append(currentContainer);
+}
+
+main();