diff --git a/assets/css/baza.css b/assets/css/baza.css
index 26901aa..f90586a 100644
--- a/assets/css/baza.css
+++ b/assets/css/baza.css
@@ -45,7 +45,7 @@ body {
     user-select: none;    
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, p {
     margin: 0%;
 }
 
diff --git a/assets/css/js-warunkowe.css b/assets/css/js-warunkowe.css
new file mode 100644
index 0000000..0f0219c
--- /dev/null
+++ b/assets/css/js-warunkowe.css
@@ -0,0 +1,141 @@
+#pornhub-nieaktywne {
+    display: none;
+}
+
+#pornhub * {
+    color: #fff;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+}
+
+#pornhub {
+    display: inline-block !important;
+    background: #000;
+    z-index: 1000002;
+    overflow: auto;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+#pornhub img {
+    color: #fff;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 12px;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    width: 150px;
+}
+
+#pornhub #pierwszy {
+    max-width: 750px;
+    display: inline-block;
+    padding: 4rem 2rem;
+    box-shadow: 0 0 40px 5px rgba(255,255,255,.15);
+    background-color: #000;
+    border: 1px solid #2e2e2e;
+    position: relative;
+    top: 100px;
+    text-align: center;
+    color: #fff;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 12px;
+}
+
+#pornhub #pierwszy div h3 {
+    font-size: 2.5rem;
+    margin: 1.5rem 0 1rem;
+    font-weight: 700;
+    color: #fff;
+    background-color: initial;
+    line-height: initial;
+    padding: 0;
+    text-transform: none;
+}
+
+#pornhub #pierwszy div h4 {
+    font-size: 1.2rem;
+    margin: 1.5rem 0 1rem;
+    margin-top: 2.5rem;
+    margin-left: .25rem;
+    text-align: left;
+    font-weight: 700;
+    color: #fff;
+    background-color: initial;
+    line-height: initial;
+    padding: 0;
+    text-transform: none;
+}
+
+#pornhub #pierwszy div p {
+    font-size: 1.25rem;
+    margin: 0;
+    color: #ccc;
+}
+
+
+#pornhub span {
+    background-color: rgb(0,0,0);
+    color: rgb(204,204,204);
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    padding: 0;
+    font-size: 1rem;
+}
+
+#pornhub button {
+    appearance: none;
+  vertical-align: top;
+  text-decoration: none;
+  cursor: pointer;
+  position: relative;
+  outline: 0 none;
+  text-align: center;
+  margin: 0;
+  border-radius: 4px;
+  display: inline-block;
+  font-family: inherit;
+  background: #1f1f1f;
+  margin-top: 1rem;
+  font-size: 1.25rem;
+  width: 21rem;
+  max-width: 100%;
+  padding: 1rem;
+  font-weight: 700;
+  color: #fff;
+  border: 3px solid #ff9000;
+}
+
+#pornhub input {
+    margin: 0;
+    border: 3px solid #ff9000;
+    height: .5rem;
+    background: #1f1f1f;
+}
+
+#pornhub input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
+    border-width: 0px;
+    border-radius: 100%;
+    cursor: pointer;
+    background-color: #ff9000;
+}
+
+#pornhub input::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 100%;
+    cursor: pointer;
+    background-color: #ff9000;
+}
\ No newline at end of file
diff --git a/assets/js/akordeon.js b/assets/js/akordeon.js
index 8e18d52..e4a1342 100644
--- a/assets/js/akordeon.js
+++ b/assets/js/akordeon.js
@@ -1,13 +1,17 @@
 class Akordeon extends HTMLElement {
     constructor() {
         super();
+
         this._internals = this.attachInternals();
-        this.otwarte = this.getAttribute("otwarte") == "true";
 
         this.shadow = this.attachShadow({ mode: "open" });
-        this.shadow.onslotchange = ev => {
-            console.log(ev);
+
+        this.przycisk = document.createElement("button");
+        this.przycisk.onclick = () => {
+            this.otwarte = !this.otwarte;
         };
+
+        this.contents = document.createElement("slot");
     }
     
     get otwarte() {
@@ -17,12 +21,19 @@ class Akordeon extends HTMLElement {
     set otwarte(flag) {
         if (flag) {
             this._internals.states.add("otwarte");
+            this.przycisk.className = "otwarte";
+            this.contents.className = "otwarte";
         } else {
             this._internals.states.delete("otwarte");
+            this.przycisk.className = "";
+            this.contents.className = "";
         }
     }
 
     connectedCallback() {
+        this.przycisk.innerText = this.getAttribute("title") ?? "Nowy akordeon";
+        this.otwarte = this.getAttribute("otwarte") == "true";
+
         const styl = document.createElement("style");
         styl.textContent = `
             @import url('/assets/css/baza.css');
@@ -48,32 +59,24 @@ class Akordeon extends HTMLElement {
                 text-align: left;
             }
 
-            ::part(button)(:state(otwarte)) {
+            button.otwarte {
                 border-bottom-color: var(--colorSurface2);
-                scale: 1.005;
+                scale: 1.006;
             }
 
             slot {
+                display: none;
+            }
+
+            slot.otwarte {
                 display: inline;
                 padding: .5rem;
             }
         `;
         this.shadow.appendChild(styl);
-
-        const przycisk = document.createElement("button");
-        przycisk.innerText = this.getAttribute("title") ?? "Nowy akordeon";
-        przycisk.onclick = () => {
-            this.otwarte = !this.otwarte;
-        };
-        this.shadow.appendChild(przycisk);
-
-        this.contents = document.createElement("slot");
+        this.shadow.appendChild(this.przycisk);
         this.shadow.appendChild(this.contents);
     }
-
-    attributeChangedCallback(atrybut, poprzednio, obecnie) {
-
-    }
 }
 
 customElements.define("akordeon-comp", Akordeon);
\ No newline at end of file
diff --git a/assets/js/js-podstawy.js b/assets/js/js-podstawy.js
index 25fc80f..d615f13 100644
--- a/assets/js/js-podstawy.js
+++ b/assets/js/js-podstawy.js
@@ -80,8 +80,6 @@ const rozmiary = {
 };
 
 document.addEventListener("DOMContentLoaded", () => {
-    zad1Zsumuj();
-
     zad3Inicjalizacja();
 
     document.getElementById('zad4-tekst').style.fontSize = '30pt';
@@ -90,17 +88,6 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById('zad4-tekst').style.borderRadius = '1rem';
 });
 
-function zad1Zsumuj() {
-    const elX = document.getElementById("zad1-x");
-    const elY = document.getElementById("zad1-y");
-    const elOut = document.getElementById("zad1-output");
-
-    const x = typeof elX.value == "string" ? Number(elX.value) : 0;
-    const y = typeof elY.value == "string" ? Number(elY.value) : 0;
-
-    elOut.innerText = `${x} + ${y} = ${x + y}`
-}
-
 function zad2UstawImie() {
     const imie = prompt("Podaj imię");
     const elOut = document.getElementById("zad2-output");
diff --git a/assets/js/js-warunkowe.js b/assets/js/js-warunkowe.js
new file mode 100644
index 0000000..8f0dbac
--- /dev/null
+++ b/assets/js/js-warunkowe.js
@@ -0,0 +1,25 @@
+document.addEventListener("DOMContentLoaded", () => {
+    zad4SprawdzParzystosc();
+    zad7Przesun();
+})
+
+function zad4SprawdzParzystosc() {
+    document.getElementById("zad4-wynik").innerText = document.getElementById("zad4-liczba").valueAsNumber % 2 == 1 ? "Nieparzysta" : "Parzysta";
+}
+
+function zad7Przesun() {
+    const wiek = Number(document.getElementById("zad7-slider").value);
+    document.getElementById("zad7-wiek").innerHTML = "Wiek: " + (wiek >= 18 ? "18+" : wiek);
+}
+
+function zad7Koniec() {
+    const wiek = Number(document.getElementById("zad7-slider").value);
+    if (wiek > 18) {
+        alert("Jesteś dorosły, ile wspólnych lat masz już na karku?");
+    } else if (wiek >= 11 && wiek < 17) {
+        alert("Jesteś nastolatkiem, dopiero zaczynasz czy już kolejny raz?");
+    } else if (wiek < 11) {
+        alert("Jesteś dzieckiem! Akysz, nie niszcz sobie życia");
+    }
+    document.getElementById('pornhub').id = 'pornhub-nieaktywne';
+}
\ No newline at end of file
diff --git a/assets/js/js-wspolne.js b/assets/js/js-wspolne.js
new file mode 100644
index 0000000..4833d70
--- /dev/null
+++ b/assets/js/js-wspolne.js
@@ -0,0 +1,69 @@
+// Obliczanie
+class Obliczanie extends HTMLElement {
+    elementy = {};
+    dzialanie = "";
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: "open" });
+    }
+
+    wylicz() {
+        let operacja = this.dzialanie;
+        for (const znak in this.elementy)
+        {
+            const element = this.shadow.getElementById(znak);
+            if (element == null) {
+                return;
+            }
+            operacja = operacja.replaceAll(znak, element == null ? "" : element.value);
+        }
+        try {
+            this.wynik.innerText = eval(operacja);
+        } catch {
+            this.wynik.innerText = "Nieprawidłowa operacja";
+        }
+    }
+
+    connectedCallback() {
+        const styl = document.createElement("style");
+        styl.textContent = `
+            @import url('/assets/css/baza.css');
+        `;
+
+        this.dzialanie = this.getAttribute("dzialanie") ?? "";
+        if (this.dzialanie == "") {
+            this.shadow.innerHTML = "<h1>Nieustawione działanie!</h1>";
+            return;
+        }
+
+        let html = this.dzialanie;
+        const matche = this.dzialanie.match(/[a-z]/gi);
+        if (matche != null) {
+            matche.forEach(znak => {
+                if (!this.elementy[znak]) {
+                    this.elementy[znak] = true;
+                    const element = document.createElement("input");
+                    element.id = znak;
+                    html = html.replaceAll(znak, element.outerHTML);
+                }
+            })
+        }
+            
+        this.wynik = document.createElement("span");
+        this.shadow.innerHTML = html + " = ";
+        this.shadow.appendChild(this.wynik);
+        this.shadow.appendChild(styl);
+
+        for (const child of this.shadow.children) {
+            if (child.id != "") {
+                child.type = "number";
+                child.oninput = () => {
+                    this.wylicz();
+                }
+            }
+        }
+        this.wylicz();
+    }
+};
+
+customElements.define("obliczanie-comp", Obliczanie);
\ No newline at end of file
diff --git a/assets/js/nawigacja.js b/assets/js/nawigacja.js
index 46580d5..bfe15e0 100644
--- a/assets/js/nawigacja.js
+++ b/assets/js/nawigacja.js
@@ -7,7 +7,7 @@ const linki = [
     ],
     [
         { nazwa: "JS. Podstawowe Zad.", link: "/js-podstawy.html" },
-        { nazwa: "JS. Warunkowe Zad.", link: "/js-warunkowe.html" },
+        { nazwa: "JS. Zad. Warunkowe", link: "/js-warunkowe.html" },
     ]
 ];
 
