Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Jquery</title>

<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: red;
        position: relative;
    }

    #cookie{
        background-color: grey;
        color: white;
        width: 100%;
        padding: 20px;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
    }

    #cookie a{
        color: orange;
    }
</style>
</head>
<body>

    <h2 id="hello">Hello</h2>

    <div id="box">

        Hello
        <p>Dette er en box</p>
    </div>
    <button id="klik">Klik her</button>


    <input type="text" name="name" placeholder="Name">
    <span id="name-error"></span>

    <input type="text" name="phone" placeholder="Phone">
    <span id="phone-error"></span>

    <button id="submit">Send</button>


    <div id="cookie">
        <p>We use cookies on this site</p> <a href="#">learn more</a>
        <button id="accept">Accept</button>
    </div>

    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
<script>
    $(function(){
        $("#hello").click(function(){
            $("#hello").css("color", "red");
            $("#hello").text("Hej");
        });


        /*$("#klik").click(function(){
            $("#box").css("background-color", "yellow").text("Hej igen").fadeOut(2000);
            //$("#box p, #hello").text("Du klikkede på knappen");
            //$("#box").slideToggle(2000);
            //$("#box:contains('på')").css("color", "blue");
        });*/


        $("input").blur(function(){
            if($(this).val() == ""){
                $("#" + this.name + "-error").text("Please fill out the " + this.name + " field.").css("color", "red");
            }else{
                $("#" + this.name + "-error").text("");
            }
        });

        $("input").keyup(function(){
            if($(this).val() == ""){
                $("#" + this.name + "-error").text("Please fill out the " + this.name + " field.").css("color", "red");
            }else{
                $("#" + this.name + "-error").text("");
            }
        });


        if(sessionStorage.getItem("cookie") != "shown"){
            $("#cookie").delay(2000).fadeIn(1000);

            $("#accept").click(function(){
                $("#cookie").fadeOut();
                sessionStorage.setItem("cookie", "shown");
            });
        };

        $("#klik").click(function(){
            $('#box').animate({
                left: "+=140px"
            });
        })


    });
</script>
</body>
</html>