Untitled

<!DOCTYPE HTML>
<html lang='pl'>
<head>
    <meta charset='utf-8'>
    <meta name="description" content="Tolkien-World - mój świat, moje hobby" />
    <meta name="keywords" content="Hobby, Pilachowski, Tolkien, Śródziemie, Lotr, Hobbit, Zainteresowania, Fantastyka">
    <meta name="author" content="Jakub Pilachowski">
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
    <title>Tolkien-World</title>
    <link rel='stylesheet' href='css/style.css'>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $(function () {
            $('aside nav ul li a').each(function () {
                if (this.href == $(location).attr('href')) {
                    $(this).addClass('entered');
                }
            });
        });
        $(function () {
            $("#ankieta_dataurodzenia").datepicker();
        });

        function withLoad() {
            if (typeof (Storage) !== "undefined") {
                var czySesjaPoliczona = sessionStorage.getItem("czySesjaPoliczona");
                var licznik = Number(localStorage.getItem("licznik"));
                if (czySesjaPoliczona == null)
                {
                    sessionStorage.setItem("czySesjaPoliczona", "jeszcze jak");

                    if (licznik == null) {
                        localStorage.setItem("licznik", 0);
                    }
                    else {
                        licznik++;
                        localStorage.setItem("licznik", licznik);
                    }
                }
                var node = document.createElement("p");
                var textnode = document.createTextNode("Wszedłeś na stronę już " + licznik + " razy");
                node.appendChild(textnode);
                node.style = "color: green;margin-bottom: 3px;";
                document.querySelector('footer').insertBefore(node, document.getElementById("copyright"));


            }
        }

        $(document).ready(function () {

            $('#ankieta_imie').on('blur', function () {
                var input = $(this);
                var imie = $(this).val();
                if (!imie) {
                    input.removeClass("valid").addClass("invalid")
                }
                else {
                    input.removeClass("invalid").addClass("valid");
                }
            });

            $('#ankieta_dataurodzenia').on('blur', function () {
                var input = $(this);
                var dataurodzenia = $(this).val();
                if (!dataurodzenia) {
                    input.removeClass("valid").addClass("invalid")
                }
                else {
                    input.removeClass("invalid").addClass("valid");
                }
            });

            $('#ankieta_opinia').on('blur', function () {
                var input = $(this);
                var opinia = $(this).val();
                if (!opinia) {
                    input.removeClass("valid").addClass("invalid");
                }
                else if(opinia.length < 50)
                {
                    input.removeClass("valid").addClass("invalid").addClass("krotka");
                }
                else
                {
                    input.removeClass("invalid").addClass("valid");
                }

            });

            $('#ankieta_wyslij').click(function (event) {
                var imie = $('#ankieta_imie');
                var dataurodzenia = $('#ankieta_dataurodzenia');
                var opinia = $('#ankieta_opinia');

                if (imie.hasClass('valid') && dataurodzenia.hasClass('valid') && opinia.hasClass('valid')) {
                            event.preventDefault();
                    $("#err").html("Pomyślnie uzupełniono ankietę. Dzięki! :)");
                    $("#err").dialog();
                }
                else {
                    event.preventDefault();
                    if (imie.hasClass('invalid'))
                    {
                        var node = document.createElement("p");
                        var textnode = document.createTextNode("Uzupełnij nazwę!");
                        node.appendChild(textnode);
                        document.getElementById('err').appendChild(node);
                    }
                    if (dataurodzenia.hasClass('invalid')) {
                        var node2 = document.createElement("p");
                        var textnode2 = document.createTextNode("Uzupełnij datę urodzenia!");
                        node2.appendChild(textnode2);
                        document.getElementById('err').appendChild(node2);
                    }

                    if (opinia.hasClass('invalid') && opinia.hasClass('krotka')) {
                        var node3 = document.createElement("p");
                        var textnode3 = document.createTextNode("Opinia ma mieć minimum 50 znaków!");
                        node3.appendChild(textnode3);
                        document.getElementById('err').appendChild(node3);
                    }
                    else if(opinia.hasClass('invalid'))
                    {
                        var node4 = document.createElement("p");
                        var textnode4 = document.createTextNode("Uzupełnij opinię!");
                        node4.appendChild(textnode4);
                        document.getElementById('err').appendChild(node4);
                    }


                    $("#err").dialog();
                }
            });
        });
    </script>
</head>
<body onload="withLoad()">

    <div class='container'>
        <header>
            <a href="index.html"><img src="images/header.png" alt="" /></a><br />
            Świat nie znający granic...
        </header>

        <aside>
            <nav>
                <ul>
                    <li><a href="index.html">Strona główna</a></li>
                    <li><a href="ksiazki.html">Książki</a></li>
                    <li>
                        <a href="filmy.html">Filmy</a>
                        <ul class="ukrytefilmy">
                            <li><a href="film_hobbit.html">Hobbit</a></li>
                            <li><a href="film_lotr.html">Władca Pierścieni</a></li>
                        </ul>
                    </li>
                    <li><a href="galeria.html">Galeria</a></li>
                    <li><a href="polecam.html">Co polecam</a></li>
                    <li><a href="ankieta.html">Ankieta</a></li>
                    <li><a href="kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
        </aside>

        <section id="main" >
            <form id="ankieta" method="post" action="">
                <h1>Ankietka</h1>
                <p>Witaj użytkowniku! Jak masz chwilę to wypełnij proszę poniższą ankietę. Ma ona cel zebrać dane statystyczne o fanach J. R. R. Tolkiena</p>

                <p>Imię: <input type="text" name="ankieta_imie" id="ankieta_imie"/></p>
                <p>Data urodzenia: <input type="text" name="ankieta_dataurodzenia" id="ankieta_dataurodzenia" /></p>
                <p>Co myślisz o twórczości Tolkiena? Rozpisz się na minimum 50 znaków.</p>
                <textarea rows="20" cols="60" name="ankieta_opinia" id="ankieta_opinia"></textarea>
                <p><input type="submit" id="ankieta_wyslij" name="ankieta_wyslij" value="Wyślij!"/></p>
                <div id="err" title="Błąd!">

                </div>
            </form>
        </section>

        <footer>
            <p id="copyright">Jakub Pilachowski © 2016</p>
        </footer>

    </div>

</body>
</html>