Janejane,
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<a href="signin.html">Sign in</a> | <a href="signup.html">Sign up</a>
</body>
</html>
signup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign up</title>
<script src="signup.js"></script>
</head>
<body>
<form name="signup">
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button>Sign up</button>
</form>
</body>
</html>
signup.js
document.addEventListener('DOMContentLoaded', function() {
this.signup.addEventListener('submit', function(event) {
event.preventDefault();
const database = JSON.parse(localStorage.getItem('database')) || [];
const newUser = { username: this.username.value, email: this.email.value, password: this.password.value };
const isUser = database.some(oldUser => newUser.username == oldUser.username);
if (isUser) return alert('Username is taken');
database.push(newUser);
localStorage.setItem('database', JSON.stringify(database));
location.href = 'signin.html';
});
});
signin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign in</title>
<script src="signin.js"></script>
</head>
<body>
<form name="signin">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button>Sign in</button>
</form>
</body>
</html>
signin.js
document.addEventListener('DOMContentLoaded', function() {
this.signin.addEventListener('submit', function(event) {
event.preventDefault();
const database = JSON.parse(localStorage.getItem('database')) || [];
const newUser = { username: this.username.value, password: this.password.value };
const isUser = database.some(oldUser => newUser.username == oldUser.username && newUser.password == oldUser.password);
if (!isUser) return alert('Incorrect username or password');
location.href = 'content.html';
});
});
content.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Content</title>
</head>
<body>
Content
</body>
</html>