Mini projekt JS

<!DOCTYPE html>
<html lang="pl">
<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">
    <title>Samochody</title>
    <style>
    body
    {
        background-color: rgb(44, 44, 44);
        color: white;
        margin: 0;
        font-family: Verdana, Helvetica, Arial;
        overflow-x: hidden;
        text-align: center;
    }

    header
    {
        width: 100vw;
        height: 3em;
        border-bottom: 2px solid white;
        padding-left: 15vw;
        padding-right: 15vw;
        box-sizing: border-box;
        float: left;
    }

    .menu
    {
        width: 25%;
        height: 100%;
        border-left: 2px solid white;
        float: left;
        box-sizing: border-box;
        padding-top: 0.5em;
    }

    #menu3
    {
        border-right: 2px solid white;
        box-sizing: border-box;
    }

    #top
    {
        width: 100vw;
        height: 100vh;
        border-bottom: 2px solid white;
        box-sizing: border-box;
        background-image: url("https://newsroom.bugatti/models/images/la-voiture-noire_7f373db8550d3df0dcfa1b41bf6e1192/02_lvn_sketches/04_lvn_sketch-side.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        float: left;
    }

    section
    {
        width: 100vw;
        min-height: 50vh;
        border-bottom: 2px solid white;
        box-sizing: border-box;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        padding-right: 2%;
        float: left;
    }

    footer
    {
        width: 100vw;
        height: 3em;
        float: left;
    }

    .list
    {
        color: grey;
    }

    #text
    {
        height: 10em;
        width: 50%;
    }
    </style>
</head>
<body>
    <header>
        <div class="menu" id="menu0">Start</div>
        <div class="menu" id="menu1">Historia</div>
        <div class="menu" id="menu2">Marki</div>
        <div class="menu" id="menu3">Formularz</div>
    </header>
    <main>
        <div id="top">
            <h1 id="title">Strona o samochodach</h1>
        </div>
        <section id="history">
            <h3>Historia samochodów</h3>
            <p>Nad pojazdami napędzanymi parą myślano już w XVII wieku. W 1678 roku Ferdinand Verbiest miał zademonstrować taki pojazd cesarzowi chińskiemu, jednak nie ma na to żadnych dowodów. Dlatego za pierwszego konstruktora – wynalazcę pojazdu mechanicznego – uznaje się Francuza o nazwisku Nicolas-Joseph Cugnot, który zaprezentował swoje pionierskie dzieło napędzane silnikiem parowym w roku 1769.</br>
            W 1870 roku Austriak Siegfried Marcus skonstruował, nienadający się do powszechnego użytku, prototyp pojazdu mechanicznego z benzynowym silnikiem o zapłonie iskrowym. Z kolei inny konstruktor, Niemiec Carl Benz, zbudował swój trzykołowy automobil w roku 1885 (w 1886 uzyskał patent). W tych samych latach prace w dziedzinie silników spalinowych oraz pojazdów napędzanych takimi silnikami prowadzili wspólnie Wilhelm Maybach i Gottlieb Daimler. Nie wiadomo jednak dokładnie, kto, jako pierwszy, skonstruował zastosowany do napędu samochodów silnik o spalaniu wewnętrznym.</p>
        </section>
        <section id="brands">
            <h3>Przykładowe marki samochodów:</h3>
            <ul>
                <li>Mercedes-Ben</li>
                <li id="li2">Toyota</li>
                <li id="li3">Volkswagen</li>
                <li>BMW</li>
                <li>Porsche</li>
                <li>Honda</li>
                <li>Ford</li>
                <li>Nissan</li>
                <li>Audi</li>
                <li>Volvo</li>
            </ul>
        </section>
        <section id="form">
            <h4 id="formtext">Prosimy nie wysyłać emaily ze skargami na poziom wykonania tej strony, ale jeśli już musisz to tu masz prawie działający formularz:</h4>
            <form>
                <label for="email">Adres email:</label></br>
                <input type="text" id="email" name="email"></br>
                <label for="text">Treść emaila:</label></br>
                <textarea id="text" name="text"></textarea>
                <p id="checktext">Co według ciebie należy poprawić na stronie:</p>
                <input type="checkbox" id="check0" name="Wydajność">
                <label for="Wydajność">Wydajność</label></br>
                <input type="checkbox" id="check1" name="Wygląd">
                <label for="Wygląd">Wygląd</label></br>
                <input type="checkbox" id="check2" name="Zawartość">
                <label for="Zawartość">Zawartość</label></br>
                <input type="button" value="Wyślij" id="button">
            </form>
        </section>

    </main>
    <footer>
        <p>To jest zbędna stopka informująca, że na tej stronie nie ma ciasteczek.</p>
    </footer>
</body>
<script type="text/javascript">

    /*Wypisanie w konsoli*/
    console.log(document.getElementById("menu1"));
    console.log(document.querySelector("li"));
    console.log(document.getElementsByClassName("menu"));
    console.log(document.getElementsByTagName("li"));
    console.log(document.querySelectorAll("div.menu"));

    /*Zmiana stylu*/
    document.getElementById("title").style.fontSize = "3em";

    /*Zmiana tekstu w liście*/
    document.getElementById("li2").innerHTML = "Volkswagen";
    document.getElementById("li3").innerHTML = "Toyota";

    /*Zmiana kodu w nagłówku nad listą*/
    document.querySelectorAll("h3")[1].outerHTML = "<p>Przykładowe marki samochodów:</p>";

    /*Dodanie klasy*/
    let ul = document.querySelector("ul");
    ul.classList.add("list");

    /*Dodanie elementu do listy*/
    ul.appendChild(document.createElement('li'));
    ul.lastChild.appendChild(document.createTextNode('Fiat'));

    /*Nasłuchiwanie kliknięć myszy by menu działało*/
    let menu = [];
    menu[0] = document.getElementById("menu0");
    menu[1] = document.getElementById("menu1");
    menu[2] = document.getElementById("menu2");
    menu[3] = document.getElementById("menu3");

    let scr = [];
    scr[0] = document.getElementById("top");
    scr[1] = document.getElementById("history");
    scr[2] = document.getElementById("brands");
    scr[3] = document.getElementById("form");

    for(let i = 0; i<=3; i++)
    {
        menu[i].addEventListener("click", function(){scr[i].scrollIntoView();});
    }

    /*Skrypt do checkboxów*/
    let check = [];
    check[0] = document.getElementById("check0");
    check[1] = document.getElementById("check1");
    check[2] = document.getElementById("check2");

    function changeCheck()
    {
        let bool = true;

        for(let i = 0 ; i<=2; i++)
        {
            if(!(check[i].checked))
            {
                bool = false;
            }
        }

        if(bool === true)
        {
            check[Math.floor(Math.random() * 3)].checked = false;
            document.getElementById("checktext").innerHTML = "No chyba nie chciałeś prosić byśmy zrobili na tej stronie wszystko XD";
        }
    }

    for(let i = 0; i<=2; i++)
    {
        check[i].addEventListener("click", changeCheck);
    }

    /*Skrypt do buttona*/
    button = document.getElementById("button");

    function nope()
    {
        button.style.position = "fixed";
        button.value = "Nope";
        let y = Math.floor(Math.random() * 90).toString()+"vh";
        let x = Math.floor(Math.random() * 90).toString()+"vw";
        button.style.bottom = y;
        button.style.right = x;
    }

    button.addEventListener("click", nope);

    /*Skrypt do text inputa + nasłuchiwanie aktywności*/
    email = document.getElementById("email");

    function thx()
    {
        if(email.value != "")
        {
            email.outerHTML = "<p>DZIĘKUJEMY ZA DOPISANIE SIĘ DO NASZEGO NEWSLETTERA!</p>";
        }
    }

    email.addEventListener("blur", thx);

    /*Skrypt do textarea + nasłuchiwanie aktywności + nasłuchiwanie klawiatury*/
    text = document.getElementById("text");

    let int = 0;
    function message()
    {
        text.value = text.value.substring(0, text.value.length - 1);
        switch(int%4)
        {
            case 0:
                text.value += "b";
            break;
            case 1:
                text.value += "l";
            break;
            case 2:
                text.value += "a";
            break;
            case 3:
                text.value += " ";
            break;
        }
        int++;
    }

    text.addEventListener("focus", function(){text.addEventListener("keydown", message)});
    text.addEventListener("blur", function(){text.removeEventListener("keydown", message)});

</script>
</html>