Untitled
unknown
plain_text
a month ago
2.9 kB
3
Indexable
<!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...
Leave a Comment