Preview:
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 = "");
}
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