Rafał Sobala projekt html+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

<div class="container">
<header>

    <div class="ikony">
        <div class="jezyk"><button name="en" id="en">EN</button></div>
        <div class="jezyk"><button name="pl" id="pl">PL</button></div>
    </div>
    <h1>Zaplanuj wakacje!</h1>
</header>

<div class="content">
    <div class="menu">
        <ul class="menu">
            <li><a>Strona główna</a></li>
            <li><a>Zdjęcia</a></li>
            <li><a>Katalog</a></li>
            <li><a>Kontakt</a></li>
        </ul>
    </div>
    <h2>Witam!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet consectetur libero. Donec hendrerit ligula at dui sollicitudin, interdum pellentesque leo tincidunt. Maecenas sagittis, magna nec lobortis ultrices, magna augue efficitur augue, eget scelerisque nisi magna ac mi. Mauris in auctor purus. Mauris eget magna tellus. Duis vulputate laoreet ligula, non accumsan sem tincidunt vel. Quisque a sagittis diam, a pellentesque ante. Praesent placerat tortor justo, vel accumsan nibh convallis quis. Sed gravida metus nec fermentum sodales. Aenean ullamcorper mi odio, at euismod velit ornare ac. Nullam tellus metus, placerat non nibh iaculis, imperdiet sollicitudin lacus. Nunc porta maximus nisi, id maximus sapien facilisis consequat. Pellentesque nibh neque, porta ac nibh et, aliquet aliquam eros.

    Phasellus vitae aliquam leo. Vestibulum nisl est, tincidunt sed pellentesque ac, iaculis ac orci. Duis nec lacinia eros, eu tincidunt dolor. Vestibulum dolor sem, suscipit ac erat nec, consequat faucibus enim. Donec tempor quam a arcu ornare suscipit. Nam eu dolor et neque ullamcorper rutrum id ut lorem. Nunc tristique ullamcorper sollicitudin.
<div class="sonda">
<h2>Wybierz co lubisz:</h2>

  <form id ='f1' action="" method="">
  <ul>
      <input type="checkbox" name="gory">Góry
      <input type="checkbox" name="morze">Morze
      <input type="checkbox" name="lasy">Lasy
      <input type="checkbox" name="jeziora">Jeziora
      <input class="wyslij" type="submit" value="wyslij">

  </ul>
</form>

</div>
<p id="akapit">Vestibulum sagittis rutrum ipsum, at lobortis lorem elementum sed. Maecenas imperdiet imperdiet faucibus. Etiam cursus nulla diam, eget egestas arcu mollis id. Fusce maximus ante nisi, non condimentum felis aliquam aliquet. Suspendisse eu mattis libero, elementum viverra nunc. Maecenas hendrerit iaculis vehicula. Sed risus erat, gravida eget velit ut, placerat dictum risus. Donec semper neque a leo dictum suscipit. Duis faucibus faucibus elit, vel suscipit turpis gravida non. Duis pellentesque tortor sit amet odio finibus, vitae euismod massa commodo. Vivamus pharetra turpis orci, vitae tempor sapien congue gravida. Integer condimentum at metus ut lacinia. Sed non tellus orci.</p>
<p>    Nulla condimentum sit amet ipsum id suscipit. Suspendisse vulputate odio vitae convallis laoreet. Etiam imperdiet sed justo eget finibus. Suspendisse potenti. Ut hendrerit sem sit amet turpis porttitor sodales. Donec id posuere elit, in aliquet nisi. Nunc consequat orci sed hendrerit rutrum. Donec eget massa in diam dictum consectetur. Sed nec justo lacus.
</p>
<p>
    Pellentesque varius, nisl ut dictum tempor, urna libero pharetra leo, id pellentesque metus sem eu odio. Duis arcu nisi, semper at vestibulum nec, rutrum eget enim. Praesent a dapibus lacus. Donec felis magna, eleifend et sapien tincidunt, molestie iaculis mi. Proin et rutrum ex. Integer hendrerit neque eu nisl commodo molestie. Aliquam erat volutpat. Nullam eu quam in eros fermentum molestie. Nunc eleifend blandit orci, at finibus nibh gravida ac. Curabitur hendrerit commodo lacus, sed suscipit magna tristique non. Nam ac lacinia ante, et blandit dolor. Vestibulum venenatis neque ac nisl tincidunt, at maximus orci rhoncus. Donec at volutpat risus. Aenean placerat tristique ex, vitae pretium erat laoreet at.</p>

</p>
<h2 id="nagloweklisty">Naglowek listy</h2>
<ul>
    <li>morze</li>
    <li>gory</li>
    <li>lasy</li>
    <li>jeziora</li>
</ul>


</div>

<footer>
<p>Phasellus vitae aliquam leo. Vestibulum nisl est, tincidunt sed pellentesque ac, iaculis ac orci. Duis nec lacinia eros, eu tincidunt dolor. Vestibulum dolor sem, suscipit ac erat nec, consequat faucibus enim. Donec tempor quam a arcu ornare suscipit. Nam eu dolor et neque ullamcorper rutrum id ut lorem. Nunc tristique ullamcorper sollicitudin.</p>
</footer>
</div>
</body>
</html>


<script>
//-----------------------------------------------------------------------------------

var a=document.getElementById("akapit");
var b=document.getElementsByClassName("menu");
var c=document.querySelector("h1");
var d=document.querySelectorAll("p");
var e=document.getElementsByTagName("li");
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);


var h2=document.getElementsByTagName("h2")[0];
    //console.log(h2);
h2.style.color="blue";
h2.textContent="nowy tekst";

var f=document.querySelector("h1");
f.classList.add("czarny");
//-----------------------------------------------------------------------------------

var nowyelement=document.createElement('li');
var tekst2=document.createTextNode('staw');
nowyelement.appendChild(tekst2);
var chwytak=document.getElementsByTagName('ul')[2];
chwytak.appendChild(nowyelement);

//-----------------------------------------------------------------------------------
var button=document.getElementById("en");
button.addEventListener('click', function (){
f.textContent="Let's planing your holidays!";
});

var button=document.getElementById("pl");
button.addEventListener('click', function (){
f.textContent="Zaplanuj swoje wakacje!";
});
//-----------------------------------------------------------------------------------
var full=document.getElementsByClassName("content")[0];
    //console.log(full);
var liczba=0;
full.addEventListener('contextmenu', function(){
    //console.log(liczba);
    if(liczba==0){
    liczba=1;
    full.classList.add("czarnetlo");}
    else{
    liczba=0;
    full.classList.remove("czarnetlo");
    }
    //console.log(liczba);
});
//----------------------------------------------------------------------------------
var marginesy=document.getElementsByClassName("container")[0];
console.log(marginesy);

document.body.addEventListener('keypress', (e) => {
    //console.log(e);
    //console.log(e.keyCode);

    if(e.keyCode == 100){
        //lewo
        marginesy.classList.remove("c100");
        marginesy.classList.add("c40");
    }
});

document.body.addEventListener('keypress', (e) => {
    if(e.keyCode == 97){
        //prawo
        marginesy.classList.remove("c40");
        marginesy.classList.add("c100");
    }
});
document.body.addEventListener('keypress', (e) => {
    if(e.keyCode == 114){
        //prawo
        marginesy.classList.remove("c40");
        marginesy.classList.remove("c100");
    }
});
//----------------------------------------------------------------------------------
</script>