Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement