Code For A Hotel Booking System – Html , Css and JavaScript

Posted on by admin

Feel Free To Use This Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hotel Booking in Nepal</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 1rem;
            text-align: center;
            position: relative;
        }
        header::after {
            content: "🏨";
            font-size: 2rem;
            position: absolute;
            right: 1rem;
            top: 1rem;
            animation: bounce 1s infinite alternate;
        }
        .search-bar {
            display: flex;
            justify-content: center;
            padding: 2rem;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .search-bar input, .search-bar select, .search-bar button {
            margin: 0 0.5rem;
            padding: 0.5rem;
        }
        .hotel-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 2rem;
        }
        .hotel {
            background-color: white;
            width: 30%;
            margin: 1rem;
            padding: 1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        .hotel img {
            width: 100%;
            height: auto;
        }
        .hotel h3 {
            margin-top: 0.5rem;
        }
        .hotel p {
            font-size: 0.9rem;
        }
        .hotel .price {
            color: #4CAF50;
            font-size: 1.2rem;
            font-weight: bold;
        }
        .hotel .booked-count {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background-color: #ffeb3b;
            padding: 0.2rem 0.5rem;
            border-radius: 5px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        .hotel .booked-count::before {
            content: "👥";
            margin-right: 0.3rem;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        #bookingForm {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 2rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        #bookingForm input, #bookingForm select {
            display: block;
            width: 100%;
            margin: 1rem 0;
            padding: 0.5rem;
        }
        #bookingForm button {
            padding: 0.5rem 1rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        #confirmationPage {
            display: none;
            padding: 2rem;
            background-color: white;
            margin: 2rem auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            animation: fadeIn 1s;
        }
        #confirmationPage h2 {
            text-align: center;
        }
        #confirmationPage .details {
            margin: 2rem 0;
            background-color: #f0f0f0;
            padding: 1rem;
            border-radius: 5px;
        }
        #confirmationPage .details p {
            margin: 0.5rem 0;
            display: flex;
            align-items: center;
        }
        #confirmationPage .details p::before {
            content: "✅";
            margin-right: 0.5rem;
            font-size: 1.2rem;
        }
        #confirmationPage button {
            padding: 0.5rem 1rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 1rem;
        }
        #confirmationPage button.print {
            background-color: #2196F3;
        }

        @keyframes bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>

    <header>
        <h1>Hotel Booking in Nepal</h1>
    </header>

    <div class="search-bar">
        <input type="text" id="location" placeholder="Enter Location (e.g., Kathmandu, Pokhara)">
        <input type="date" id="checkin" placeholder="Check-in Date">
        <input type="date" id="checkout" placeholder="Check-out Date">
        <select id="guests">
            <option value="1">1 Guest</option>
            <option value="2">2 Guests</option>
            <option value="3">3 Guests</option>
            <option value="4">4 Guests</option>
        </select>
        <button onclick="searchHotels()">Search</button>
    </div>

    <div class="hotel-list" id="hotelList">
        <!-- Dynamic hotel listings will appear here -->
    </div>

    <div id="bookingForm">
        <h3>Booking Details</h3>
        <input type="text" id="name" placeholder="Full Name" required>
        <input type="text" id="address" placeholder="Address" required>
        <input type="text" id="phone" placeholder="Phone Number" required>
        <input type="email" id="email" placeholder="Email" required>
        <input type="number" id="age" placeholder="Age" required>
        <select id="gender" required>
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Other">Other</option>
        </select>
        <button onclick="confirmBooking()">Confirm Booking</button>
    </div>

    <div id="confirmationPage">
        <h2>🎉 Booking Confirmation 🎉</h2>
        <div class="details" id="confirmationDetails"></div>
        <button class="print" onclick="window.print()">Print</button>
        <button onclick="downloadPDF()">Download PDF</button>
        <button onclick="downloadJPEG()">Download JPEG</button>
        <button onclick="sendEmail()">Send to Email</button>
    </div>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.0/jspdf.umd.min.js"></script>

    <script>
        const basePrice = 2000;
        const hotels = [
            { name: "Hotel Everest", location: "Kathmandu", image: "https://images.pexels.com/photos/258154/pexels-photo-258154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 5 },
            { name: "Lakeside Resort", location: "Pokhara", image: "https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 12 },
            { name: "Chitwan Paradise", location: "Chitwan", image: "https://images.pexels.com/photos/189296/pexels-photo-189296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 8 },
            { name: "Himalayan View", location: "Nagarkot", image: "https://images.pexels.com/photos/338504/pexels-photo-338504.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 10 },
            // Additional hotels with booking counts
            { name: "Lumbini Garden Hotel", location: "Lumbini", image: "https://images.pexels.com/photos/164595/pexels-photo-164595.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 7 },
            { name: "Gorkha Heritage", location: "Gorkha", image: "https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 3 },
            { name: "Janakpur Palace Hotel", location: "Janakpur", image: "https://images.pexels.com/photos/279746/pexels-photo-279746.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 4 },
            { name: "Butwal Inn", location: "Butwal", image: "https://images.pexels.com/photos/1743229/pexels-photo-1743229.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 6 },
            { name: "Dhulikhel View Lodge", location: "Dhulikhel", image: "https://images.pexels.com/photos/262047/pexels-photo-262047.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 9 },
            { name: "Palpa Guest House", location: "Tansen", image: "https://images.pexels.com/photos/3201758/pexels-photo-3201758.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 11 },
            { name: "Ilam Tea Garden Resort", location: "Ilam", image: "https://images.pexels.com/photos/1410227/pexels-photo-1410227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 5 },
            { name: "Biratnagar Hotel", location: "Biratnagar", image: "https://images.pexels.com/photos/4915547/pexels-photo-4915547.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 3 },
            { name: "Simara Paradise", location: "Simara", image: "https://images.pexels.com/photos/4992454/pexels-photo-4992454.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 6 },
            { name: "Nepalgunj Haven", location: "Nepalgunj", image: "https://images.pexels.com/photos/6587902/pexels-photo-6587902.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 4 },
            { name: "Bhairahawa Comfort", location: "Bhairahawa", image: "https://images.pexels.com/photos/5461590/pexels-photo-5461590.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 8 },
            { name: "Dharan Sunshine Hotel", location: "Dharan", image: "https://images.pexels.com/photos/189293/pexels-photo-189293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 7 },
            { name: "Jhapa Peace Hotel", location: "Jhapa", image: "https://images.pexels.com/photos/1714430/pexels-photo-1714430.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 4 },
            { name: "Birtamode Cozy Inn", location: "Birtamode", image: "", bookings: 9 },
            { name: "Hetauda Hotel Plaza", location: "Hetauda", image: "https://images.pexels.com/photos/2736388/pexels-photo-2736388.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 5 },
            { name: "Ramechhap Valley Resort", location: "Ramechhap", image: "https://images.pexels.com/photos/3659683/pexels-photo-3659683.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", bookings: 3 }
        ];

        function searchHotels() {
            const location = document.getElementById("location").value.toLowerCase();
            const hotelList = document.getElementById("hotelList");
            hotelList.innerHTML = "";
            
            hotels.forEach(hotel => {
                if (hotel.location.toLowerCase().includes(location)) {
                    const hotelElement = document.createElement("div");
                    hotelElement.classList.add("hotel");
                    hotelElement.innerHTML = `
                        <img src="${hotel.image}" alt="${hotel.name}">
                        <h3>${hotel.name}</h3>
                        <p>Location: ${hotel.location}</p>
                        <p class="price">Price: Rs. ${basePrice + (basePrice * 0.10)}</p>
                        <p class="booked-count">${hotel.bookings} booked</p>
                        <button onclick="openBookingForm('${hotel.name}', '${hotel.location}')">Book Now</button>
                    `;
                    hotelList.appendChild(hotelElement);
                }
            });
        }

        function openBookingForm(hotelName, hotelLocation) {
            document.getElementById("bookingForm").style.display = "block";
            document.getElementById("bookingForm").dataset.hotelName = hotelName;
            document.getElementById("bookingForm").dataset.hotelLocation = hotelLocation;
        }

        function confirmBooking() {
            const name = document.getElementById("name").value;
            const address = document.getElementById("address").value;
            const phone = document.getElementById("phone").value;
            const email = document.getElementById("email").value;
            const age = document.getElementById("age").value;
            const gender = document.getElementById("gender").value;
            const hotelName = document.getElementById("bookingForm").dataset.hotelName;
            const hotelLocation = document.getElementById("bookingForm").dataset.hotelLocation;

            document.getElementById("bookingForm").style.display = "none";

            const confirmationDetails = document.getElementById("confirmationDetails");
            confirmationDetails.innerHTML = `
                <p><strong>Name:</strong> ${name}</p>
                <p><strong>Address:</strong> ${address}</p>
                <p><strong>Phone:</strong> ${phone}</p>
                <p><strong>Email:</strong> ${email}</p>
                <p><strong>Age:</strong> ${age}</p>
                <p><strong>Gender:</strong> ${gender}</p>
                <p><strong>Hotel:</strong> ${hotelName}</p>
                <p><strong>Location:</strong> ${hotelLocation}</p>
            `;

            document.getElementById("confirmationPage").style.display = "block";

            hotels.forEach(hotel => {
                if (hotel.name === hotelName) {
                    hotel.bookings += 1;
                }
            });
            searchHotels();
        }

        function downloadPDF() {
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF();
            pdf.text(document.getElementById("confirmationDetails").innerText, 10, 10);
            pdf.save("booking-confirmation.pdf");
        }

        function downloadJPEG() {
            html2canvas(document.getElementById("confirmationPage")).then(canvas => {
                const link = document.createElement('a');
                link.href = canvas.toDataURL("image/jpeg");
                link.download = "booking-confirmation.jpeg";
                link.click();
            });
        }

        function sendEmail() {
            const email = document.getElementById("email").value;
            alert(`Booking confirmation sent to ${email} ✉️`);
        }
    </script>
</body>
</html>
HTML

Compiled Code

Leave a Reply

Your email address will not be published. Required fields are marked *

Resize text
Scroll to Top