ghostfox/MaszToZadanieDomowe.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Szybki commit bo zmieniam komputer

Browse Source
This commit is contained in:
Dark Steveneq
2025-09-21 20:30:37 +02:00
parent 9c2b30b0fb
commit cfbea5f2f4
4 changed files with 101 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
assets/js/akordeon.js
View File

@@ -1,25 +1,29 @@
document.addEventListener("DOMContentLoaded", () => {
const akordeony = document.getElementsByClassName("akordeon");
for (const akordeon of akordeony) {
if (akordeon.children.length < 2) {
console.warn("Na stronie jest niepoprawnie skonfigurowany akordeon!")
continue;
}
const pierworodny = akordeon.children[0];
const nowy = document.createElement("div")
nowy.className = "akordeon-header";
nowy.onclick = () => {
const otwarte = akordeon.classList.contains("open");
akordeon.classList.remove(otwarte ? "open": "closed");
akordeon.classList.add(otwarte ? "closed" : "open");
for (const dziecko of akordeon.children) {
if (dziecko != nowy) {
dziecko.style.display = otwarte ? "" : "none";
}
}
}
akordeon.replaceChild(nowy, pierworodny)
nowy.append(pierworodny)
class Akordeon extends HTMLElement {
constructor() {
super();
this._internals = this.attachInternals();
}
})
get collapsed() {
return this._internals.states.has("hidden");
}
set collapsed(flag) {
if (flag) {
// Existence of identifier corresponds to "true"
this._internals.states.add("hidden");
} else {
// Absence of identifier corresponds to "false"
this._internals.states.delete("hidden");
}
}
connecterCallback() {
}
attributeChangedCallback(atrybut, poprzednio, obecnie) {
}
}
customElements.define("akordeon", Akordeon);

64
assets/js/nawigacja.js Normal file
View File

@@ -0,0 +1,64 @@
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);

33
index.html
View File

@@ -6,20 +6,11 @@
<title>MaszToZadanieDomowe.com</title>
<link href="/favicon.ico" rel="favicon">
<link href="assets/css/main.css" rel="stylesheet">
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count"
async src="/assets/js/count.js"></script>
<script src="assets/js/nawigacja.js" defer></script>
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
</head>
<body>
<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>
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
</ul>
</nav>
</header>
<header-comp></header-comp>
<main>
<h2>Witam na mojej stronie</h2>
<hr>
@@ -41,22 +32,6 @@
to będzie zdrowy pieesek<br>
<sub>youpiter podsunął to</sub>
</main>
<footer>
<div>
<div>
<ul>
<li><a href="/index.html">Strona główna</a></li>
<li><a href="/hobby.html">Moje hobby</a></li>
<li><a href="/galeria.html">Galeria</a></li>
<li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
</ul>
<ul>
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
</ul>
</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>
<footer-comp></footer-comp>
</body>
</html>

32
js-podstawy.html
View File

@@ -12,16 +12,7 @@
<script src="/assets/js/js-podstawy.js"></script>
</head>
<body>
<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>
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
</ul>
</nav>
</header>
<header-comp></header-comp>
<main>
<h2>JavaScript Podstawowe Zadania</h2>
<hr>
@@ -95,6 +86,9 @@
<br>
<li>
<h4>Akordeon</h4>
<akordeon state="closed">
</akordeon>
<div class="akordeon">
<span>Tytuł akordeonu</span>
<pre>
@@ -144,22 +138,6 @@
</li>
</ol>
</main>
<footer>
<div>
<div>
<ul>
<li><a href="/index.html">Strona główna</a></li>
<li><a href="/hobby.html">Moje hobby</a></li>
<li><a href="/galeria.html">Galeria</a></li>
<li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
</ul>
<ul>
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
</ul>
</div>
<strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
</div>
<img src="/assets/images/blahaj.png">
</footer>
<footer-comp></footer-comp>
</body>
</html>