PiotrJurek

Mini projekt JS

Apr 7th, 2021
385
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Samochody</title>
  8.     <style>
  9.     body
  10.     {
  11.         background-color: rgb(44, 44, 44);
  12.         color: white;
  13.         margin: 0;
  14.         font-family: Verdana, Helvetica, Arial;
  15.         overflow-x: hidden;
  16.         text-align: center;
  17.     }
  18.  
  19.     header
  20.     {
  21.         width: 100vw;
  22.         height: 3em;
  23.         border-bottom: 2px solid white;
  24.         padding-left: 15vw;
  25.         padding-right: 15vw;
  26.         box-sizing: border-box;
  27.         float: left;
  28.     }
  29.  
  30.     .menu
  31.     {
  32.         width: 25%;
  33.         height: 100%;
  34.         border-left: 2px solid white;
  35.         float: left;
  36.         box-sizing: border-box;
  37.         padding-top: 0.5em;
  38.     }
  39.  
  40.     #menu3
  41.     {
  42.         border-right: 2px solid white;
  43.         box-sizing: border-box;
  44.     }
  45.  
  46.     #top
  47.     {
  48.         width: 100vw;
  49.         height: 100vh;
  50.         border-bottom: 2px solid white;
  51.         box-sizing: border-box;
  52.         background-image: url("https://newsroom.bugatti/models/images/la-voiture-noire_7f373db8550d3df0dcfa1b41bf6e1192/02_lvn_sketches/04_lvn_sketch-side.jpg");
  53.         background-position: center;
  54.         background-repeat: no-repeat;
  55.         background-size: cover;
  56.         float: left;
  57.     }
  58.  
  59.     section
  60.     {
  61.         width: 100vw;
  62.         min-height: 50vh;
  63.         border-bottom: 2px solid white;
  64.         box-sizing: border-box;
  65.         padding-top: 2%;
  66.         padding-bottom: 2%;
  67.         padding-left: 2%;
  68.         padding-right: 2%;
  69.         float: left;
  70.     }
  71.  
  72.     footer
  73.     {
  74.         width: 100vw;
  75.         height: 3em;
  76.         float: left;
  77.     }
  78.  
  79.     .list
  80.     {
  81.         color: grey;
  82.     }
  83.  
  84.     #text
  85.     {
  86.         height: 10em;
  87.         width: 50%;
  88.     }
  89.     </style>
  90. </head>
  91. <body>
  92.     <header>
  93.         <div class="menu" id="menu0">Start</div>
  94.         <div class="menu" id="menu1">Historia</div>
  95.         <div class="menu" id="menu2">Marki</div>
  96.         <div class="menu" id="menu3">Formularz</div>
  97.     </header>
  98.     <main>
  99.         <div id="top">
  100.             <h1 id="title">Strona o samochodach</h1>
  101.         </div>
  102.         <section id="history">
  103.             <h3>Historia samochodów</h3>
  104.             <p>Nad pojazdami napędzanymi parą myślano już w XVII wieku. W 1678 roku Ferdinand Verbiest miał zademonstrować taki pojazd cesarzowi chińskiemu, jednak nie ma na to żadnych dowodów. Dlatego za pierwszego konstruktora – wynalazcę pojazdu mechanicznego – uznaje się Francuza o nazwisku Nicolas-Joseph Cugnot, który zaprezentował swoje pionierskie dzieło napędzane silnikiem parowym w roku 1769.</br>
  105.             W 1870 roku Austriak Siegfried Marcus skonstruował, nienadający się do powszechnego użytku, prototyp pojazdu mechanicznego z benzynowym silnikiem o zapłonie iskrowym. Z kolei inny konstruktor, Niemiec Carl Benz, zbudował swój trzykołowy automobil w roku 1885 (w 1886 uzyskał patent). W tych samych latach prace w dziedzinie silników spalinowych oraz pojazdów napędzanych takimi silnikami prowadzili wspólnie Wilhelm Maybach i Gottlieb Daimler. Nie wiadomo jednak dokładnie, kto, jako pierwszy, skonstruował zastosowany do napędu samochodów silnik o spalaniu wewnętrznym.</p>
  106.         </section>
  107.         <section id="brands">
  108.             <h3>Przykładowe marki samochodów:</h3>
  109.             <ul>
  110.                 <li>Mercedes-Ben</li>
  111.                 <li id="li2">Toyota</li>
  112.                 <li id="li3">Volkswagen</li>
  113.                 <li>BMW</li>
  114.                 <li>Porsche</li>
  115.                 <li>Honda</li>
  116.                 <li>Ford</li>
  117.                 <li>Nissan</li>
  118.                 <li>Audi</li>
  119.                 <li>Volvo</li>
  120.             </ul>
  121.         </section>
  122.         <section id="form">
  123.             <h4 id="formtext">Prosimy nie wysyłać emaily ze skargami na poziom wykonania tej strony, ale jeśli już musisz to tu masz prawie działający formularz:</h4>
  124.             <form>
  125.                 <label for="email">Adres email:</label></br>
  126.                 <input type="text" id="email" name="email"></br>
  127.                 <label for="text">Treść emaila:</label></br>
  128.                 <textarea id="text" name="text"></textarea>
  129.                 <p id="checktext">Co według ciebie należy poprawić na stronie:</p>
  130.                 <input type="checkbox" id="check0" name="Wydajność">
  131.                 <label for="Wydajność">Wydajność</label></br>
  132.                 <input type="checkbox" id="check1" name="Wygląd">
  133.                 <label for="Wygląd">Wygląd</label></br>
  134.                 <input type="checkbox" id="check2" name="Zawartość">
  135.                 <label for="Zawartość">Zawartość</label></br>
  136.                 <input type="button" value="Wyślij" id="button">
  137.             </form>
  138.         </section>
  139.  
  140.     </main>
  141.     <footer>
  142.         <p>To jest zbędna stopka informująca, że na tej stronie nie ma ciasteczek.</p>
  143.     </footer>
  144. </body>
  145. <script type="text/javascript">
  146.  
  147.     /*Wypisanie w konsoli*/
  148.     console.log(document.getElementById("menu1"));
  149.     console.log(document.querySelector("li"));
  150.     console.log(document.getElementsByClassName("menu"));
  151.     console.log(document.getElementsByTagName("li"));
  152.     console.log(document.querySelectorAll("div.menu"));
  153.  
  154.     /*Zmiana stylu*/
  155.     document.getElementById("title").style.fontSize = "3em";
  156.  
  157.     /*Zmiana tekstu w liście*/
  158.     document.getElementById("li2").innerHTML = "Volkswagen";
  159.     document.getElementById("li3").innerHTML = "Toyota";
  160.  
  161.     /*Zmiana kodu w nagłówku nad listą*/
  162.     document.querySelectorAll("h3")[1].outerHTML = "<p>Przykładowe marki samochodów:</p>";
  163.  
  164.     /*Dodanie klasy*/
  165.     let ul = document.querySelector("ul");
  166.     ul.classList.add("list");
  167.  
  168.     /*Dodanie elementu do listy*/
  169.     ul.appendChild(document.createElement('li'));
  170.     ul.lastChild.appendChild(document.createTextNode('Fiat'));
  171.  
  172.     /*Nasłuchiwanie kliknięć myszy by menu działało*/
  173.     let menu = [];
  174.     menu[0] = document.getElementById("menu0");
  175.     menu[1] = document.getElementById("menu1");
  176.     menu[2] = document.getElementById("menu2");
  177.     menu[3] = document.getElementById("menu3");
  178.  
  179.     let scr = [];
  180.     scr[0] = document.getElementById("top");
  181.     scr[1] = document.getElementById("history");
  182.     scr[2] = document.getElementById("brands");
  183.     scr[3] = document.getElementById("form");
  184.  
  185.     for(let i = 0; i<=3; i++)
  186.    {
  187.        menu[i].addEventListener("click", function(){scr[i].scrollIntoView();});
  188.    }
  189.  
  190.    /*Skrypt do checkboxów*/
  191.    let check = [];
  192.    check[0] = document.getElementById("check0");
  193.    check[1] = document.getElementById("check1");
  194.    check[2] = document.getElementById("check2");
  195.  
  196.    function changeCheck()
  197.    {
  198.        let bool = true;
  199.  
  200.        for(let i = 0 ; i<=2; i++)
  201.        {
  202.            if(!(check[i].checked))
  203.            {
  204.                bool = false;
  205.            }
  206.        }
  207.  
  208.        if(bool === true)
  209.        {
  210.            check[Math.floor(Math.random() * 3)].checked = false;
  211.            document.getElementById("checktext").innerHTML = "No chyba nie chciałeś prosić byśmy zrobili na tej stronie wszystko XD";
  212.        }
  213.    }
  214.  
  215.    for(let i = 0; i<=2; i++)
  216.    {
  217.        check[i].addEventListener("click", changeCheck);
  218.    }
  219.  
  220.    /*Skrypt do buttona*/
  221.    button = document.getElementById("button");
  222.  
  223.    function nope()
  224.    {
  225.        button.style.position = "fixed";
  226.        button.value = "Nope";
  227.        let y = Math.floor(Math.random() * 90).toString()+"vh";
  228.        let x = Math.floor(Math.random() * 90).toString()+"vw";
  229.        button.style.bottom = y;
  230.        button.style.right = x;
  231.    }
  232.  
  233.    button.addEventListener("click", nope);
  234.  
  235.    /*Skrypt do text inputa + nasłuchiwanie aktywności*/
  236.    email = document.getElementById("email");
  237.  
  238.    function thx()
  239.    {
  240.        if(email.value != "")
  241.        {
  242.            email.outerHTML = "<p>DZIĘKUJEMY ZA DOPISANIE SIĘ DO NASZEGO NEWSLETTERA!</p>";
  243.         }
  244.     }
  245.  
  246.     email.addEventListener("blur", thx);
  247.  
  248.     /*Skrypt do textarea + nasłuchiwanie aktywności + nasłuchiwanie klawiatury*/
  249.     text = document.getElementById("text");
  250.  
  251.     let int = 0;
  252.     function message()
  253.     {
  254.         text.value = text.value.substring(0, text.value.length - 1);
  255.         switch(int%4)
  256.         {
  257.             case 0:
  258.                 text.value += "b";
  259.             break;
  260.             case 1:
  261.                 text.value += "l";
  262.             break;
  263.             case 2:
  264.                 text.value += "a";
  265.             break;
  266.             case 3:
  267.                 text.value += " ";
  268.             break;
  269.         }
  270.         int++;
  271.     }
  272.  
  273.     text.addEventListener("focus", function(){text.addEventListener("keydown", message)});
  274.     text.addEventListener("blur", function(){text.removeEventListener("keydown", message)});
  275.    
  276. </script>
  277. </html>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×