AMS_Airline_2 - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Passenger Registration</title>  <style> body { background-color: teal; /* Page background color */ display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; }

    .registration-container {
        background-color: Gray94; /* Container background */
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        width: 400px;
        color: black; /* Font color */
    }

    .registration-container h2 {
        text-align: center;
    }

    .input-container {
        margin-bottom: 15px;
    }

    .input-container input,
    .input-container textarea {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 14px;
    }

    .registration-button {
        width: 100%;
        padding: 10px;
        background-color: DodgerBlue; /* Register button background */
        border: none;
        border-radius: 5px;
        color: white; /* Font color */
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .registration-button:hover {
        background-color: Cobalt; /* On hover background color */
    }

    .reset-button {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        background-color: grey;
        border: none;
        border-radius: 5px;
        color: white;
        font-size: 16px;
        cursor: pointer;
    }

    .error-message {
        color: red;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .success-message {
        color: green;
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>

</head> <body> <div class="registration-container"> <h2>Passenger Registration</h2> <div id="error-message" class="error-message"></div>  <form id="registrationForm"> <div class="input-container"> <label for="firstName">First Name:</label> <input type="text" id="firstName" maxlength="50" required> </div> <div class="input-container"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" maxlength="50" required> </div> <div class="input-container"> <label for="dob">DOB:</label> <input type="date" id="dob" required> </div> <div class="input-container"> <label for="email">Email ID:</label> <input type="email" id="email" required> </div> <div class="input-container"> <label for="address">Address:</label> <textarea id="address" maxlength="100" required></textarea> </div> <div class="input-container"> <label for="contact">Contact Number:</label> <input type="text" id="contact" maxlength="10" required> </div> <button type="button" class="registration-button" id="registerButton">Register</button> <button type="button" class="reset-button" id="resetButton">Reset</button> </form> <div id="success-message" class="success-message"></div>  </div>

<!-- Internal JavaScript for form validation -->
<script>
    document.getElementById('registerButton').addEventListener('click', function () {
        var firstName = document.getElementById('firstName').value;
        var lastName = document.getElementById('lastName').value;
        var dob = document.getElementById('dob').value;
        var email = document.getElementById('email').value;
        var address = document.getElementById('address').value;
        var contact = document.getElementById('contact').value;
        var errorMessage = document.getElementById('error-message');
        var successMessage = document.getElementById('success-message');

        // Clear messages
        errorMessage.innerHTML = '';
        successMessage.innerHTML = '';

        // Validation
        if (!firstName || !lastName || !dob || !email || !address || !contact) {
            errorMessage.innerHTML = "All fields are mandatory.";
            return;
        }

        if (new Date(dob) < new Date("1924-01-01")) {
            errorMessage.innerHTML = "Choose a date greater than 1/1/1924.";
            return;
        }

        if (contact.length !== 10 || isNaN(contact)) {
            errorMessage.innerHTML = "Enter a valid contact number.";
            return;
        }

        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
            errorMessage.innerHTML = "Enter a valid mail id.";
            return;
        }

        // Generate Passenger ID and Password
        var passengerId = Math.floor(Math.random() * 100000);
        var password = firstName.slice(0, 4) + "@123";

        // Display Success Message
        successMessage.innerHTML = "Passenger Registration is successful. <br> Passenger ID: " + passengerId + "<br> Password: " + password;
    });

    document.getElementById('resetButton').addEventListener('click', function () {
        if (confirm("Is it Okay to reset the fields?")) {
            document.getElementById('registrationForm').reset();
            document.getElementById('error-message').innerHTML = ''; // Clear error message
            document.getElementById('success-message').innerHTML = ''; // Clear success message
        }
    });
</script>

</body> </html>