reg form ui - Posts - OneCompiler

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

        <!-- Email -->
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" required>
        </div>

        <!-- Mobile Number -->
        <div class="form-group">
            <label for="mobile">Mobile Number:</label>
            <div class="mobile-container">
                <select id="countryCode">
                    <option value="+1">+1 (USA)</option>
                    <option value="+91">+91 (India)</option>
                    <option value="+44">+44 (UK)</option>
                </select>
                <input type="tel" id="mobile" required>
            </div>
        </div>

        <!-- Address -->
        <div class="form-group">
            <label for="address">Address:</label>
            <textarea id="address" required></textarea>
        </div>

        <!-- Password -->
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" required>
        </div>

        <!-- Confirm Password -->
        <div class="form-group">
            <label for="confirmPassword">Confirm Password:</label>
            <input type="password" id="confirmPassword" required>
        </div>

        <!-- Register Button -->
        <button type="submit">Register</button>
    </form>
</div>

<!-- Acknowledgement Screen -->
<div class="acknowledgement" id="acknowledgement" style="display: none;">
    <h2 class="success-message">Consumer Registration Successful</h2>
    <p><strong>Customer User ID:</strong> <span id="customerId"></span></p>
    <p><strong>Customer Name:</strong> <span id="customerName"></span></p>
    <p><strong>Customer Email:</strong> <span id="customerEmail"></span></p>
    <button onclick="goBack()">Go Back</button>
</div>

<script src="script.js"></script>

</body> </html>

---css

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 0;
padding: 0;
}

.container {
background: white;
padding: 20px;
width: 40%;
margin: 50px auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
text-align: left;
}

h2 {
color: #333;
text-align: center;
}

/* Form Fields */
.form-group {
margin-bottom: 15px;
}

label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

input, select, textarea {
padding: 8px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}

/* Mobile Number Input */
.mobile-container {
display: flex;
gap: 10px;
}

.mobile-container select {
width: 30%;
}

.mobile-container input {
width: 68%;
}

/* Register Button */
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}

button:hover {
background-color: #218838;
}

/* Acknowledgement Screen */
.acknowledgement {
background: white;
padding: 20px;
width: 40%;
margin: 50px auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

.success-message {
color: green;
}

---js

document.getElementById("registrationForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission

// Get form values
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let countryCode = document.getElementById("countryCode").value;
let mobile = document.getElementById("mobile").value;
let address = document.getElementById("address").value;
let password = document.getElementById("password").value;
let confirmPassword = document.getElementById("confirmPassword").value;

// Validate password match
if (password !== confirmPassword) {
    alert("Passwords do not match!");
    return;
}

// Generate random customer ID
let customerId = "CUST" + Math.floor(1000 + Math.random() * 9000);

// Store in local storage
localStorage.setItem("id", customerId);
localStorage.setItem("name", name);
localStorage.setItem("email", email);
localStorage.setItem("mobile", mobile);
localStorage.setItem("address", address);

// Display acknowledgement screen
document.getElementById("customerId").textContent = customerId;
document.getElementById("customerName").textContent = name;
document.getElementById("customerEmail").textContent = email;

document.querySelector(".container").style.display = "none";
document.getElementById("acknowledgement").style.display = "block";

});

// Function to go back to the registration form
function goBack() {
document.getElementById("acknowledgement").style.display = "none";
document.querySelector(".container").style.display = "block";
}