Merge pull request #221 from Roshr2211/master

Books API enhancement with better UI which is also responsive
dishamodi0910 · Jul 20, 2024 · 5c09a3e · 5c09a3e
2 parents ff8b76d + 044a555
commit 5c09a3e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 15 deletions.
diff --git a/Existing_API_Collection/Books_API/README.md b/Existing_API_Collection/Books_API/README.md
@@ -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)
diff --git a/Existing_API_Collection/Books_API/index.html b/Existing_API_Collection/Books_API/index.html
@@ -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;
@@ -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');
@@ -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);
                     });
                 })