Create a Guestbook using HTML CSS and JavaScript
This article will show how to create a GuestBook using HTML, CSS, and JavaScript that allows users to add their name, mobile number, room number, and address to the guestbook. We have written a code that generates a card with multiple input boxes and a submit button to store the guest’s information in the guestbook.
Approach
- First create an HTML card and center in the window, including multiple “input” boxes and a “submit” button to store guest information.
- Create a CSS file to style your guestbook form. Style the form, input fields, and guestbook entries to make it visually appealing.
- Create a JavaScript file to handle form submissions.
- Add dynamically guestbook entries to the webpage with the use of innerHTML.
Example: This example describes the basic implementation to create a guestbook using HTML, CSS, and JavaScript.
Javascript
const guestForm = document.getElementById( 'guestForm' ); const guestList = document.getElementById( 'guestList' ); 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; const guestCard = document.createElement( 'div' ); guestCard.classList.add( 'guest-card' ); guestCard.innerHTML = ` <h2>${name}</h2> <p><strong>Address:</strong> ${address}</p> <p><strong>Mobile:</strong> ${mobile}</p> <p><strong>Room Number:</strong> ${roomno}</p>`; guestList.appendChild(guestCard); guestForm.reset(); }); |
HTML
<!-- index.html --> <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Guestbook</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div class = "container" > < h1 >GuestBook</ h1 > < form id = "guestForm" > < div class = "form-input" > < label for = "name" >Name:</ label > < input type = "text" id = "name" name = "name" required> </ div > < div class = "form-input" > < label for = "address" >Address:</ label > < input type = "text" id = "address" name = "address" required> </ div > < div class = "form-input" > < label for = "mobile" >Mobile:</ label > < input type = "tel" id = "mobile" name = "mobile" required> </ div > < div class = "form-input" > < label for = "roomno" > Room Number: </ label > < input type = "text" id = "roomno" name = "roomno" required> </ div > < div class = "btn" >< button type = "submit" > Add Guest </ button ></ div > </ form > < div id = "guestList" ></ div > </ div > < script src = "script.js" ></ script > </ body > </ html > |
CSS
/* style.css */ body { background-color : green ; justify- content : center ; display : flex; align-items: center ; height : 100 vh; font-family : Arial , sans-serif ; } .container { width : 400px ; padding : 20px ; background-color : #fff ; border-radius: 8px ; } .container h 1 { text-align : center ; } .form-input { margin-bottom : 11px ; } .form-input label { display : block ; margin-bottom : 5px ; } .form-input input { width : 80% ; padding : 10px ; border : 1px solid #ccc ; border-radius: 5px ; font-family : Arial , Helvetica , sans-serif ; font-size : 12px ; } .btn button { cursor : pointer ; background-color : #007BFF ; transition: background-color 0.4 s ease; color : #fff ; border : none ; padding : 10px 20px ; border-radius: 3px ; font-size : 12px ; } .guest-card { border : 1px solid #ccc ; padding : 5px ; margin : 5px 0 ; background-color : #fff ; border-radius: 5px ; box-shadow: 0 0 5px rgba( 0 , 0 , 0 , 0.3 ); } .btn button:hover { background-color : #394b5e ; } .guest-card h 2 { margin : 0 ; } .guest-card p { margin : 5px 0 ; } |
Output: