<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>The Guestbook</title>
<link href=
rel="stylesheet">
<style>
body {
background-color: #48bb78;
}
.guest-form-container {
max-height: 80vh;
overflow-y: auto;
}
</style>
</head>
<body class="flex justify-center items-center h-screen">
<div class="container mx-auto md:w-1/2 bg-white p-8
rounded-lg shadow-md guest-form-container">
<h1 class="text-3xl font-bold text-center mb-8"
>Guestbook</h1>
<form id="guestForm" class="space-y-4">
<div class="flex flex-col">
<label for="name" class="text-gray-700">
Name:</label>
<input type="text" id="name" name="name"
required
class="border border-gray-300 rounded-md px-4
py-2 focus:outline-none
focus:border-blue-500">
</div>
<div class="flex flex-col">
<label for="address" class="text-gray-700">
Address:</label>
<input type="text" id="address"
name="address" required
class="border border-gray-300 rounded-md px-4
py-2 focus:outline-none focus:border-blue-500">
</div>
<div class="flex flex-col">
<label for="mobile" class="text-gray-700">
Mobile:</label>
<input type="tel" id="mobile" name="mobile"
required pattern="[0-9]*"
class="border border-gray-300 rounded-md
px-4 py-2 focus:outline-none
focus:border-blue-500">
</div>
<div class="flex flex-col">
<label for="roomno" class="text-gray-700">
Room Number:</label>
<input type="text" id="roomno"
name="roomno" required
class="border border-gray-300 rounded-md
px-4 py-2 focus:outline-none
focus:border-blue-500">
</div>
<div class="flex justify-between">
<button type="submit"
class="bg-blue-500 text-white py-2 px-4
rounded-md hover:bg-blue-600 focus:outline-none">
Add Guest</button>
<button id="clearBtn"
class="bg-red-500 text-white py-2 px-4
rounded-md hover:bg-red-600
focus:outline-none">
Clear All</button>
</div>
</form>
<div id="guestList" class="mt-8"></div>
</div>
<script>
const guestForm = document.getElementById('guestForm');
const guestList = document.getElementById('guestList');
function createGuestCard(name, address, mobile, roomno) {
const guestCard = document.createElement('div');
guestCard.classList.add('bg-gray-200', 'p-4', 'rounded-md', 'mb-4');
guestCard.innerHTML = `
<h2 class="text-xl font-bold">${name}</h2>
<p><strong>Address:</strong> ${address}</p>
<p><strong>Mobile:</strong> ${mobile}</p>
<p><strong>Room Number:</strong> ${roomno}</p>
<div class="flex justify-between mt-2">
<button class="bg-red-500 text-white px-3 py-1
rounded-md hover:bg-red-600
focus:outline-none delete-btn">Delete</button>
</div>`;
return guestCard;
}
function addGuest(name, address, mobile, roomno) {
const guestCard = createGuestCard(name, address, mobile, roomno);
guestList.appendChild(guestCard);
}
function clearGuests() {
guestList.innerHTML = '';
}
guestForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const address = document.getElementById('address').value;
const mobile = document.getElementById('mobile').value;
const roomno = document.getElementById('roomno').value;
addGuest(name, address, mobile, roomno);
guestForm.reset();
});
guestList.addEventListener('click', function (e) {
if (e.target.classList.contains('delete-btn')) {
e.target.closest('.bg-gray-200').remove();
}
});
const clearBtn = document.getElementById('clearBtn');
clearBtn.addEventListener('click', clearGuests);
</script>
</body>
</html>