Create a Guestbook using HTML CSS and JavaScript
Last Updated :
17 Nov, 2023
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.
Preview
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
<!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
body {
background-color: green;
justify-content: center;
display: flex;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.container {
width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
}
.container h1 {
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.4s 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 h2 {
margin: 0;
}
.guest-card p {
margin: 5px 0;
}
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...