I created a simple password system using HTML, CSS, and JS to quiz myself on my variable, localstorage, and if and else statement knowledge. I don't know how to make the create/login password input fields required though. Any other improvement suggestions/feedback would be appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
#loginPassword {
display: none;
}
</style>
</head>
<body>
<form id="createPassword">
<input type="password" id="createdPassword" required>
<button type="password" onclick="storepassword()">Submit</button>
</form>
<form id="loginPassword">
<input type="password" id="loggedinPassword" required>
<button type="submit" onclick="checkpassword()">Login</button>
</form>
<div id="content" style="display:none">
<h1>this is super secret content</h1>
</div>
<script>
//convenient variable
var createdPassword = document.getElementById('createdPassword').value;
function storepassword() {
//creates password
event.preventDefault();
//variables for convenience
var createdPassword = document.getElementById('createdPassword').value;
localStorage.setItem('createdPasswordstorage', createdPassword);
document.getElementById('loginPassword').style.display = "block";
document.getElementById('createPassword').style.display = "none";
}
function checkpassword() {
//convenient variables
let storedPassword = localStorage.getItem('createdPasswordstorage');
let loginPassword = document.getElementById('loggedinPassword').value;
let content = document.getElementById('content');
event.preventDefault();
//checks if password is correct
if (loginPassword == storedPassword) {
alert('Logged in');
content.style.display = "block";
//add functions for displaying content, etc. here:
} else {
alert('Incorrect Password');
}
}
function loadforms() {
//checks if password exists in storage
let storedPassword = localStorage.getItem('createdPasswordstorage');
//if it doesn't exist, create password form displayed
if (storedPassword === null) {
document.getElementById('loginPassword').style.display = "none";
document.getElementById('createPassword').style.display = "block";
} else {
//if it exists, login for displayed
document.getElementById('loginPassword').style.display = "block";
document.getElementById('createPassword').style.display = "none";
}
}
loadforms();
</script>
</body>
</html>
