Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Books API enhancement with better UI which is also responsive #221

Merged
merged 2 commits into from
Jul 20, 2024
Merged

Books API enhancement with better UI which is also responsive #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0e8978
Update index.html with flexbox and showdetails
Roshr2211 Jun 2, 2024
044a555
Update README.md
Roshr2211 Jun 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Existing_API_Collection/Books_API/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,5 @@ No special installation is required. Simply download the files and open index.ht
3. Click the "Search" button to fetch and display the search results.

### Screenshot
![image](https://github.com/Roshr2211/APIVerse/assets/136987759/5b472654-9467-4e1f-b8af-01deed8ddefe)

![](https://github.com/MohanRamSridhar/APIVerse/blob/9213cc20e28e6753e8532273d4126fb78d89e441/Existing_API_Collection/Books_API/booksapi.png)
80 changes: 66 additions & 14 deletions Existing_API_Collection/Books_API/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,63 @@
<title>Google Books API Example</title>
<style>
body {
font-family: Arial, sans-serif;
font-family: 'Arial', sans-serif;
padding: 20px;
background-color: #f4f4f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #5D5C61;
color: #3A84A0;
}
.search-bar {
margin-bottom: 20px;
}
#query {
width: 300px;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#query:focus {
border-color: #3A84A0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
button {
padding: 10px 15px;
background-color: #6D9DC5;
background-color: #3A84A0;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover {
background-color: #3A84A0;
background-color: #2A6478;
transform: translateY(-2px);
}
#results {
margin-top: 20px;
width: 100%;
max-width: 1200px;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.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);
width: 100%;
max-width: 250px;
box-sizing: border-box;
display: flex;
flex-direction: column;
Expand All @@ -72,18 +89,39 @@
color: #555;
text-align: center;
}
.book-details {
display: none;
transition: max-height 0.3s ease;
}
.book-details.show {
display: block;
}
.toggle-button {
background-color: #6D9DC5;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.toggle-button:hover {
background-color: #3A84A0;
}
</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 class="search-bar">
<input type="text" id="query" placeholder="Enter book title or author">
<button onclick="searchBooks()">Search</button>
</div>
<div id="results"></div>

<script>
function searchBooks() {
const query = document.getElementById('query').value;
fetch(`https://www.googleapis.com/books/v1/volumes?q=${query}`)
fetch(`https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(query)}`)
.then(response => response.json())
.then(data => {
const resultsDiv = document.getElementById('results');
Expand All @@ -98,20 +136,34 @@ <h1>Search for Books</h1>
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';
}

const toggleButton = document.createElement('button');
toggleButton.className = 'toggle-button';
toggleButton.textContent = 'Show Details';
toggleButton.onclick = () => {
const details = book.querySelector('.book-details');
const isVisible = details.classList.toggle('show');
toggleButton.textContent = isVisible ? 'Hide Details' : 'Show Details';
};

const details = document.createElement('div');
details.className = 'book-details';

const description = document.createElement('p');
description.textContent = item.volumeInfo.description || 'No description available.';
details.appendChild(description);

book.appendChild(thumbnail);
book.appendChild(title);
book.appendChild(author);
book.appendChild(description);
book.appendChild(toggleButton);
book.appendChild(details);
resultsDiv.appendChild(book);
});
})
Expand Down
Loading