script.js

const searchBtn = document.getElementById("searchBtn");
const searchInput = document.getElementById("searchInput");
const resultsDiv = document.getElementById("results");

searchBtn.addEventListener("click", () => {
    const query = searchInput.value.trim();
    if (query !== "") {
        fetchBooks(query);
    }
});

async function fetchBooks(query) {
    resultsDiv.innerHTML = "<p>Loading...</p>";
    try {
        const res = await fetch(`https://openlibrary.org/search.json?q=${query}`);
        const data = await res.json();

        if (data.docs.length === 0) {
            resultsDiv.innerHTML = "<p>No results found.</p>";
            return;
        }

        resultsDiv.innerHTML = data.docs.slice(0, 20).map(book => {
            const title = book.title || "No Title";
            const author = book.author_name ? book.author_name.join(", ") : "Unknown Author";
            const year = book.first_publish_year || "N/A";
            const coverId = book.cover_i;
            const coverUrl = coverId ? `https://covers.openlibrary.org/b/id/${coverId}-M.jpg` : "https://via.placeholder.com/200x280?text=No+Cover";
            return `<div class="card"><img src="${coverUrl}" alt="${title}">
          <h3>${title}</h3><p><strong>Author:</strong> ${author}</p><p><strong>Year:</strong> ${year}</p>
          <a href="https://openlibrary.org${book.key}" target="_blank">View More</a></div>`;
        }).join("");

    } catch (error) {
        resultsDiv.innerHTML = "<p>Error fetching data. Please try again.</p>";
        console.error(error);
    }
}