<div class="container">
<h1>Clinic Registration</h1>
<form id="registration-form">
<label for="ic-number">IC Number:</label>
<input type="text" id="ic-number" name="ic-number" required>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<button type="submit">Register</button>
</form>
<div id="verification-section" style="display:none;">
<h2>Enter Verification Code</h2>
<form id="verification-form">
<label for="verification-code">Verification Code:</label>
<input type="text" id="verification-code" name="verification-code" required>
<button type="submit">Verify</button>
</form>
</div>
<h2>Current Queue</h2>
<div id="queue-number" style="display:none;">Queue Number: <span
id="current-queue">0</span></div>
</div>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
.container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h1, h2 {
text-align: center;
form {
display: flex;
flex-direction: column;
label {
margin-top: 10px;
input {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
button {
padding: 10px;
margin-top: 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #218838;
#queue-number {
margin-top: 20px;
text-align: center;
@media (max-width: 600px) {
.container {
margin: 10px;
padding: 15px;
}
h1, h2 {
font-size: 1.5em;
label {
margin-top: 8px;
input, button {
padding: 8px;
margin-top: 4px;
button {
margin-top: 15px;
JavaScript
document.addEventListener('DOMContentLoaded', function() {
let currentQueueNumber = 0;
const verificationCode = "123456"; // Simulated verification code
let userEmail = '';
const registrationForm = document.getElementById('registration-form');
const verificationSection = document.getElementById('verification-section');
const verificationForm = document.getElementById('verification-form');
const queueNumberElement = document.getElementById('queue-number');
const currentQueueElement = document.getElementById('current-queue');
if (registrationForm && verificationSection && verificationForm && queueNumberElement &&
currentQueueElement) {
registrationForm.addEventListener('submit', function(event) {
event.preventDefault();
userEmail = document.getElementById('email').value;
// Send an HTTP POST request to your server to send the verification email
fetch('/send-verification-code', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email: userEmail })
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to send verification code');
return response.json();
})
.then(data => {
// Hide registration form and show verification section
registrationForm.style.display = 'none';
verificationSection.style.display = 'block';
alert(data.message); // Assuming the server sends back a message indicating success
})
.catch(error => {
console.error('Error sending verification code:', error);
alert('Failed to send verification code');
});
});
// Rest of the code remains the same...
} else {
console.error('One or more elements not found.');
});
