How to Build a Hotel Management System in HTML, CSS, and JavaScript

In this tutorial, we’ll create a fully functional Hotel Management System with advanced features, including:

A user-friendly Admin Dashboard to manage room bookings.
Payment Integration using Stripe or PayPal for secure transactions.

Let’s get started step by step!

1. HTML Structure

The foundation of our system includes sections for user login, room booking, payment, and the admin dashboard.

Key Elements in the HTML

Login Section: Allows users to log in as customers or admins.
Booking Form: Captures room type, number of nights, and customer details.
Payment Section: Enables secure payments.
Admin Dashboard: Displays all bookings for admins to manage.

Here’s the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hotel Management System</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Hotel Management System</h1>
  </header>

  <main>
    <!-- Login Section -->
    <section id="login-form">
      <h2>User Login</h2>
      <form id="loginForm">
        <label for="username">Username:</label>
        <input type="text" id="username" required>
        <label for="password">Password:</label>
        <input type="password" id="password" required>
        <button type="submit">Login</button>
      </form>
    </section>

    <!-- Booking Form -->
    <section id="booking-form" style="display: none;">
      <h2>Book a Room</h2>
      <form id="roomForm">
        <label for="name">Name:</label>
        <input type="text" id="name" required>
        <label for="roomType">Room Type:</label>
        <select id="roomType" required>
          <option value="Single">Single - $50/night</option>
          <option value="Double">Double - $80/night</option>
          <option value="Suite">Suite - $120/night</option>
        </select>
        <label for="nights">Nights:</label>
        <input type="number" id="nights" min="1" required>
        <button type="submit">Book Now</button>
      </form>
    </section>

    <!-- Payment Section -->
    <section id="payment-section" style="display: none;">
      <h2>Payment</h2>
      <form id="paymentForm">
        <label for="cardName">Cardholder Name:</label>
        <input type="text" id="cardName" required>
        <label for="cardNumber">Card Number:</label>
        <input type="text" id="cardNumber" required>
        <label for="expDate">Expiry Date:</label>
        <input type="text" id="expDate" placeholder="MM/YY" required>
        <label for="cvc">CVC:</label>
        <input type="text" id="cvc" required>
        <button type="submit">Pay Now</button>
      </form>
    </section>

    <!-- Admin Dashboard -->
    <section id="admin-dashboard" style="display: none;">
      <h2>Admin Dashboard</h2>
      <button id="viewBookings">View All Bookings</button>
      <ul id="adminBookingList"></ul>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>

2. CSS Styling

The CSS adds style and structure to the system, ensuring a clean, professional, and responsive design.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem 0;
}

main {
  max-width: 600px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

form label, form input, form select {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

3. JavaScript Functionality

The JavaScript handles login validation, booking data storage, and simulated payments.

Key Features

Login System: Validates user credentials and determines admin access.
Booking System: Calculates total cost dynamically and stores booking details.
Admin Dashboard: Allows admins to view and manage all bookings.
Payment Integration: Mock payment functionality (ready for Stripe or PayPal).

const roomPrices = {
  Single: 50,
  Double: 80,
  Suite: 120,
};

// User credentials
const users = {
  admin: "password123",
};

// Login functionality
document.getElementById("loginForm").addEventListener("submit", (event) => {
  event.preventDefault();

  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  if (users[username] === password) {
    alert("Login successful!");
    document.getElementById("login-form").style.display = "none";

    if (username === "admin") {
      document.getElementById("admin-dashboard").style.display = "block";
    } else {
      document.getElementById("booking-form").style.display = "block";
      document.getElementById("payment-section").style.display = "block";
    }
  } else {
    alert("Invalid username or password!");
  }
});

// Booking functionality
document.getElementById("roomForm").addEventListener("submit", (event) => {
  event.preventDefault();

  const name = document.getElementById("name").value;
  const roomType = document.getElementById("roomType").value;
  const nights = parseInt(document.getElementById("nights").value, 10);
  const cost = roomPrices[roomType] * nights;

  const booking = { name, roomType, nights, cost };
  let bookings = JSON.parse(localStorage.getItem("bookings")) || [];
  bookings.push(booking);
  localStorage.setItem("bookings", JSON.stringify(bookings));

  alert("Booking successful! Please proceed to payment.");
  document.getElementById("roomForm").reset();
});

// Payment functionality
document.getElementById("paymentForm").addEventListener("submit", (event) => {
  event.preventDefault();
  alert("Payment successful! Thank you for booking.");
  document.getElementById("paymentForm").reset();
});

// Admin Dashboard
document.getElementById("viewBookings").addEventListener("click", () => {
  const bookings = JSON.parse(localStorage.getItem("bookings")) || [];
  const adminBookingList = document.getElementById("adminBookingList");
  adminBookingList.innerHTML = "";

  bookings.forEach((booking, index) => {
    const listItem = document.createElement("li");
    listItem.innerHTML = `
      <strong>${index + 1}. ${booking.name}</strong> - ${booking.roomType} for ${booking.nights} nights. Total: $${booking.cost}
    `;
    adminBookingList.appendChild(listItem);
  });
});