<div id="login-error-msg-holder">
  <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
</div>

<form id="login-form">
  <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
  <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
  <input type="submit" value="Login" id="login-form-submit">
</form>

body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; display: grid; justify-items: center; align-items: center; background-color: #3a3a3a; }

#main-holder { width: 50%; height: 70%; display: grid; justify-items: center; align-items: center; background-color: white; border-radius: 7px; box-shadow: 0px 0px 5px 2px black; }

#login-error-msg-holder { width: 100%; height: 100%; display: grid; justify-items: center; align-items: center; }

#login-error-msg { width: 23%; text-align: center; margin: 0; padding: 5px; font-size: 12px; font-weight: bold; color: #8a0000; border: 1px solid #8a0000; background-color: #e58f8f; opacity: 0; }

#error-msg-second-line { display: block; }

#login-form { align-self: flex-start; display: grid; justify-items: center; align-items: center; }

.login-form-field::placeholder { color: #3a3a3a; }

.login-form-field { border: none; border-bottom: 1px solid #3a3a3a; margin-bottom: 10px; border-radius: 3px; outline: none; padding: 0px 0px 5px 5px; }

#login-form-submit { width: 100%; padding: 7px; border: none; border-radius: 5px; color: white; font-weight: bold; background-color: #3a3a3a; cursor: pointer; outline: none; } const loginForm = document.getElementById("login-form"); const loginButton = document.getElementById("login-form-submit"); const loginErrorMsg = document.getElementById("login-error-msg");

loginButton.addEventListener("click", (e) => { e.preventDefault(); const username = loginForm.username.value; const password = loginForm.password.value;

if (username === "user" && password === "web_dev") {
    alert("You have successfully logged in.");
    location.reload();
} else {
    loginErrorMsg.style.opacity = 1;
}

})