chore(aiteam): finalize tested changes for review

quiz/app.js

@@ -0,0 +1,46 @@
+"use strict";
+
+const categories = [
+  { name: "Wrestling", icon: "assets/icons/wrestling.svg" },
+  { name: "Film", icon: "assets/icons/film.svg" },
+  { name: "Technik", icon: "assets/icons/technik.svg" },
+];
+
+const appContainer = document.getElementById("categories");
+const statusRegion = document.getElementById("status");
+
+function buildTile(category) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "tile";
+  button.dataset.category = category.name;
+
+  const img = document.createElement("img");
+  img.src = category.icon;
+  img.alt = "";
+  img.width = 48;
+  img.height = 48;
+
+  const label = document.createElement("span");
+  label.className = "tile-label";
+  label.textContent = category.name;
+
+  button.append(img, label);
+
+  button.addEventListener("click", () => {
+    statusRegion.textContent = "Kategorie gewählt: " + category.name;
+  });
+
+  return button;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const tilesContainer = appContainer.querySelector(".tiles");
+
+  const fragment = document.createDocumentFragment();
+  categories.forEach((category) => {
+    fragment.appendChild(buildTile(category));
+  });
+
+  tilesContainer.appendChild(fragment);
+});