klienckie_mendela/Powt_01/zestawB.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zestaw B</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <section><hr><h3>Zadanie 1</h3>
        <script>
            function fiboDesc(n) {
                if (n < 1) {
                    return [];
                } else if (n == 1) {
                    return [0];
                }

                let t = [0, 1];

                while(t.length < n) {
                    let s = t[t.length - 1] + t[t.length - 2];
                    t.push(s);
                }

                return t.reverse();
            }

            document.write(fiboDesc(7));
        </script>
    </section>

    <section><hr><h3>Zadanie 2</h3>
        <div style="position: relative; box-sizing: content-box; width: 500px; height: 500px; background-color: lightgray; border: 2px solid black;">
            <script>
                function opusc(okrag) {
                    okrag.dataset.intervalID = setInterval(function () {
                        if(parseInt(okrag.style.top) < 500 - parseInt(okrag.style.height)) {
                            okrag.style.top = parseInt(okrag.style.top) + 1 + 'px';
                        } else {
                            clearInterval(okrag.dataset.intervalID);
                        }
                    }, 10);
                }
                
                function przestan(okrag) {
                    clearInterval(okrag.dataset.intervalID);
                }

                for(let i = 0 ; i < 10; i++) {
                    let wymiar = Math.floor(Math.random() * 21) + 10;
                    let left = Math.floor(Math.random() * 471);
                    let top = Math.floor(Math.random() * 471);

                    document.write(`
                        <div
                            style="width: ${wymiar}px; height: ${wymiar}px; position: absolute;
                            top: ${top}px; left: ${left}px; border: 1px solid black;
                            border-radius: 100%; cursor: pointer;"
                            onmouseover="opusc(this)" onmouseleave="przestan(this)"
                        >
                        </div>
                    `);
                }
            </script>
        </div>
    </section>

    <section><hr><h3 style="color: red;">Zadanie 3</h3>
        
    </section>

    <section><hr><h3>Zadanie 4</h3>
        <pre><script>
            function sentenceStats(txt) {
                let zdania_inne = 0;

                for(let i = 0; i < txt.length; i++) {
                    switch(txt[i]) {
                        case '!':
                            zdania_inne++;
                            break
                        case '?':
                            zdania_inne++;
                            break
                    }
                }

                let zdania_dlugie = 0
                let tablica_zdan = txt.split(/[.!?]/)
                
                if(tablica_zdan[tablica_zdan.length - 1] == '') {
                    tablica_zdan.pop();
                }

                tablica_zdan.forEach(zdanie => {
                    if(zdanie.trim().split(' ').length > 5) {
                        zdania_dlugie++;
                    }
                })

                return JSON.stringify({
                    "zdania": tablica_zdan.length,
                    "inne": zdania_inne,
                    "dlugie": zdania_dlugie
                }, null, 5)
            }

            document.write(sentenceStats("Ala ma kota. Ja też niby? Ok. Lorem ipsum dolor sit amet consecteur! Czy ty masz psa? To naprawdę świetne! Lorem ipsum dolor sit amet."))
        </script></pre>
    </section>

    <section><hr><h3>Zadanie 5</h3>
        <input type="number" name="val5" id="val5" value="1" min="1">
        <button id="start5">Start</button>
        <div
            id="odliczanie" style="border: 2px solid black; font-size: 2em; width: 12rem; height: 4rem; display: flex; justify-content: center; align-items: center;"
        >0</div>

        <script>
            let n = 0;

            document.getElementById("start5").onclick = function() {
                const div = document.getElementById("odliczanie")
                if(div.dataset.intervalID) { clearInterval(div.dataset.intervalID) }

                if(parseInt(document.getElementById("val5").value) > 0) {
                    n = parseInt(document.getElementById("val5").value);
                    
                    div.innerText = n;
                    n--;

                    div.dataset.intervalID = setInterval(function() {
                        if(n > 0) {
                            div.innerText = n;
                            n--;
                        } else {
                            div.innerText = n;
                            clearInterval(div.dataset.intervalID)
                        }
                    }, 1000);
                }
            }
        </script>
    </section>

    <section><hr><h3>Zadanie 6</h3>
        <input type="number" name="val6" id="val6" value="3" min="1" max="10"><button id="start6">Generuj</button>
        <div
            style="
                width: 500px;
                height: 500px;
                border: 2px solid black;
                box-sizing: content-box;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: white;
            "
            id="k0"
        ></div>

        <script>
            function kolor(kwadrat) {
                let kolory = ['red', 'limegreen', 'royalblue', 'orange', 'magenta']; 
                let k_index = Math.floor(Math.random() * kolory.length);
            
                kwadrat.style.backgroundColor = kolory[k_index];
            }
            function bialy(kwadrat) {
                kwadrat.style.backgroundColor = 'white';
            }

            document.getElementById("start6").onclick = function() {
                for(let i = 1; i <= parseInt(document.getElementById("val6").value); i++) {
                    let percent = Math.floor(Math.random() * 16) + 50;
                    
                    document.getElementById(`k${i-1}`).innerHTML = `
                        <div id="k${i}"
                            style="
                                width: ${percent}%;
                                height: ${percent}%;
                                border: 1px solid black;
                                box-sizing: content-box;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                background-color: white;
                                transition: background-color 150ms ease;
                            "
                        ></div>
                    `

                    document.getElementById(`k${i}`).addEventListener('mouseenter', function () {
                        kolor(document.getElementById(`k${i}`))
                        bialy(document.getElementById(`k${i - 1}`))
                    });
                    document.getElementById(`k${i}`).addEventListener('mouseleave', function () {
                        bialy(document.getElementById(`k${i}`));
                        if(i > 1) {
                            kolor(document.getElementById(`k${i - 1}`))
                        }
                    });
                }
            }
        </script>
    </section>
</body>
</html>