script.js

document.addEventListener('DOMContentLoaded', function() {
    const searchImg = document.querySelector('img[alt="search"]');
    const searchInput = document.querySelector('.search-bar');
    const searchResults = document.getElementById('search-results');

    searchImg.addEventListener('click', function() {
        const query = searchInput.value.trim();
        
        if (query === '') {
            searchResults.innerHTML = '<p style="color: red;">Please enter a hotel name to search.</p>';
            return;
        }

        // Display search results below the search bar
        searchResults.innerHTML = `<p style="color: green;">Searching for: <strong>${query}</strong></p>`;
    });

    // Clear search results when input is emptied
    searchInput.addEventListener('input', function() {
        if (searchInput.value.trim() === '') {
            searchResults.innerHTML = '';
        }
    });

    // Also allow search on Enter key
    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            searchImg.click();
        }
    });

    // Clear search results when input loses focus and is empty
    searchInput.addEventListener('blur', function() {
        if (searchInput.value.trim() === '') {
            searchResults.innerHTML = '';
        }
    });
});