<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>🧭 Aufgabe: One Page Side</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
<!-- Klasse Router einbinden -->
<script src="router.js"></script>
<!-- Single Page Router initialisieren -->
<script>
window.addEventListener("load", () => {
let swapContent = (id, title) => {
document.querySelectorAll("main").forEach(mainElement => {
mainElement.classList.add("hidden");
})
let element = document.querySelector(`#${id}`);
if (element) element.classList.remove("hidden");
document.title = `🧭 ${title} | Aufgabe: One Page Side`;
}
let routes = [
{
url: "^/$",
show: () => swapContent("page-start", "Witz des Tages"),
},{
url: "^/other/$",
show: () => swapContent("joke1", "Lösung1"),
},{
url: ".*",
show: () => swapContent("joke2", "Lösung2"),
}
];
let router = new Router(routes);
router.start();
});
</script>
</head>
<body>
<main id="page-start" class="hidden">
<h1>Witz des Tages</h1>
<h2>Was kommt nach Elch?</h2>
<ul>
<li>
<a href="#/other/">Zur Antwort Witz 1</a>
</li>
</ul>
<h2>Was ist Grün und auf Knopfdrück Rot?</h2>
<ul>
<li>
<a href="#/xyzabc/">Zur Antwort Witz 2</a>
</li>
</ul>
<img src="lachenderMann.png" type="picture"\>
</main>
<main id="joke1" class="hidden">
<h1>Lösung 1</h1>
<text> Zwölch :D </text>
<a href="#/">Zurück zur Startseite</a>
<img src="lachenderMann.png" type="picture"\>
</main>
<main id="joke2" class="hidden">
<h1>Lösung 2</h1>
<text> N Frosch im Mixer :D </text>
<a href="#/">Zurück zur Startseite</a>
<img src="lachenderMann.png" type="picture"\>
</main>
</body>
</html>