Book Finder App using the Google Books API
Book Finder App is a simple web application that allows users to search for books by title, author, or ISBN. The app uses the Google Books API to fetch book data and display it in a user-friendly interface. The app also includes features like sorting and filtering books based on their title, author, or publication date. The app is built using HTML, CSS, and JavaScript, with a focus on asynchronous programming using async/await.
How to Get a Google Books API Key
Code - Book Finder App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Finder</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
color: #333;
}
.app {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 6px;
}
input {
width: calc(100% - 110px);
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px 20px;
}
#results {
margin-top: 20px;
}
.book {
display: flex;
margin-bottom: 20px;
}
.book img {
width: 100px;
height: auto;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="app">
<h1>📚 Book Finder</h1>
<input type="text" id="search" placeholder="Enter title or author...">
<button id="btn">Search</button>
<div id="results"></div>
</div>
<script>
const API_KEY = "YOUR_API_KEY_HERE";
async function fetchBooks(query) {
const url = `https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(query)}&key=${API_KEY}`;
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Network response was not ok");
const data = await res.json();
return data.items || [];
} catch (err) {
console.error(err);
throw new Error("Failed to fetch books");
}
}
function renderBooks(books) {
const container = document.getElementById("results");
container.innerHTML = "";
if (books.length === 0) {
container.innerHTML = "<p>No books found. Try another search.</p>";
return;
}
books.forEach((item) => {
const info = item.volumeInfo;
const img = info.imageLinks?.thumbnail || "";
const title = info.title || "No title available";
const authors = (info.authors || []).join(", ");
const desc = info.description || "No description available";
const bookEl = document.createElement("div");
bookEl.className = "book";
bookEl.innerHTML = `
<img src="${img}" alt="Book cover">
<div>
<h3>${title}</h3>
<p><em>${authors}</em></p>
<p>${desc.substring(0, 200)}...</p>
</div>
`;
container.appendChild(bookEl);
});
}
async function handleSearch() {
const query = document.getElementById("search").value.trim();
if (!query) return alert("Please enter a search term.");
document.getElementById("results").innerHTML = "<p>Loading...</p>";
try {
const books = await fetchBooks(query);
renderBooks(books);
} catch (err) {
document.getElementById("results").innerHTML = `<p style="color:red;">${err.message}</p>`;
}
}
document.getElementById("btn").addEventListener("click", handleSearch);
document.getElementById("search").addEventListener("keypress", e => {
if (e.key === "Enter") handleSearch();
});
</script>
</body>
</html>