Untitled

<html>
<head>
    <meta charset="UTF-8">


</head>
<body>
<!--Utwórz formularz do wprowadzania danych tekstowych. Za pomocą formularza wprowadzamy IMIE, NAZWISKO i-->
<!--MIEJSCOWOSC. Dane są wyświetlane w postaci (bez różnicy jakiej wielkości litery wpiszemy do formularza:-->
<div>
    <input type="text" name="imie" placeholder="Imię">
    <input type="text" name="nazwisko" placeholder="Nazwisko">
    <input type="text" name="miejscowosc" placeholder="Miejscowość">
    <input type="submit" value="Wyślij" onclick="ex1()">
</div>
<div>
    <input type="number" placeholder="podaj ilość metrów">
    <button onclick="ex2()">Wyślij</button>
    <p id="malowanie"></p>
    <p id="ukladaniePlytek"></p>
    <p id="gipsowanieScian"></p>
</div>
<p id="ex1"></p>

<div>
    <input type="text" id="email">
    <button onclick="ex3()">Wyślij</button>
    <p id="ex3"></p>
</div>

<div>
    <input type="text" id="pesel">
    <button onclick="ex4()">Wyślij</button>
    <p id="ex4"></p>
</div>

<div>
    <input type="range" id="powierchnia" min="0" max="100">
    <input type="range" id="cena" min="0" max="100">

    <div>
        <button onclick="ex5(2)">Pasywny</button>
        <button onclick="ex5(1)">Energooszczedy+</button>
        <button onclick="ex5(3)">Energooszczedy</button>
    </div>

    <p id="ex5"></p>
</div>

<script>
    const ex1 = () => {
        const imie = document.querySelector('input[name="imie"]').value;
        const nazwisko = document.querySelector('input[name="nazwisko"]').value;
        const miejscowosc = document.querySelector('input[name="miejscowosc"]').value;
        const element = document.getElementById('ex1');
        element.innerHTML = imie + ' ' + nazwisko + ' ' + miejscowosc;
    }

    const ex2 = () => {
        // Utwórz skrypt, który policzy koszt usługi. Z formularza rozwijanego wybierasz rodzaj usługi i wpisujesz liczbę m2 (metrów
        // kwadratowych). Skrypt powinien wyliczyć cenę.
        //     Malowanie = 500zł/m2
        // Układanie płytek = 600zł/m2
        // Gipsowanie ścian = 300zł/m2
        const number = document.querySelector('input[type="number"]').value;

        const malowanie = document.getElementById('malowanie');
        const ukladaniePlytek = document.getElementById('ukladaniePlytek');
        const gipsowanieScian = document.getElementById('gipsowanieScian');

        malowanie.innerHTML = number * 500;
        ukladaniePlytek.innerHTML = number * 600;
        gipsowanieScian.innerHTML = number * 300;

    }

    const ex3 = () => {
        // Zabezpiecz formularz, który sprawdzi czy został wprowadzony prawidłowo adres email. Jeżeli został wpisany prawidłowy
        // adres – wyświetla się on na stronie. W przeciwnym wypadku stosowny komunikat. (sprawdzamy czy w ciągu znaków
        // istnieje „@”).
        const email = document.getElementById('email').value;
        const element = document.getElementById('ex1');

        if (email.includes('@')) {
            element.innerHTML = email;
        } else {
            element.innerHTML = 'Nieprawidłowy adres email';
        }

    }
    const ex4 = () => {
        // Dodaj formularz do wpisywania numeru PESEL. Skrypt powinien pobrać pesel i wyświetlić datę urodzenia np. 98012215611
        // - wynik = 98-01-22. Formularz posiada, także zabezpieczenie jeżeli wpiszemy PESEL o mniejszej długości niż 11 znaków to
        // wyświetla się komunikat błędny PESEL.
        const pesel = document.getElementById('pesel').value;
        const element = document.getElementById('ex4');

        if (pesel.length === 11) {
            const year = pesel.substring(0, 2);
            const month = pesel.substring(2, 4);
            const day = pesel.substring(4, 6);
            element.innerHTML = year + '-' + month + '-' + day;
        } else {
            element.innerHTML = 'Błędny PESEL';
        }

    }

    const ex5 = (klasa) => {
        // W zadania podstawiamy własne dane. Wynik to pomnożone wartości:
        //     Powierzchnia użytkowa domu*Cena prądu*klasa energetyczna budynku(przyciski). Projekt nie musi być identyczny jak na
        // przykładzie.
        const powierzchnia = document.getElementById('powierchnia').value;
        const cena = document.getElementById('cena').value;
        const element = document.getElementById('ex5');
        const result = powierzchnia * cena * klasa;
        element.innerHTML = result;
    }

</script>

</body>
</html>