Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Information Viewer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Book Information Viewer</h1>
    </header>
    <main>
        <section>
            <h2>Search for a Book</h2>
            <input type="text" id="search" placeholder="Enter book title...">
            <p id="total-books">Total books available: 0</p>
            <div id="books"></div>
            <p id="no-books-message" style="display: none;">No books found.</p>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>




document.addEventListener('DOMContentLoaded', () => {
    const books = [
        { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', description: 'A novel set in the Jazz Age.' },
        { title: 'To Kill a Mockingbird', author: 'Harper Lee', description: 'A novel about racial injustice.' },
        { title: '1984', author: 'George Orwell', description: 'A dystopian novel about totalitarianism.' },
        { title: 'Moby Dick', author: 'Herman Melville', description: 'A novel about the quest to catch a giant whale.' },
        { title: 'Pride and Prejudice', author: 'Jane Austen', description: 'A novel about manners and matrimonial machinations.' }
    ];

    const searchInput = document.getElementById('search');
    const booksDiv = document.getElementById('books');
    const noBooksMessage = document.getElementById('no-books-message');
    const totalBooks = document.getElementById('total-books');

    function displayBooks(filteredBooks) {
        booksDiv.innerHTML = '';
        if (filteredBooks.length > 0) {
            noBooksMessage.style.display = 'none';
            filteredBooks.forEach(book => {
                const bookDiv = document.createElement('div');
                bookDiv.innerHTML = `
                    <h2>${book.title}</h2>
                    <p><strong>Author:</strong> ${book.author}</p>
                    <p>${book.description}</p>
                `;
                booksDiv.appendChild(bookDiv);
            });
        } else {
            noBooksMessage.style.display = 'block';
        }
    }

    function filterBooks() {
        const searchTerm = searchInput.value.toLowerCase();
        const filteredBooks = books.filter(book => book.title.toLowerCase().includes(searchTerm));
        displayBooks(filteredBooks);
    }

    function updateTotalBooksCount() {
        totalBooks.textContent = `Total books available: ${books.length}`;
    }

    searchInput.addEventListener('input', filterBooks);

    // Display all books on initial load
    displayBooks(books);
    updateTotalBooksCount();
});
Editor is loading...