Registration ui - Posts

html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customer Registration</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="registration-container"> <h2>Customer Registration</h2> <form id="registrationForm"> <fieldset> <legend>Personal Information</legend> <label for="customerName">Customer Name:</label> <input type="text" id="customerName" name="customerName" maxlength="50" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>

            <label for="countryCode">Country Code:</label>
            <select id="countryCode" name="countryCode">
                <option value="+1">+1</option>
                <option value="+44">+44</option>
                <option value="+91">+91</option>
                <!-- Add more country codes as needed -->
            </select>

            <label for="mobileNumber">Mobile Number:</label>
            <input type="text" id="mobileNumber" name="mobileNumber" maxlength="10" pattern="\d{10}" required>

            <label for="address">Address:</label>
            <textarea id="address" name="address" required></textarea>
        </fieldset>
        <fieldset>
            <legend>Username and Password</legend>
            <label for="userId">User ID:</label>
            <input type="text" id="userId" name="userId" minlength="5" maxlength="20" required>

            <label for="password">Password:</label>
            <input type="password" id="password" name="password" maxlength="30" required>

            <label for="confirmPassword">Confirm Password:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" maxlength="30" required>
        </fieldset>
        <fieldset>
            <legend>Preferences</legend>
            <label for="preferences">Preferences:</label>
            <textarea id="preferences" name="preferences"></textarea>
        </fieldset>
        <button type="submit">Register</button>
        <button type="reset">Reset</button>
        <p id="error-message"></p>
    </form>
    <div id="acknowledgment" style="display:none;">
        <h2>Registration Acknowledgment</h2>
        <p style="color:green;">Consumer Registration successful</p>
        <p id="generatedUsername"></p>
    </div>
</div>
<script src="script.js"></script>

</body> </html>

css:

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.registration-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}

h2 {
margin-bottom: 20px;
}

label {
display: block;
margin: 10px 0 5px;
}

input, select, textarea, button {
width: 100%;
padding: 8px;
box-sizing: border-box;
margin-bottom: 10px;
}

button {
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

#error-message {
color: red;
}

#acknowledgment {
text-align: center;
}

js:

document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();

var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var errorMessage = document.getElementById('error-message');

if (password !== confirmPassword) {
    errorMessage.textContent = 'Passwords do not match.';
    return;
}

// Simulate a registration process
simulateRegistrationProcess()
    .then(success => {
        var acknowledgmentMessage = document.getElementById('acknowledgment-message');
        var generatedUsername = 'user' + Math.floor(Math.random() * 10000);
        document.getElementById('generatedUsername').textContent = 'Customer Username: ' + generatedUsername;

        if (success) {
            acknowledgmentMessage.textContent = 'Consumer Registration successful';
            acknowledgmentMessage.className = 'success';
        } else {
            acknowledgmentMessage.textContent = 'Registration failed. Please try after some time.';
            acknowledgmentMessage.className = 'failure';
        }

        document.getElementById('registrationForm').style.display = 'none';
        document.getElementById('acknowledgment').style.display = 'block';
    })
    .catch(error => {
        errorMessage.textContent = 'An error occurred. Please try again.';
    });

});