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
Go to the Google Cloud Console.
Create a new project or use an existing one.
Navigate to APIs & Services -- Library, search for "Books API" and enable it.
Go to APIs & Services Credentials.
Click Create Credentials -- API key -- copy your key.
Under Key restrictions, set "Application restrictions -- HTTP referrers" (e.g., localhost/*) for better security
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>
Explanation:-
The code is written in JavaScript and uses HTML and CSS for the UI.
The code fetches book data from the Google Books API using the 'fetchBooks' function, which takes a search query as an argument.
The 'renderBooks' function takes an array of book objects and creates a list of book elements , each containing the book's title, authors, and description.
The book elements are appended to the '#results' container.
The 'handleSearch' function is called when the search button is clicked or the Enter key is pressed in the search input field. It clears the results container, fetches the book data, and renders the book elements.
The code uses async/await syntax to handle the promise returned by the 'fetchBooks' function .
The code uses the 'fetch' API to make a GET request to the Google Books API, passing the search query as a query parameter.
The code uses the 'JSON.parse' method to parse the JSON response from the API into a JavaScript object.