diff --git a/js-podstawy.html b/js-podstawy.html
index 9eee016..87188ef 100644
--- a/js-podstawy.html
+++ b/js-podstawy.html
@@ -9,6 +9,7 @@
         <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
         <script src="/assets/js/nawigacja.js"></script>
         <script src="/assets/js/akordeon.js"></script>
+        <script src="/assets/js/js-wspolne.js"></script>
         <script src="/assets/js/js-podstawy.js"></script>
     </head>
     <body>
@@ -20,15 +21,7 @@
                 <li>
                     <h4>Sumowanie liczb</h4>
                     <hr>
-                    <label for="zad1-x">X:</label>
-                    <input type="number" name="X" id="zad1-x" placeholder="2" oninput="zad1Zsumuj()"><br>
-
-                    <label for="zad1-y">Y: </label>
-                    <input type="number" name="Y" id="zad1-y" placeholder="2" oninput="zad1Zsumuj()"><br>
-
-                    <br>
-                    <hr>
-                    <strong>Wynik:</strong> <span id="zad1-output">2 + 2 = 4</span>
+                    <obliczanie-comp dzialanie="a + b"></obliczanie-comp>
                 </li>
                 <br>
                 <li>
@@ -87,8 +80,8 @@
                 <li>
                     <h4>Akordeon</h4>
                     <hr>
