login

<!doctype html>
<html>

    <head>
        <title>Login</title>
    </head>


    <body bgcolor="mediumaquamarine" id="theBody">

            <center>

                <h1>My Login System</h1>

                <hr />

                <label for="user">username:</label>

                <input type="text" id="user" />

                <br/><br/>

                <label for="pass">password:</label>

                <input type="password" id="pass" />

                <br/><br/>

                <input type="button"  value="login" onclick="loginClicked()" />
                <input type="button"  value="reset" onclick="resetClicked()" />


            </center>

        <script>


            // function to check the login info that the user entered
            function loginClicked(){

                //theBody.innerHTML += "<br/>the body"; // we can get the entire body and change it was well using the id

                var username = user.value; // saving the text we have in the username textbox
                var password = pass.value; // saving the text we have in the password textbox


                var myUsername = "Jane";
                var myPassword = "123";

                if(username == myUsername && password == myPassword){

                    alert("welcome!");

                }
                else{
                    alert("we don't want you here");
                }


            }

            // function to reset the textboxes
            function resetClicked(){

                // to empty the textboxes we change the 'value' parameter to an empty string ("")
                user.value = "";
                pass.value = "";

            }


        </script>
    </body>

</html>