-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #189 from MohanRamSridhar/master
Google Books API
- Loading branch information
Showing
4 changed files
with
147 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # Google Books API Example | ||
|
|
||
| This is a simple web application that allows users to search for books using the Google Books API. The application is built with HTML, CSS, and JavaScript, and it fetches book data based on the user's query. | ||
|
|
||
| ### Features | ||
|
|
||
| - Search for books by title or author. | ||
| - Display search results with book thumbnails, titles, authors, and descriptions. | ||
| - Responsive design with a modern and clean user interface. | ||
|
|
||
| ### Installation | ||
|
|
||
| No special installation is required. Simply download the files and open index.html in a web browser. | ||
|
|
||
| ### Usage | ||
|
|
||
| 1. Open index.html in a web browser. | ||
| 2. Enter a book title or author in the search input field. | ||
| 3. Click the "Search" button to fetch and display the search results. | ||
|
|
||
| ### Screenshot | ||
|
|
||
|  |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Google Books API Example</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| padding: 20px; | ||
| background-color: #f4f4f9; | ||
| color: #333; | ||
| } | ||
| h1 { | ||
| color: #5D5C61; | ||
| } | ||
| #query { | ||
| width: 300px; | ||
| padding: 10px; | ||
| margin-right: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| } | ||
| button { | ||
| padding: 10px 15px; | ||
| background-color: #6D9DC5; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
| button:hover { | ||
| background-color: #3A84A0; | ||
| } | ||
| #results { | ||
| margin-top: 20px; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 20px; | ||
| } | ||
| .book { | ||
| background-color: #fff; | ||
| border: 1px solid #ddd; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| padding: 20px; | ||
| width: calc(33% - 40px); | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| } | ||
| .book:hover { | ||
| transform: translateY(-5px); | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| } | ||
| .book img { | ||
| max-width: 120px; | ||
| margin-bottom: 15px; | ||
| border-radius: 4px; | ||
| } | ||
| .book h2 { | ||
| font-size: 18px; | ||
| margin: 10px 0; | ||
| color: #333; | ||
| text-align: center; | ||
| } | ||
| .book p { | ||
| margin: 5px 0; | ||
| color: #555; | ||
| text-align: center; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Search for Books</h1> | ||
| <input type="text" id="query" placeholder="Enter book title or author"> | ||
| <button onclick="searchBooks()">Search</button> | ||
| <div id="results"></div> | ||
|
|
||
| <script> | ||
| function searchBooks() { | ||
| const query = document.getElementById('query').value; | ||
| fetch(`https://www.googleapis.com/books/v1/volumes?q=${query}`) | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| const resultsDiv = document.getElementById('results'); | ||
| resultsDiv.innerHTML = ''; | ||
| data.items.forEach(item => { | ||
| const book = document.createElement('div'); | ||
| book.className = 'book'; | ||
|
|
||
| const title = document.createElement('h2'); | ||
| title.textContent = item.volumeInfo.title; | ||
|
|
||
| const author = document.createElement('p'); | ||
| author.textContent = `Author: ${item.volumeInfo.authors ? item.volumeInfo.authors.join(', ') : 'N/A'}`; | ||
|
|
||
| const description = document.createElement('p'); | ||
| description.textContent = item.volumeInfo.description || 'No description available.'; | ||
|
|
||
| const thumbnail = document.createElement('img'); | ||
| if (item.volumeInfo.imageLinks && item.volumeInfo.imageLinks.thumbnail) { | ||
| thumbnail.src = item.volumeInfo.imageLinks.thumbnail; | ||
| } else { | ||
| thumbnail.src = 'https://via.placeholder.com/100'; | ||
| } | ||
|
|
||
| book.appendChild(thumbnail); | ||
| book.appendChild(title); | ||
| book.appendChild(author); | ||
| book.appendChild(description); | ||
| resultsDiv.appendChild(book); | ||
| }); | ||
| }) | ||
| .catch(error => console.error('Error fetching data:', error)); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters