Files
MaszToZadanieDomowe.com/assets/js/nawigacja.js
2025-09-21 20:30:37 +02:00

64 lines
2.0 KiB
JavaScript

const linki = [
[
{ nazwa: "Strona główna", link: "/index.html" },
{ nazwa: "Moje hobby", link: "/hobby.html" },
{ nazwa: "Galeria", link: "/galeria.html" },
{ nazwa: "Kontakt", link: "https://nonamesoft.xyz/about" },
],
[
{ nazwa: "JS. Podstawowe Zad.", link: "/js-podstawy.html" },
{ nazwa: "JS. Warunkowe Zad.", link: "/js-warunkowe.html" },
]
];
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<img src="/favicon.ico" width="64" height="64">
<h1>MaszToZadanieDomowe.com</h1>
<nav>
<ul>
<li><a href="/index.html">Strona główna</a></li>
${linki[linki.length - 1].map(value => {
return `<li><a href="${value.link}">${value.nazwa}</a></li>`
}).join("")}
</ul>
</nav>
</header>
`;
}
};
customElements.define("header-comp", Header);
class Footer extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<footer>
<div>
<div>
${linki.map(kategoria => {
return `<ul>
${kategoria.map(value => {
return `<li><a href="${value.link}">${value.nazwa}</a></li>`
}).join("")}
</ul>`
}).join("")}
</div>
<strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
</div>
<img src="assets/images/blahaj.png" height="128">
</footer>
`;
}
};
customElements.define("footer-comp", Footer);