API tools faq
paste
WPMarcelek

Mini projekt 3

WPMarcelek
Mar 31st, 2022
1,035
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.48 KB | None | 0 0
raw download clone embed print report
  1. <!--    Przewodnik po kodzie:-->
  2.  
  3. <!--        Wszystkie skrypty są opisane komentarzem przed, dla czytelności i ułatwienia Pani roboty ;)-->
  4.  
  5. <!--        Aby aktywować Easter Egg z nasłuchiwaniem klawiszy należy wpisać "sus" na klawiaturze (uwaga, dźwięk po alerice :p )-->
  6.  
  7. <!--        Nasłuchiwana jest również mysz nad napisem ford focus-->
  8.  
  9. <!--        Formularz po wypełnieniu na górze storny wyświetla powitanie z imieniem, w zależności od wyboru płci zmienia kolor strony, oraz wyświetla napis spersonalizowany do marki którą wybrał użytkownik-->
  10.  
  11. <!--        Jeżeli uzytkownik wybierze wiek poniżej 18 lat to zostanie przekierowany na google-->
  12. <!DOCTYPE html>
  13. <html lang="pl">
  14. <head>
  15.     <meta charset="UTF-8">
  16.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.     <title>SAMOCHODY</title>
  19. </head>
  20. <body>
  21. <style>
  22.     p {
  23.         font-weight: bold;
  24.     }
  25.  
  26.     .list {
  27.         list-style: disc;
  28.     }
  29.  
  30.     .coloreq {
  31.         color: magenta;
  32.     }
  33.  
  34.     #container {
  35.         display: none;
  36.     }
  37. </style>
  38. <div id="container">
  39.     <h2 id="welcome"></h2>
  40.     <h3 id="info"></h3>
  41.     <h1 id="title">SAMOCHODY</h1>
  42.     <p id="szybkie">Szybkie</p>
  43.     Mitsubishi<br>
  44.     <span id="mondeo">ford mondeo</span>
  45.  
  46.     <p id="wolne">Wolne</p>
  47.     Wszystko inne
  48.     <p id="ladne">Ładne</p>
  49.     Mitsubishi<br>
  50.     ford mondeo
  51.     <p id="brzydkie">Brzydkie</p>
  52.     Wszystko inne
  53.     <h3>Lista Mitsu</h3>
  54.     <ul>
  55.         <li class="list">Carisma</li>
  56.         <li class="list">Galant</li>
  57.         <li class="list">Colt</li>
  58.     </ul>
  59. </div>
  60. <form id="form" onsubmit="return false">
  61.     <p>Podaj swoje imie</p>
  62.     <input id="name" type="text" value="imie">
  63.     <p>Podaj swój wiek</p>
  64.     <input id="age" type="number" value="18">
  65.     <p>Wybierz ulubioną markę samochodu</p>
  66.     <select name="cars" id="cars">
  67.         <option value="Mitsubishi">Mitsubishi</option>
  68.         <option value="Volvo">Volvo</option>
  69.         <option value="Mercedes">Mercedes</option>
  70.         <option value="Honda">Honda</option>
  71.     </select>
  72.     <p>Jakiej płci jesteś</p>
  73.     <input type="radio" name="gender" value="male"> Mężczyzna
  74.     <input type="radio" name="gender" value="female"> Kobieta
  75.     <button onclick="wykonaj()">Prześlij</button>
  76.     <p id="error"></p>
  77. </form>
  78.  
  79.  
  80. <script>
  81.  
  82.     // 1
  83.     // Wyciąganie i console logi
  84.     var ladne = document.getElementById("ladne");
  85.     console.log(ladne);
  86.     var lista = document.getElementsByClassName("list");
  87.     console.log(lista);
  88.     var p = document.querySelector("p");
  89.     console.log(p);
  90.     var collListy = document.getElementsByTagName("ul");
  91.     console.log(collListy);
  92.     var nodeListy = document.querySelectorAll("li.list");
  93.     console.log(nodeListy);
  94.  
  95.     // Podmianka stylu
  96.     document.getElementById("szybkie").style.color = "red";
  97.     document.getElementById("szybkie").style.fontSize = "large";
  98.     document.getElementById("szybkie").style.fontFamily = "Georgia";
  99.  
  100.     // Podmianka teskstu
  101.     var el3 = document.querySelectorAll("li.list")[2];
  102.     el3.innerHTML = "Sigma";
  103.     var el2 = el3.previousSibling.previousSibling;
  104.     el2.innerHTML = "Lancer";
  105.  
  106.     // Podmianka HTMLa
  107.     document.getElementById("title").outerHTML = "<p id='title'><b>SAMOCHODY</b></p>";
  108.  
  109.     document.getElementById("title").classList.add("coloreq");
  110.  
  111.     // Dodanie nowych elementów listy
  112.     var newEl = document.createElement('li').appendChild(document.createTextNode('Galant'));
  113.     document.getElementsByTagName('ul')[0].appendChild(newEl);
  114.  
  115.     // Nasłuchiwanie myszy mouseover
  116.     var mondeo = document.getElementById("mondeo");
  117.  
  118.     mondeo.addEventListener("mouseover", function () {
  119.         document.body.style.backgroundImage = "url(https://halczynski.pl/ee/mondeo.jpg)";
  120.         var mondeoSfx = new Audio('https://halczynski.pl/ee/mondeo.mp3');
  121.         mondeoSfx.play();
  122.     }, false);
  123.  
  124.     // Nasłuchiwanie klawiszy
  125.     // lista zezwolonych klawiszy
  126.     var allowedKeys = {
  127.         83: 's',
  128.         85: 'u'
  129.     };
  130.     // Kod do wpisania
  131.     var susCode = ['s', 'u', 's'];
  132.  
  133.     var susCodePosition = 0;
  134.  
  135.     document.addEventListener('keydown', function (e) {
  136.         var key = allowedKeys[e.keyCode];
  137.         var requiredKey = susCode[susCodePosition];
  138.  
  139.         if (key == requiredKey) {
  140.  
  141.             susCodePosition++;
  142.  
  143.             if (susCodePosition == susCode.length) {
  144.                 activateSus();
  145.                 susCodePosition = 0;
  146.             }
  147.         } else {
  148.             susCodePosition = 0;
  149.         }
  150.     });
  151.  
  152.     // Funkcja wykonująca Easter Egg
  153.     function activateSus() {
  154.         document.body.style.backgroundImage = "url('https://c.tenor.com/FMcazChVawwAAAAC/among-us-among.gif') ";
  155.         document.body.style.backgroundRepeat = "no-repeat";
  156.         document.body.style.backgroundSize = "cover";
  157.         alert("big chungus among us");
  158.         var audio = new Audio('https://halczynski.pl/ee/dram.mp3');
  159.         audio.play();
  160.     }
  161.  
  162.     // Form
  163.  
  164.     function wykonaj() {
  165.         // Napis na początku
  166.         document.getElementById('welcome').innerHTML = "Witaj " + document.getElementById("name").value;
  167.  
  168.         // Zmiana tła w zależności od wybranej płci
  169.         var gender = document.getElementsByName('gender');
  170.         for (let i = 0; i < gender.length; i++) {
  171.            if (gender[i].checked) {
  172.                if (gender[i].value === "male")
  173.                    document.body.style.backgroundColor = "lightblue";
  174.                else
  175.                    document.body.style.backgroundColor = "pink";
  176.  
  177.            }
  178.        }
  179.        //Wybór marki auta
  180.  
  181.        var car = document.getElementById("cars").value;
  182.        if (car === "Mitsubishi") {
  183.            document.getElementById("info").innerHTML = "Widzę fan mitsu - dobry wybór :)"
  184.        } else {
  185.            document.getElementById("info").innerHTML = "Może to nie Mitsubishi, ale " + car + " też spoko :D";
  186.        }
  187.  
  188.        // Weryfikacja wieku
  189.        var age = document.getElementById("age");
  190.        if (age.value >= 18) {
  191.             alert("Gratulacje! Jesteś pełnoletni więc możesz widzieć tę stronę.");
  192.             document.getElementById("container").style.display = "block";
  193.             document.getElementById("form").style.display = "none";
  194.         } else {
  195.             window.location.replace("https://google.pl");
  196.         }
  197.  
  198.     }
  199.  
  200.  
  201. </script>
  202.  
  203. </body>
  204. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!