The Guestbook is a web application designed to collect guest information including their name, address, mobile number, and room number. It provides a simple and intuitive interface for the users to input their details and view them in a list format.
Prerequisites
Approach
- In this approach, we are Creating a form with Name, address, Mobile no, and room number.
- On submitting that information it will append a div to the bottom of the form and the field of the form will get empty for further information.
- By using the classes of Tailwind CSS we are making it responsive for small devices.
- We are creating a delete button for every guest so that we can delete that guest.
- We are also creating a Delete All button that will delete all the guest list at once.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!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 >
|
Output:
Article Tags :
Recommended Articles