Untitled

<!DOCTYPE html>

<html>
<title>Testing this script.</title>

<head>
        <meta charset="utf-8"/>
    <script>

        function newline() {
            document.write("<br>");
        }
        function writeline(what) {
            document.write(what + "<br>");
        }
        function buttonClicked(id, pass) {

            if (id == "") {
                alert("Invalid Username!");
                return;
            }
            if (pass == "") {
                alert("Invalid Password!");
                return;
            }
            console.log(id + ", " + pass)
            number = 0;
            count = id.length;
            pcount = pass.length;

            //only did this for fun.
            for (i = 0; i < count; i++) {
                document.write(number + 1 + ": " + id.substring(i, i + 1) + "<br>")
                number++;
            }
            document.write("<br>");
            number = 0;
            for (i = 0; i < pcount; i++) {
                document.write(number + 1 + ": " + pass.substring(i, i + 1) + "<br>")
                number++;
            }

            newline();
            writeline("username: <b>" + id + "</b>");
            writeline("password: <b>" + pass + "</b>")
        }
    </script>
    <style>
        body
    {
        margin:0 auto;
        padding:0;
        text-align:center;
        height:2000px;
        background-color:orange;
    }
    #wrapper
    {
        width:995px;
        padding:0px;
        margin:0px;
        display:flex;
        justify-content: center;
        align-items: center;
        font-family:helvetica;
        text-align:center;
    }
    input[type="text"]
    {
        width:200px;
        height:35px;
        margin-right:2px;
        border-radius:3px;
        border:1px solid red;
        padding:5x;
    }
    input[type="password"]
    {
        width:200px;
        height:35px;
        margin-right:2px;
        border-radius:3px;
        border:1px solid red;
        padding:5x;
    }

    input[type="button"]
    {
        background:none;
        color:white;
        border:none;
        width:110px;
        height:36px;
        border-radius:3px;
        background-color:green;
        font-size:16px;
    }
    </style>
</head>

<body>
    <script>
        // intro
        document.write("This text shows up centered on screen....");

    </script>
    <div id="wrapper">
        <div id="field_div">
            <input type="text" value="Username" name="uName" id="uName">
            <br>
            <input type="password" value="" name="pass" id="pass" onkeydown="if (event.keyCode == 13) document.getElementById('btnLogin').click()">
            <br><br>
            <input type="button" value="Login" name="btnLogin" id="btnLogin" onclick="buttonClicked(document.getElementById('uName').value, document.getElementById('pass').value)">
            <input type="button" value="Register" onclick="registerUser()">
        </div>
    </div>

</body>

</html