filter sorting and little styling

contents.js

@@ -137,8 +137,8 @@ function createDate(string) {
 	if (date) {
 		const options = { year: "numeric", month: "short", day: "numeric" };
 		parsed = date.toLocaleDateString("en-EN", options);
+		if (parsed === "Invalid Date") parsed = "???";
 	}
-
 	return parsed;
 }
 
@@ -149,7 +149,9 @@ function createTags(categories) {
 	let tagsContainer = document.createElement("ul");
 
 	// For each category create a li element
-	categories.forEach((item) => {
+	categories
+		.sort((a, b) => a.localeCompare(b))
+		.forEach((item) => {
 			let tag = document.createElement("li");
 			tag.classList.add("tag");
 			tag.innerHTML = item;
@@ -168,7 +170,9 @@ function createTags(categories) {
 
 // Parse the filters Set to create a list of interactive list elements
 function createFilters() {
-	filters.forEach((item) => {
+	Array.from(filters)
+		.sort((a, b) => a.localeCompare(b))
+		.forEach((item) => {
 			let tag = document.createElement("li");
 			// Store the filter value in the markup and use it for filtering later
 			tag.setAttribute("data-tag", item);

style.css

@@ -40,7 +40,8 @@ h1 {
 	background: none;
 }
 
-.tag:focus {
+.tag:focus,
+.tag:hover {
 	transform: translateY(-4px);
 	transition: transform 0.2s ease-out;
 }
@@ -51,10 +52,18 @@ ul {
 
 /* TABLE */
 
+table {
+	border-collapse: collapse;
+}
+
 tr {
 	display: none;
 }
 
+tr:nth-child(even) {
+	background-color: rgb(251, 237, 225);
+}
+
 tr.active {
 	display: table-row;
 }