Design a Guestbook in Tailwind CSS
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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: