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,15 +149,17 @@ function createTags(categories) {
 	let tagsContainer = document.createElement("ul");
 
 	// For each category create a li element
-	categories.forEach((item) => {
-		let tag = document.createElement("li");
-		tag.classList.add("tag");
-		tag.innerHTML = item;
-		tagsContainer.appendChild(tag);
-
-		// add the category to the filters Set to use it later
-		filters.add(item);
-	});
+	categories
+		.sort((a, b) => a.localeCompare(b))
+		.forEach((item) => {
+			let tag = document.createElement("li");
+			tag.classList.add("tag");
+			tag.innerHTML = item;
+			tagsContainer.appendChild(tag);
+
+			// add the category to the filters Set to use it later
+			filters.add(item);
+		});
 
 	return tagsContainer;
 }
@@ -168,17 +170,19 @@ function createTags(categories) {
 
 // Parse the filters Set to create a list of interactive list elements
 function createFilters() {
-	filters.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);
-		// Tab index is for accessibility via keyboard
-		tag.setAttribute("tabindex", 0);
-		tag.setAttribute("role", "button");
-		tag.classList.add("tag");
-		tag.innerHTML = item;
-		filtersContainer.appendChild(tag);
-	});
+	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);
+			// Tab index is for accessibility via keyboard
+			tag.setAttribute("tabindex", 0);
+			tag.setAttribute("role", "button");
+			tag.classList.add("tag");
+			tag.innerHTML = item;
+			filtersContainer.appendChild(tag);
+		});
 	// Build a list of the tag for managing the filter
 	tagList = document.querySelectorAll("[data-tag]");
 }

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;
 }