47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
"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);
|
|
});
|