My objective: A login form that accepts a username and password (use admin and password respectively). When used it will populate or create a section in the header that contains a username and the logout option. (this section is not visible when the user is not logged in).
What I have attempted so far is below , which does work but I am wondering how I can improve on this code?
<!-- HTML -->
<div id="first">
<form action="" method="post">
<input type="text" id="loginusername" placeholder="Username" />
<input type="password" id="loginpassword" placeholder="Password" />
<input type="button" id="login" value="Sign In" />
</form>
</div>
<div id="second">
</div>
<!-- JQUERY -->
$(document).ready(function(){
// on click Sign In Button checks that username =='admin' and password == 'password'
$("#login").click(function(){
if( $("#loginusername").val()=='admin' && $("#loginpassword").val()=='password') {
$("#first").hide();
$("#second").append("<p>Hello, admin</p> <br/><input type='button' id='logout' value='Log Out' />");
}
else {
alert("Please try again");
}
$("#logout").click(function() {
$("form")[0].reset();
$("#first").show();
$("#second").hide();
});
});
});