klienckie_mendela/Powt_01/index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Powtórzenie 1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin: 1em;
        }
    </style>
</head>
<body>
    <section>
        <h2>Zadanie A</h2>
        <div class="box">

        </div>
        <div class="box">

        </div>
        <div class="box">

        </div>

        <script>
            const divy = document.getElementsByClassName('box')

            for(div of divy) {
                div.onclick = function () {
                    if(this.dataset.changed != 'true') {
                        let r = Math.floor(Math.random() * 256);
                        let g = Math.floor(Math.random() * 256);
                        let b = Math.floor(Math.random() * 256);

                        this.dataset.changed = "true";
                        this.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
                    }
                }

                div.ondblclick = function () {
                    this.dataset.changed = "false";
                    this.style.backgroundColor = "gray";
                }
            }
        </script>
    </section>

    <section>
        <hr>
        <h2>Zadanie B</h2>
        
        <div style="width: 100px; height: 100px; background-color: yellow;" id="kwadrat"></div>

        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <input type="checkbox" name="nieskonczonosc" id="nieskonczonosc">
        <input type="number" name="kat" id="kat" value="15">

        <script>
            let interwal = false
            let obrot;
            let obrot_deg = 0

            document.getElementById("start").onclick = function () {
                if (!interwal) {
                    obrot_deg = 0;
                    interwal = true;

                    obrot = setInterval(function() {
                        obrot_deg += parseFloat(document.getElementById("kat").value)

                        if(!document.getElementById("nieskonczonosc").checked) {
                            if(obrot_deg > 360) {
                                clearInterval(obrot);
                                interwal = false;
                                obrot_deg = 360;
                            }
                        }

                        document.getElementById("kwadrat").style.rotate = obrot_deg + 'deg';
                    }, 50);
                }
            }
            document.getElementById("stop").onclick = function () {
                clearInterval(obrot)
                obrot_deg = 0
                interwal = false
            }
        </script>
    </section>

    <section>
        <hr>
        <h3>Zadanie C</h3>
        <p id="tekststats">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non corrupti facilis aspernatur eveniet ratione, consequuntur iure! Iure debitis quas reprehenderit odit qui ipsum sapiente eum, officiis veniam placeat tempora?</p>

        <script>
            function text_stats(txt) {
                let z_duzej = 0;
                let slowa = txt.split(" ");

                slowa.forEach(slowo => {
                    if(slowo[0] == slowo[0].toUpperCase()) {
                        z_duzej++;
                    }
                })

                return({ slowa: slowa.length, z_duzej })
            }

            const stats = text_stats(document.getElementById("tekststats").innerText)
            document.write(`Słów: ${stats.slowa}, z dużej litery: ${stats.z_duzej}`);
        </script>
    </section>

    <section>
        <hr>
        <h3>Zadanie D</h3>

        <pre><script>
            function compare(a, b, c) {
                console.log(`Największa: ${Math.max(a, b, c)}, Najmniejsza: ${Math.min(a, b, c)}`)
                
                if (a == b | a == c || b == c) {
                    return 'Są liczby równe'
                }
                return `Średnia: ${(a + b + c) / 3}`
            }

            document.write(compare(1, 2, 3) + '<br>')

            document.write(compare(1, 1, 3))
        </script></pre>
    </section>

    <section>
        <hr>
        <h3>Zadanie E</h3>

        <input type="number" name="n" id="n" value="1">
        <button id="generuj">Generuj</button>

        <div id="plansza" style="position: relative; width: 500px; height: 500px; border: 1px solid black;">
            <script>
                function usun(id) {
                    document.getElementById("plansza").removeChild(document.getElementById(`b${id}`))
                }
                document.getElementById('generuj').onclick = function() {
                    for(let i = 0; i < parseInt(document.getElementById('n').value); i++) {
                        let wymiar = Math.floor(Math.random() * 91) + 10;

                        let polozenie_lewy = Math.floor(Math.random() * 501);
                        let polozenie_gora = Math.floor(Math.random() * 501);

                        document.getElementById('plansza').innerHTML += `<div id="b${i}" style="border: 1px solid black; position: absolute; width: ${wymiar}px; height: ${wymiar}px; top: ${polozenie_gora}px; left: ${polozenie_lewy}px;" onclick="usun(${i})"></div>`;
                    }
                }
            </script>
        </div>
    </section>

    <section>
        <hr>
        <h3>Pentacci</h3>
        <pre><script>
            function pent(n) {
                if (n < 1) {
                    return [];
                }
                if (n == 1) {
                    return [0];
                }

                let t = [0, 1]
                let u = 2;

                while(u < n) {
                    let s = 0;
                    for(let i = 0; i < t.length; i++) {
                        if(i == 0) {
                            if(t.length > 5) {
                                i = t.length - 5;
                            }
                        }

                        s += t[i]
                    }
                    t.push(s);
                    u++;
                }

                return t;
            }
            
            document.write(pent(12));
        </script></pre>
    </section>
</body>
</html>