API tools faq
paste
Advertisement
JakubKaczmarek

projekt html+js

JakubKaczmarek
Apr 9th, 2021
502
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="style.css">
  8.     <title>Wakacje</title>
  9. </head>
  10. <body>
  11.     <h1 id="tytul">Wakacje</h1>
  12.     <p class="cz1">Podczas wakacji dzieci i młodzież mogą zdobyć doświadczenia często niedostępne w czasie roku szkolnego: poznawać nowe miejsca i nawiązywać nowe znajomości, podtrzymywać i rozwijać relacje z rówieśnikami, ćwiczyć samodzielność, uczyć się bez pomocy dorosłych organizować swój wolny czas i podejmować decyzje, poszerzać swoją wiedzę o świecie przyrodniczym, nieożywionym i społecznym. Mogą rozwijać umiejętności społeczne, sprawność fizyczną czy kreatywność wyrażającą się w podejmowaniu działań twórczych bądź poszukiwaniu pomysłów na spędzanie czasu. Mogą wreszcie odkrywać swoje talenty i zainteresowania – nie tylko dlatego, że będą mieć na to więcej czasu, ale też właśnie z powodu szerszych możliwości (np. zwiedzania zabytków, podróżowania, obserwowania przyrody, zajęcia się swoim hobby, trenowania sportu, czytania itp.)</p>
  13.     <p class="cz1">Wszystko to rozwija naszych uczniów w trudny do przecenienia sposób. Dzieci, których wakacje są pełne rutyny, mało urozmaicone i stymulujące, są w stosunku do swoich przeżywających liczne wakacyjne przygody rówieśników po prostu poszkodowane. Nie tylko dlatego, że im się „nudzi”, ale właśnie dlatego, że ograbia je to z tego cennego doświadczenia i okazji do wieloaspektowego rozwoju.</p>
  14.     <p class="cz1">Z tego powodu ważnym zadaniem dorosłych – przede wszystkim rodziców i opiekunów – jest zapewnić dzieciom możliwość jak najciekawszego i najbardziej urozmaiconego spędzania wakacji. Szkoła może w tym pomóc – poprzez podejmowanie działań zarówno wobec dzieci, jak i ich rodziców.</p>
  15.     <p>W klasie szkolnej, np. właśnie podczas lekcji wychowawczej, możemy zachęcać naszych podopiecznych do aktywnego, kreatywnego i urozmaiconego spędzania wakacyjnego czasu. Najlepiej zrobić to nie poprzez pogadankę i naświetlanie dzieciom korzyści, jakie je czekają, ale poprzez wspólne z nimi poszukiwanie atrakcyjnych pomysłów. Poprowadzenie zajęć w taki sposób, by uczniowie sami dostrzegli sens urozmaiconych wakacji, będzie najlepszym sposobem.</p>
  16.     <p>Zdecydowanie warto również poruszyć temat właściwej organizacji wakacyjnego wypoczynku dzieci i młodzieży podczas zebrania z rodzicami, dając im konkretne, praktyczne wskazówki, ale też bardziej szczegółowo omawiając kwestie najistotniejsze z punktu widzenia rozwoju dzieci.</p>
  17.     <p>Szkoła może także informować rodziców o dostępnych możliwościach uatrakcyjnienia wakacyjnego wypoczynku ich dzieci – w tym celu warto np. zdobyć informacje o formach wypoczynku i atrakcjach organizowanych w najbliższej okolicy (np. półkoloniach, ofercie lokalnych instytucji kulturalnych, fundacji, stowarzyszeń itp.); niektóre szkoły same organizują półkolonie lub inne formy zajęć wakacyjnych (np. turnieje sportowe).</p>
  18.     <br>
  19.     <h2>Najlepsze miejsca na wakacje w Polsce:</h2>
  20.     <ul>
  21.         <li>Ustrzyki Górne</li>
  22.         <li>Pokrzywna</li>
  23.         <li>Karpacz</li>
  24.         <li>Świnoujście</li>
  25.         <li>Szklarska Poręba</li>
  26.         <li>Ustka</li>
  27.         <li>Polańczyk</li>
  28.         <li>Milówka</li>
  29.     </ul>
  30.     <br>
  31.     <form action="*">
  32.         <h3>Zapis do Akademii Pana Kleksa</h3>
  33.         <label>Imię</label>
  34.         <select name="im">
  35.             <option>Aaron</option>
  36.             <option>Abbo</option>
  37.             <option>Abelard</option>
  38.             <option>Abiasz</option>
  39.             <option>Abraham</option>
  40.             <option>Absalon</option>
  41.             <option>Achacjusz</option>
  42.             <option>Achilles</option>
  43.             <option>Adalwina</option>
  44.             <option>Adam</option>
  45.             <option>Adolf</option>
  46.             <option>Afrodyzjusz</option>
  47.             <option>Agnellus</option>
  48.             <option>Ahmed</option>
  49.         </select>
  50.         <br>
  51.         <label>Nazwisko</label>
  52.         <input type="text" name="nazwisko">
  53.         <br>
  54.         <label>Płeć</label>
  55.         <br>
  56.         <input type="radio" id="yop" name="ye" value="yop" checked>
  57.         <label for="yop">Tak</label>
  58.         <input type="radio" id="no" name="nah" value="no">
  59.         <label for="no">Nie</label>
  60.         <br>
  61.         <label>Życiorys</label>
  62.         <br>
  63.         <textarea name="bio"></textarea>
  64.         <br>
  65.         <input type="submit" value="Wyślij">
  66.     </form>
  67.  
  68.     <script>
  69.         var tl=document.getElementById("tytul");
  70.         console.log(tl);
  71.         var cz1=document.getElementsByClassName("cz1");
  72.         console.log(cz1);
  73.         var par=document.querySelectorAll("p");
  74.         console.log(par);
  75.         var lis=document.getElementsByTagName("li");
  76.         console.log(lis);
  77.         var nag2=document.querySelector("h2");
  78.         console.log(nag2);
  79.         tl.style.fontSize="48px";
  80.         tl.style.color="darkblue";
  81.         tl.style.fontFamily="Arial";
  82.         nag2.outerHTML="<p><b>Najlepsze miejsca na wakacje w Polsce:</b></p>";
  83.         lis[1].textContent="Zduńska Wola";
  84.         lis[2].textContent="Sieradz";
  85.         lis[1].classList.add("kls");
  86.         console.log(lis[1].classList.contains("kls"));
  87.         document.getElementsByClassName("kls")[0].style.color="green";
  88.         var nele=document.createElement("li");
  89.         var tekele=document.createTextNode("Sieradz 2");
  90.         nele.appendChild(tekele);
  91.         var pos=document.getElementsByTagName("ul")[0];
  92.         pos.appendChild(nele);
  93.         var labl=document.querySelectorAll("h3")[0];
  94.         lis[8].addEventListener("click",function() {
  95.             this.textContent="Sieradz 2 (nowatorska kontynuacja)";
  96.             this.style.color="red";
  97.         });
  98.         var nzw=document.querySelectorAll("input")[0];
  99.         var sl=document.querySelector("select");
  100.         nzw.addEventListener("keydown",function(){
  101.             if(nzw.value.length>=3)
  102.             {
  103.                 labl.textContent="Ratunku, wypuście mnie";
  104.                 labl.style.fontStyle="italic";
  105.                 labl.style.color="red";
  106.             }
  107.             else
  108.             {
  109.                 labl.textContent="Zapis do Akademii Pana Kleksa";
  110.                 labl.style.fontStyle="normal";
  111.                 labl.style.color="black";
  112.             }
  113.         });
  114.         window.addEventListener("scroll",function() {
  115.             if(nzw.value.length>=5 && sl.value=="Ahmed")
  116.            {
  117.                tl.style.color="yellow";
  118.             }
  119.             else if(nzw.value.length>=5)
  120.             {
  121.                 tl.style.color="green";
  122.             }
  123.             else
  124.             {
  125.                 tl.style.color="darkblue";
  126.             }
  127.         });
  128.     </script>
  129.  
  130. </body>
  131. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!