Untitled

<html>
<head>
    <meta charset="utf-8">
    <title>Home</title>
</head>
<body>
<style>
    .cool {
        color: blue;
    }
    .hot {
        color: red;
    }
</style>
<p>Zadania z myszki</p>
<p id="ex"></p>
<ol id="ex3"></ol>
<button onclick="ex1()" ondblclick="ex2()">Wyświetl imie</button>
<button onclick="ex3()">ex 3</button>
<button onmouseover="ex4()" onmouseout="ex4_1()">ex 4</button>

<button onclick="add()">+</button>
<button onclick="sub()">-</button>
<button onclick="multiply()">*</button>
<button onclick="divide()">/</button>

<h1>Wynik</h1>
<p id="wynik"></p>


<button onmouseover="hot()" onmouseout="cool()">CLASS</button>

<button onclick="ex7()">ex 7</button>
<ol id="ex7">
</ol>

<ol>
    <li> foobar
        <button onclick="ex10(this)">X</button>
    </li>
    <li>
        barbuz
        <button onclick="ex10(this)">X</button>
    </li>
</ol>

<!--aaa-->
<script>
    // Utwórz skrypt, który po kliknięciu na tekst „Wyświetl dane” na stronie wyświetli Twoje imię i nazwisko.
    const ex1 = () => {
        const name = "Jakub"
        const ex = document.getElementById("ex")
        ex.innerHTML = name
    }

    // Do poprzedniego zadania dodaj możliwość usuwania Twojego nazwiska po dwukrotnym kliknięciu na
    // tekst „Wyświetl dane”. dane

    const ex2 = () => {
        const ex = document.getElementById("ex")
        ex.innerHTML = ""
    }

    const ex3 = () => {
        // Utwórz skrypt do dodawania danych i tworzenia listy. Po kliknięciu na przycisk dodaj uruchamia się
        // okienko prompt i wprowadzamy dane , które są zapisywane do listy &lt;li&gt;. (Tworzenie elementów z
        // poprzednich zajęc).
        const text = document.createTextNode("hello world!");
        orderedList = document.getElementById("ex3")
        listElement = document.createElement("li");
        listElement.appendChild(text)

    }

    const ex4 = () => {
        // Do poprzednich zadań dodaj przycisk, który po najechaniu powiększa dane na 50px oraz po
        // opuszczeniu przez znacznik myszy przycisku tekst wraca do rozmiarów 12px.
        document.body.style.fontSize="50px"

    }
    const ex4_1 = () => {
        document.body.style.fontSize="12px"
    }

    // Dodaj 4 przyciski, które po kliknięciu wywołają okienko dialogowe prompt do którego wprowadzisz
    // dwie liczby A i B, a następnie zostaną wykonane obliczenia zgodne z nazwą przycisku. Przykład
    // poniżej. Słowo WYNIK jest wyświetlane w znaczniku H1, natomiast liczba wynikowa w akapicie

    const add = () => {
        const a = prompt("Podaj a")
        const b = prompt("Podaj b")
        const wynik = a + b
        const h1 = document.getElementById("wynik")
        h1.innerHTML = wynik
    }
    const sub = () => {
        const a = prompt("Podaj a")
        const b = prompt("Podaj b")
        const wynik = a - b
        const h1 = document.getElementById("wynik")
        h1.innerHTML = wynik
    }
    const multiply = () => {
        const a = prompt("Podaj a")
        const b = prompt("Podaj b")
        const wynik = a * b
        const h1 = document.getElementById("wynik")
        h1.innerHTML = wynik
    }

    const divide = () => {
        const a = prompt("Podaj a")
        const b = prompt("Podaj b")
        const wynik = a / b
        const h1 = document.getElementById("wynik")
        h1.innerHTML = wynik
    }

    // Dodaj przycisk, który będzie dodawał klasę i usuwał do wyświetlonych danych. Klasa COOL i HOT.
    //     Dodawał klasę po przytrzymaniu na przycisku i usuwał po puszczeniu przycisku myszy.

    const hot = () => {
        document.body.setAttribute("class","hot")
    }
    const cool = () => {
        document.body.setAttribute("class","cool")

    }

    // Utwórz 4 elementową listę &lt;li&gt;. Po kliknięciu na wybrany element powinno się wyświetlić okienko
    // prompt do wprowadzania zmiany danych tylko w tym elemencie.
    const ex7 = () => {
        const ele = document.getElementById("ex");
        const items = ele.getElementsByTagName("li");

        for (let i = 1; i <= 4; i++) {
            const text = prompt("value?")
            const listItem = document.createElement("li");
            listItem.textContent = text;
            ele.appendChild(listItem);
        }

    }

    // Do elementów &lt;li&gt; dodaj przyciski. Po kliknieciu na dany przycisk elememty są usuwane.

    const ex10 = (ele) => {
        ele = ele.parentNode;
        ele.remove()
    }

    // Zadanie 12.
    // Utwórz skrypt dzięki, któremu będziesz mógł wyczyścić dane w wybranym elemencie. Do okienka
    // prompt podajemy numer indeksu listy.

    const ex12 = () => {
        const index = prompt("index?")
        const ele = document.getElementById("ex");
        const items = ele.getElementsByTagName("li");
        items[index].remove()
    }


</script>
</body>
</html>