class User {
constructor(username, password, email) {
this.username = username;
this.password = password;
this.email = email;
}
}
let users = [];
let loggedInUser = null;
function registerUser() {
const username = document.getElementById('reg-username').value.trim();
const password = document.getElementById('reg-password').value.trim();
const email = document.getElementById('reg-email').value.trim();
const regMsg = document.getElementById('reg-msg');
if (username === "" || password === "" || email === "") {
regMsg.textContent = "All fields are required!";
return;
}
if (users.find(user => user.username === username)) {
regMsg.textContent = "Username already taken!";
return;
}
const newUser = new User(username, password, email);
users.push(newUser);
regMsg.textContent = "Registration successful!";
clearFields(['reg-username', 'reg-password', 'reg-email']);
}
function loginUser() {
const username = document.getElementById('login-username').value.trim();
const password = document.getElementById('login-password').value.trim();
const loginMsg = document.getElementById('login-msg');
if (username === "" || password === "") {
loginMsg.textContent = "All fields are required!";
return;
}
const user = users.find(user => user.username === username && user.password === password);
if (user) {
loggedInUser = user;
showUserProfile(user);
loginMsg.textContent = "";
} else {
loginMsg.textContent = "Invalid username or password!";
}
}
function showUserProfile(user) {
document.getElementById('profile-username').textContent = user.username;
document.getElementById('profile-email').textContent = user.email;
document.getElementById('registration-form').style.display = 'none';
document.getElementById('login-form').style.display = 'none';
document.getElementById('profile').style.display = 'block';
document.getElementById('payment-form').style.display = 'block';
}
function logoutUser() {
loggedInUser = null;
document.getElementById('registration-form').style.display = 'block';
document.getElementById('login-form').style.display = 'block';
document.getElementById('profile').style.display = 'none';
document.getElementById('payment-form').style.display = 'none';
}
function processPayment() {
const cardNumber = document.getElementById('card-number').value.trim();
const expiryDate = document.getElementById('expiry-date').value.trim();
const cvv = document.getElementById('cvv').value.trim();
const paymentMsg = document.getElementById('payment-msg');
if (cardNumber === "" || expiryDate === "" || cvv === "") {
paymentMsg.textContent = "All fields are required!";
return;
}
if (cardNumber.length !== 16 || cvv.length !== 3) {
paymentMsg.textContent = "Invalid card details!";
return;
}
paymentMsg.textContent = "Payment successful!";
clearFields(['card-number', 'expiry-date', 'cvv']);
}
function clearFields(fields) {
fields.forEach(field => document.getElementById(field).value = "");
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter