HTML + JS

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
<title> Wakacje </title>
</head>
<body>
  <div class="body">
<h1 class="naglowek1"> Wakacje (łac. vacatio, uwolnienie) – okres wolny od nauki szkolnej. </h1>
<p class="akapit1"> Terminy i długości wakacji są zróżnicowane w wielu krajach, a nawet w ich poszczególnych częściach. Istotnymi czynnikami mającymi wpływ na terminy wakacji były święta religijne oraz rytm pracy rolników i związana z tym konieczność udziału wszystkich członków rodziny, w tym dzieci, w pracach rolniczych, a także klimat. </p>
<p class="akapit2"> W Polsce wakacje to potoczna nazwa ferii letnich. Do roku szkolnego 2009/2010 wakacje obejmowały okres od dnia następnego po pierwszym piątku po 18 czerwca do ostatniego dnia sierpnia danego roku, czyli od końca roku szkolnego do ponownego jego rozpoczęcia w szkole podstawowej, gimnazjum i liceum. </p>
<p class="akapit3"> Od 2011 roku wakacje rozpoczynały się w sobotę po ostatnim piątku czerwca i trwały do końca sierpnia. Zmiana ta została wprowadzona w związku ze zwiększeniem liczby dni wolnych w czasie roku szkolnego. W roku 2017 wakacje rozpoczęły się 23 czerwca, a skończyły 3 września[1]. Ma to związek z nową regulacją, zakładającą, że zajęcia dydaktyczno-wychowawcze będą się kończyć w pierwszy piątek po 20 czerwca. Jeżeli począwszy od roku szkolnego 2018/2019 święto Bożego Ciała wypada w czwartek poprzedający bezpośrednio piątek po 20 czerwca, zajęcia kończą się w środę poprzedzającą dzień tego święta. W takiej sytuacji wakacje będą się rozpoczynać w dzień tego święta. </p>
<h2 id="naglowek2"> Ciekawe rzeczy które można robić w wakacje </h2>

  <ul id="lista">
    <li> jechać na wakacje do Kambodży </li>
    <li id="drugi"> jak ktoś jest pełnoletni to poupalać swojego gruza na parkingu pod kauflandem czy innym lidlem </li>
    <li id="trzeci"> zająć się swoim hobby </li>
    <li> popływać w Żeglinie </li>
  </ul>


</div>

<script>
let var1 = document.getElementById("lista");
let var2 = document.getElementsByTagName("p");
let var3 = document.getElementsByClassName("nagłowek1");
let var4 = document.querySelector(".body");
console.log(var1, var2, var3, var4);
let headcolor = document.querySelector("h1");
headcolor.style.color="red";
headcolor.style.fontFamily="Arial";
headcolor.style.fontStyle="Italic";
headcolor.style.fontSize="60px";
let listitem2 = document.getElementById("drugi");
let listitem3 = document.getElementById("trzeci");
let nagloweknr2 = document.getElementById("naglowek2");
listitem2.innerHTML="oto drugi element list zmieniony przez metodę innnerHTML";
listitem3.innerHTML="oto trzeci element listy zmieniony poprzez metodę innerHTML";
nagloweknr2.outerHTML="<p><b>Ciekawe rzeczy, które można robić w wakacje. Tak przy okazji teraz to już nie jest nagłówek tylko akapit z pogrubioną czcionką</b></p>";
let element=document.createElement('li');
let tekst=document.createTextNode('oto kolejny element listy');
element.appendChild(tekst);
let place = document.getElementsByTagName('ul')[0];
place.appendChild(element);
</script>

</body>
</html>