SYSTEM LOGIN

HTML CODE:

<p id="result"></p>
    <input type="text" id="name" placeholder="username"/>
    <input type="text" id="pass" placeholder="password"/>
    <button type="button" id="but" onclick="show();">LOGIN</button>

---

CSS CODE:

body{
            background:#952323;
            color:darkkhaki;
            font-family:'AR JULIAN';
            display:flex;
            height:100vh;
            align-items:center;
            justify-content:center;
            overflow:hidden;
            color:darkkhaki;
            letter-spacing:2px;
            position:relative
        }
        input {
            border: none;
            border-bottom: 1px solid darkkhaki;
            background: transparent;
            color: #fff;
            padding: 10px;
            outline: none;
            letter-spacing: 2px;
            font-family: "AR JULIAN";
        }
        #name {
            position: absolute;
            top: 50%;
            transition: .5s;
        }
        #name:hover {
            box-shadow: 0px 0px 30px rgba(54, 0, 0, 1);
        }
        #pass{
            position: absolute;
            top:57%;
            transition:.5s;
        }
        #pass:hover {
            box-shadow: 0px 0px 30px rgba(54, 0, 0, 1);
        }
        #but {
            position: absolute;
            top: 65%;
            background: #952323;
            box-shadow: 0px 0px 10px rgba(54, 0, 0, 0.78);
            border: none;
            padding: 5px 15px;
            color: darkkhaki;
            outline:none;
            transition:.5s;
        }
        #but:hover {
            background: rgba(54, 0, 0, 0.78);
            color: #ccc;
            box-shadow: 0px 0px 30px rgba(54, 0, 0, 1);
        }
        p{
            position:absolute;
            top:40%;
            left:50%;
            transform:translate(-50%,-50%);
        }

---

JavaScript CODE:

function show() {
            var username,password;
            username = String(document.getElementById("name").value);
            password = String(document.getElementById("pass").value);
            if (username == "codeblogger" & password == "codeblogger") {
                document.getElementById("result").innerHTML = "welcome to the system";
            } else if (password == "" & username == "") {
                document.getElementById("result").innerHTML = "Enter your username and password."
            } else if (username == "") {
                document.getElementById("result").innerHTML = "username can not pass empty"
            } else if (password == "") {
                document.getElementById("result").innerHTML = "password can not pass empty"
            }else {
                document.getElementById("result").innerHTML = "username or password is incorrect"
            }
        }