KonradKonieczny

Mini projekt 4BCZW

Apr 7th, 2021 (edited)
170
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.  
  7.     <title>Draw my car</title>
  8.    
  9.     <meta name="description" content="Flying cars" >
  10.     <meta name="keywords" content="When the flying cars will be created? I don't know either.">
  11.     <link rel="preconnect" href="https://fonts.gstatic.com">
  12.     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
  13.    
  14.     <style>
  15.         body
  16.         {
  17.             font-family: 'Lato', sans-serif;
  18.             margin: 0;
  19.             padding: 0;
  20.             color: #fff;
  21.             background-color: #000;
  22.             user-select: none;
  23.         }
  24.  
  25.         #spam
  26.         {
  27.             width: 810px;
  28.             text-align: center;
  29.             margin-left: auto;
  30.             margin-right: auto;
  31.         }
  32.         #spam > img
  33.         {
  34.             width: 810px;
  35.             height: 457px;
  36.         }
  37.  
  38.         ul
  39.         {
  40.             list-style-type: none;
  41.         }
  42.  
  43.         #form, #middle
  44.         {
  45.             text-align: center;
  46.         }
  47.  
  48.         .added_class
  49.         {
  50.             font-style: italic;
  51.         }
  52.  
  53.         input, textarea, button
  54.         {
  55.             background-color: black;
  56.             color: white;
  57.         }
  58.  
  59.         p
  60.         {
  61.             text-align: center;
  62.         }
  63.  
  64.         #info
  65.         {
  66.             font-weight: bold;
  67.             font-style: italic;
  68.             margin-top: 100px;
  69.             font-size: 30px;
  70.         }
  71.  
  72.     </style>
  73. </head>
  74.  
  75. <body>
  76.     <div id="spam">
  77.         <h2 id="header2">Paint my car</h2>
  78.         <p>Cars are one of the first things most people learn how to draw. Build on these basic skills to create a realistic car that's as detailed and customized as you like. You can work from a reference photo, find inspiration from a car you see on the street, or imagine one you'd like to draw! </p>
  79.         <p>To take a break from realism, play around by drawing a cartoon car. Exaggerate the features and keep the shapes simple for a fun car that you can draw in no time.</p>
  80.         <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f866c28a-eaf0-42cf-8689-5b4c1742f10b/d4dxvg2-4b697387-e839-4df8-91c8-ae198ed2ecc5.png/v1/fill/w_800,h_532,strp/futuristic_race_car_by_dado0016_d4dxvg2-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD01MzIiLCJwYXRoIjoiXC9mXC9mODY2YzI4YS1lYWYwLTQyY2YtODY4OS01YjRjMTc0MmYxMGJcL2Q0ZHh2ZzItNGI2OTczODctZTgzOS00ZGY4LTkxYzgtYWUxOThlZDJlY2M1LnBuZyIsIndpZHRoIjoiPD04MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.u7N0SrpQGCTUN0k5_EzPa_kf-RadLxbFEwqXmQOwfds">
  81.     </div>
  82.  
  83.     <div id="middle">
  84.         <h4>Header of the list</h4>
  85.         <ul>
  86.             <li class="leaf">li 1</li>
  87.             <li class="leaf">li 2</li>
  88.             <li class="lis">li 3</li>
  89.             <li class="lis">li 4</li>
  90.         </ul>
  91.     </div>
  92.  
  93.     <div id="form">
  94.     <form>
  95.         <input type="text>" placeholder="E-mail" id="email"> <br>
  96.         <textarea placeholder="Write your spam here."></textarea> <br>
  97.         <button>Click me!</button> <br>
  98.         <input type="checkbox" id="checkbox1">
  99.         <label for="checkbox1">Turn on background change by clicking</label> <br>
  100.     </form>
  101.     </div>
  102.    
  103.     <p id="kolor">Kolor: #000000</p>
  104.     <p id="info">(naciśnij dowolny klawisz by przywrócić do koloru podstawowego)</p>
  105.  
  106. </body>
  107.  
  108. <script type="text/javascript">
  109.         document.addEventListener("DOMContentLoaded", () =>
  110.         {
  111.             //zaczepianie obiektow
  112.             let header2 = document.getElementById("header2");
  113.             let header4 = document.querySelector("h4");
  114.             let leaves = document.getElementsByClassName("leaf");
  115.             let lis = document.getElementsByTagName("li");
  116.             let lisy = document.querySelectorAll("li.lis");
  117.  
  118.             //wypisywanie brzydkich kolekcji
  119.             console.log(header2);
  120.             console.log(header4);
  121.             console.log(leaves);
  122.             console.log(lis);
  123.             console.log(lisy);
  124.  
  125.  
  126.             //kosmetyczne zmiany i zawartosciowe
  127.             header2.style.color="#666";
  128.             lis[1].innerText = "zmieniono mnie w 2 elemencie listy";
  129.             lis[2].innerText = "zmieniono mnie w 3 elemencie listy";
  130.             header4.outerHTML = "<p><b>Header of the list</b></p>";
  131.  
  132.             //masowe dodawanie klasy do li
  133.             if (lis.length>0)
  134.             {
  135.                 for (let li of lis)
  136.                 {
  137.                     li.classList.add("added_class");
  138.                 }
  139.             }
  140.            
  141.             //robienie, to znaczy dodawanie nowych dzieci
  142.             let newChild = document.createElement("li");
  143.             let text_nC = document.createTextNode("Jestem nowym dzieckiem");
  144.             newChild.appendChild(text_nC);
  145.             let position = document.querySelector("ul");
  146.             position.appendChild(newChild);
  147.  
  148.             let kolor = document.getElementById("kolor");
  149.  
  150.             //generuje liczbe od 0..255 a potem zamienia na zapis hex oczywiscie w typ string
  151.             function generateHexColor()
  152.             {
  153.                 let R = (Math.floor(Math.random() * 256)).toString(16);
  154.                 let G = (Math.floor(Math.random() * 256)).toString(16);
  155.                 let B = (Math.floor(Math.random() * 256)).toString(16);
  156.                 let RGB = "#" + R + G + B;
  157.                 return RGB;
  158.             }
  159.  
  160.             //pomyslalem zeby rozbic je na 2 funkcje, by ta dostawala jako argument dowolny kolor, by podac sztywno lub generowany losowy
  161.             function changeBackground(color)
  162.             {
  163.             //console.log("dupa");
  164.                 document.body.style.transition = "all 0.75s";
  165.                 document.body.style.background = color;
  166.                 if(color!="#000000")
  167.                 {
  168.                     kolor.innerHTML = "Kolor: " + color;
  169.                 }
  170.                 else
  171.                 {
  172.                     kolor.innerHTML = "Kolor: #000000";
  173.                 }
  174.             }
  175.            
  176.             //najbardziej kreatywna i oczowalaca funkcja
  177.             //window.addEventListener("click", () =>{changeBackground(generateHexColor()) });
  178.             //window.addEventListener("keydown", function() {changeBackground("#000000")} );
  179.  
  180.             //kreatywna nazwa funkcji zmieniajaca na black mode
  181.             function toBlack()
  182.             {
  183.                 email.style.background = "#000";
  184.                 email.style.color = "#FFF";
  185.                 textarea.style.background = "#000";
  186.                 textarea.style.color = "#FFF";
  187.                 button.style.background = "#000";
  188.                 button.style.color = "#FFF"
  189.             }
  190.  
  191.             //kreatywna nazwa funkcji zmieniajaca na light mode
  192.             function toWhite()
  193.             {
  194.                 email.style.background = "#FFF";
  195.                 email.style.color = "#000";
  196.                 textarea.style.background = "#FFF";
  197.                 textarea.style.color = "#000";
  198.                 button.style.background = "#FFF";
  199.                 button.style.color = "#000"
  200.             }
  201.  
  202.             //rozpoczecie bawienie sie formularzami
  203.             let email =  document.querySelector("input");
  204.             let textarea = document.querySelector("textarea");
  205.             let button = document.querySelector("button");
  206.  
  207.             //bez wybrania = bedzie dark mode
  208.             email.addEventListener("blur", toBlack);
  209.             textarea.addEventListener("blur", toBlack);
  210.  
  211.             //z wybraniem = bedzie light mode
  212.             email.addEventListener("focus", toWhite);
  213.             textarea.addEventListener("focus", toWhite);
  214.  
  215.             //wyłaczenie przycisku
  216.             document.querySelector("button").disabled = true; //1 z 4 na 6
  217.  
  218.             //po odznaczeniu usuwa wpisana zawartosc oraz pokazuje placeholdera ze to wybral
  219.             textarea.addEventListener("blur", function() {this.value = ""; this.placeholder="Kliknąłeś tu.";}) //2 z 4 na 6
  220.             //po odznaczeniu usuwa wpisana zawartosc oraz pokazuje placeholdera ze to wybral
  221.             email.addEventListener("blur", function() {this.value = ""; this.placeholder="Kliknąłeś tu.";}) //2 z 4 na 6
  222.  
  223.             //rozpoczecie zabawy z glupim checkboxem i jego etykieta
  224.             let checkbox = document.getElementById("checkbox1"); //3 i 4 z 4 na 6
  225.             let label = document.querySelector("label"); //3 i 4 z 4 na 6
  226.  
  227.             //najprostsza funkcja, bo ta na dole nie dziala
  228.             //pokazuje czy checkbox zostal wcisniety badz nie
  229.             function isChecked()
  230.             {
  231.                 if(checkbox.checked)
  232.                 {
  233.                     label.innerHTML=checkbox.checked;
  234.                 }
  235.                 else
  236.                 {
  237.                     label.innerHTML=checkbox.checked;
  238.                 }
  239.             }
  240.  
  241.             //nadsluchiwanie zdarzenia klik na checkbox
  242.             checkbox.addEventListener("change", isChecked);
  243.  
  244.             //zapisanie funkcji do zmiennej
  245.             const fun1=(e)=>{changeBackground(generateHexColor())};
  246.  
  247.                     //funkcja sprawdzajace czy checkbox ma true lub false
  248.                     function isChecked()
  249.                     {
  250.                         if(checkbox.checked)
  251.                         {
  252.                                 window.addEventListener("click", fun1 );
  253.                                 window.addEventListener("keydown", ()=>changeBackground("#000000"));
  254.                         }
  255.                         else
  256.                         {
  257.                                 window.removeEventListener("click", fun1 );
  258.                                 window.removeEventListener("keydown",changeBackground("#000000") );
  259.                         }
  260.                     }
  261.         })
  262.     </script>
  263.  
  264. </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.

×