Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OBIEKTOWY MODEL DOKUMENTU</title>

</head>

<body>
    <h2>Foo</h2>
    <div id="four">FOUR</div>
    <ul>
        <li>LI 1</li>
        <li>LI 2</li>
        <li>LI 3</li>
        <li>LI 4</li>
        <li>LI 5</li>
        <li>LI 6</li>
        <li>LI 7</li>
    </ul>
    <em>EM</em>
    <h2>Bar</h2>


    <script>
    // Utwórz element DIV o rozmiarach 100px / 100px. Jeżeli szerokość przeglądarki będzie większa od 500
    // kolor wypełnienia elementu DIV = „blue”. W Przeciwnym wypadku DIV=”green”.
    const exersise1 = () => {
        const div = document.createElement('div');
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = window.innerWidth > 500 ? 'blue' : 'green';
        document.body.appendChild(div);

    }
    const exersise2 = () => {
        // Wyszukaj elementu o ID=”four” i powiększ jego czcionkę o 50% oraz dodaj kolor czerwony.
        const element = document.getElementById('four');
        element.style.fontSize = '150%';
        element.style.color = 'red';

    }

    const exersise3 = () => {
        // Pobierz element H2 i umieść jego treść w elemencie o ID=”four”. Wykonaj to w taki sposób, żeby
        // zachować też wartość elementu ID=”four”.
        const element = document.getElementById('four');
        const h2 = document.querySelector('h2');
        element.innerHTML = h2.innerHTML + element.innerHTML;


    }
    const excersise4 = () => {
        // Wyszukaj treść elementu &lt;em&gt; i umieść treść w znaczniku H2, natomiast wartość ze znacznika H2
        // wstaw do elementu &lt;em&gt;. Oraz dodaj niebieski kolor do elementu H2.
        const element = document.querySelector('em');
        const h2 = document.querySelector('h2');

        const temp = element.innerHTML;
        element.innerHTML = h2.innerHTML;
        h2.innerHTML = temp;
        h2.style.color = 'blue';

    }
    const excersise5 = () => {
        // Do elementu H2 dodaj aktualną datę. W kolorze czerwonym oraz powiększoną o 30%. Natomiast
        // pierwszy element &lt;li&gt; wyświetla szerokość przeglądarki, drugi element &lt;li&gt; wysokość przeglądarki.
        const h2 = document.querySelector('h2');
        const today = new Date();
        h2.innerHTML += today.toLocaleDateString();
        h2.style.color = 'red';
        h2.style.fontSize = '130%';

        const li = document.querySelectorAll('li');
        li[0].innerHTML = window.innerWidth;
        li[1].innerHTML = window.innerHeight;


    }
    const excersise6 = () => {
        // Z 3 i 4 elementu &lt;li&gt; usuń znaki, które mają indeks większy od 5.
        const li = document.querySelectorAll('ul');
        for (let i = 0; i < li.length; i++) {
            if (i > 5) {
                li[i].innerHTML = '';
            }
        }
    }

    const excersise7 = () => {
        // Ustaw taką samą klasę dla 4 elementu &lt;Li&gt; jaką ma element 3 &lt;li&gt;
        const li = document.querySelectorAll('li');
        li[3].className = li[2].className;

    }
    const exersise9 = () => {
        // Skopiuj dwa razy taką samą listę na stronie za pomocą JS. Raz z zachowaniem formatki HTML drugi raz bez zachowania formatki HTML.
        const ul = document.querySelector('ul');
        const ul2 = ul.cloneNode(true);
        document.body.appendChild(ul2);
        const ul3 = document.createElement('ul');
        for (let i = 0; i < ul.children.length; i++) {
            const li = document.createElement('li');
            li.innerHTML = ul.children[i].innerHTML;
            ul3.appendChild(li);
        }
        document.body.appendChild(ul3);

    }
    // exersise9()
    // excersise5()
    // excersise4()
    // exersise3()
    // exersise2()
    // exersise1()


    </script>

</body>

</html>