wiktormadera

miniprojekt

Apr 11th, 2021
435
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3. <html lang="pl">
  4.  
  5.  
  6.  
  7. <head>
  8.  
  9.     <meta charset="UTF-8">
  10.  
  11.     <title>Wakacje - Wiktor Madera</title>
  12.  
  13.  
  14.  
  15.     <style>
  16.  
  17.         body {
  18.  
  19.           text-align: center;
  20.  
  21.           font-family:Arial, Helvetica, sans-serif;
  22.  
  23.         }
  24.  
  25.  
  26.  
  27.         h1 {
  28.  
  29.           color: maroon;
  30.  
  31.         }
  32.  
  33.         h2 {
  34.  
  35.             color: purple;
  36.  
  37.         }
  38.  
  39.         p {
  40.  
  41.             font-style: italic;
  42.  
  43.         }
  44.  
  45.         li{
  46.  
  47.             text-align: left;
  48.  
  49.         }
  50.  
  51.     </style>
  52.  
  53. </head>
  54.  
  55.  
  56.  
  57. <body>
  58.  
  59. <div class="wrapper">
  60.  
  61. <h1>Nareszcie wakacje!</h1>
  62.  
  63. <p id='tekst1' class='paragraf'>Witaj na mojej stronie.</p>
  64.  
  65. Wybierz kolor tła strony:
  66.  
  67. <button id="white">Biały</button>
  68.  
  69. <button id="green">Zielony</button>
  70.  
  71. <button id="red">Czerwony</button>
  72.  
  73. <button id="black">Czarny</button>
  74.  
  75. <button id="purple">Fioletowy</button>
  76.  
  77. <p class='paragraf'>Przedstawię Ci kilka kierunków idealnych na spędzenie wakacji w tym roku</p>
  78.  
  79.  
  80.  
  81. <h2 id="naglowek">Polecane kierunki:</h2>
  82.  
  83. <ol>
  84.  
  85. <li>Hiszpania - państwo w zachodniej części Europy Południowej, położone głównie na Półwyspie Iberyjskim, obejmujące także Baleary na Morzu Śródziemnym, Wyspy Kanaryjskie na Oceanie Atlantyckim, mniejsze wysepki oraz tereny w północnej Afryce.</li>
  86.  
  87. <li>Włochy - państwo położone w Europie Południowej, na Półwyspie Apenińskim, będące członkiem Unii Europejskiej oraz wielu organizacji, m.in.: NATO, należące do siedmiu najbardziej uprzemysłowionych i bogatych państw świata – G7.</li>
  88.  
  89. <li>Stany Zjednoczone</li>
  90.  
  91. </ol>
  92.  
  93. <h3>A najbardziej polecamy piękną wyspę jaką jest Madera.</h3>
  94.  
  95. <img src="madera.jpg">
  96.  
  97.  
  98.  
  99. </div>
  100.  
  101. <script>
  102.  
  103.  
  104.  
  105. var q = document.getElementById('tekst1');
  106.  
  107.  
  108.  
  109. console.log(q);
  110.  
  111.  
  112.  
  113. var w = document.getElementsByClassName('paragraf');
  114.  
  115.  
  116.  
  117. console.log(w);
  118.  
  119.  
  120.  
  121. var e = document.getElementsByTagName('li');
  122.  
  123.  
  124.  
  125. console.log(e);
  126.  
  127.  
  128.  
  129. var r = document.querySelector('h1');
  130.  
  131.  
  132.  
  133. console.log(r);
  134.  
  135.  
  136.  
  137. var t = document.querySelectorAll('ol');
  138.  
  139.  
  140.  
  141. console.log(t);
  142.  
  143.  
  144.  
  145.  
  146.  
  147. r.style.color="red";
  148.  
  149. e[0].style.color="darkblue";
  150.  
  151. e[1].style.color="red";
  152.  
  153. e[2].style.color="green";
  154.  
  155.  
  156.  
  157. e[1].textContent="Francja - państwo, którego część metropolitalna znajduje się w Europie Zachodniej, posiadające także zamorskie terytoria na innych kontynentach. Francja metropolitalna rozciąga się od Morza Śródziemnego na południu do kanału La Manche i Morza Północnego na północy, oraz od Renu na wschodzie do Zatoki Biskajskiej na zachodzie. Francuzi często nazywają swój kraj l’Hexagone (sześciokąt) – pochodzi to od kształtu Francji metropolitalnej.";
  158.  
  159. e[2].textContent="Portugalia - państwo europejskie położone w zachodniej części Europy Południowej na południowym zachodzie Półwyspu Iberyjskiego. Jest najdalej wysuniętym na zachód państwem Europy, od północy i wschodu graniczy z Hiszpanią, a od zachodu i południa Portugalię oblewają wody Oceanu Atlantyckiego. Dodatkowo w skład Portugalii wchodzą dwa archipelagi wysp położonych na Oceanie Atlantyckim – Azory i Madera. Jest członkiem Unii Europejskiej oraz NATO.";
  160.  
  161.  
  162.  
  163. var naglowek = document.getElementById("naglowek");
  164.  
  165. naglowek.outerHTML="<p><b> Wybierz jeden z polecanych przez specjalistów kierunków:</b> </p>"
  166.  
  167.  
  168.  
  169. var paragrafy = document.getElementsByTagName('p');
  170.  
  171. paragrafy[2].classList.add("class");
  172.  
  173.  
  174.  
  175. var nowyelement=document.createElement('li');
  176.  
  177. var tekst=document.createTextNode("Malezja - państwo w Azji Południowo-Wschodniej, na Półwyspie Malajskim i wyspie Borneo; obszar 329 847 km², ludność 28 300 000 (według stanu na 2010 r.)[3], stolica Kuala Lumpur (ok. 1 760 000 mieszkańców), siedziba rządu w Putrajaya.");
  178.  
  179. nowyelement.appendChild(tekst);
  180.  
  181. var pozycja = document.getElementsByTagName('ol')[0];
  182.  
  183. pozycja.appendChild(nowyelement);
  184.  
  185.  
  186.  
  187. q.addEventListener("click", () => {
  188.  
  189.     q.style.fontSize="30px";
  190.  
  191.     q.textContent="Witaj na mojej stronie!";
  192.  
  193.     });
  194.  
  195.  
  196.  
  197. r.addEventListener('mousemove', () => {
  198.  
  199. r.style.fontSize='40px';
  200.  
  201. });
  202.  
  203.  
  204.  
  205. var btn1 = document.getElementById("white");
  206.  
  207. var btn2 = document.getElementById('green');
  208.  
  209. var btn3 = document.getElementById('red');
  210.  
  211. var btn4 = document.getElementById('black');
  212.  
  213. var btn5 = document.getElementById('purple');
  214.  
  215.  
  216.  
  217. var body = document.querySelector('body');
  218.  
  219.  
  220.  
  221.  
  222.  
  223.  
  224.  
  225. btn1.addEventListener('mouseup', () =>
  226.  
  227. {
  228.  
  229.    body.style.backgroundColor="white";
  230.  
  231. });
  232.  
  233. btn2.addEventListener('mouseup', () =>
  234.  
  235. {
  236.  
  237.    body.style.backgroundColor="green";
  238.  
  239. });
  240.  
  241. btn3.addEventListener('mouseup', () =>
  242.  
  243. {
  244.  
  245.    body.style.backgroundColor="red";
  246.  
  247. });
  248.  
  249. btn4.addEventListener('mouseup', () =>
  250.  
  251. {
  252.  
  253.    body.style.backgroundColor="black";
  254.  
  255. });
  256.  
  257. btn5.addEventListener('mouseup', () =>
  258.  
  259. {
  260.  
  261.    body.style.backgroundColor="purple";
  262.  
  263. });
  264.  
  265.  
  266.  
  267.  
  268.  
  269. </script>
  270.  
  271.  
  272.  
  273.  
  274.  
  275. </body>
  276.  
  277. </html>
  278.  
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.

×