-                    <akordeon-comp>
-                        <h2>After polling after pooling nightshaft</h2>
+                    <akordeon-comp title="Poprawiony akordeon" otwarte="true">
+                        <p>Teraz będzie lepiej</p>
                     </akordeon-comp>
                 </li>
                 <br>
diff --git a/js-warunkowe.html b/js-warunkowe.html
new file mode 100644
index 0000000..d81de31
--- /dev/null
+++ b/js-warunkowe.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="pl">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>JS Zad. Warunkowe - MaszToZadanieDomowe.com</title>
+        <link href="/favicon.ico" rel="favicon">
+        <link href="/assets/css/main.css" rel="stylesheet">
+        <link href="/assets/css/js-warunkowe.css" rel="stylesheet">
+        <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
+        <script src="/assets/js/nawigacja.js"></script>
+        <script src="/assets/js/js-wspolne.js"></script>
+        <script src="/assets/js/js-warunkowe.js"></script>
+    </head>
+    <body>
+        <header-comp></header-comp>
+        <main>
+            <h2>JavaScript Zadania Warunkowe</h2>
+            <hr>
+            <ol>
+                <li>
+                    <h4>Dzielenie liczb</h4>
+                    <hr>
+                    <obliczanie-comp dzialanie="a / b"></obliczanie-comp>
+                </li>
+                <br>
+                <li>
+                    <h4>Sumowanie ułamków liczb</h4>
+                    <hr>
+                    <obliczanie-comp dzialanie="a / b + c / e"></obliczanie-comp>
+                </li>
+                <br>
+                <li>
+                    <h4>Sumowanie, odejmowanie i dzielenie ze stałymi liczb</h4>
+                    <hr>
+                    <obliczanie-comp dzialanie="(a + 6) / (b - 4)"></obliczanie-comp>
+                </li>
+                <br>
+                <li>
+                    <h4>Parzystość liczb</h4>
+                    <hr>
+                    <label for="zad4-liczba">Liczba</label>
+                    <input id="zad4-liczba" type="number" value="2" oninput="zad4SprawdzParzystosc()">
+                    <hr>
+                    <h4 id="zad4-wynik">Parzysta</h4>
+                </li>
+                <br>
+                <li value="7">
+                    <h4>Klasyfikacja wieku</h4>
+                    <hr>
+                    <button onclick="document.getElementById('pornhub-nieaktywne').id='pornhub'">Otwórz klasyfikacje wieku</button>
+                </li>
+                <br>
+            </ol>
+        </main>
+        <footer-comp></footer-comp>
+
+        <div id="pornhub-nieaktywne">
+            <div id="pierwszy">
+                <div>
+                    <img src="/favicon.ico" width="150" height="42.5" alt="MaszToZadanieDomowe logo">
+                    <h3>To jest strona dla furasów</h3>
+                    <p>
+                        <p>
+                            <span>Ta strona zawiera treści nieodpowiednie dla normików, takie jak protogeny i liski. Wchodząc na tą strone, potwierdzasz że jesteś wystarczająco dojrzały żeby nie być anty-furry.</span>
+                        </p>
+                        <p>
+                            <span>Nie ma tutaj porno i nigdy go nie będzie! Furry porno to zło które sprowadza złą sławę fandomowi Furry.</span>
+                        </p>
+                    </p>
+                    <h4 id="zad7-wiek">Wiek: 10</h4>
+                    <input oninput="zad7Przesun()" id="zad7-slider" type="range" min="0" max="21" value="10">
+                    <button onclick="zad7Koniec()">Przejdź do strony</button>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>