Merge pull request #39 from WSU-4110/eunice-shobowale-dashboard2

Eunice shobowale dashboard2
WSU-4110 · Nov 13, 2024 · 54726d8 · 54726d8
2 parents 2961857 + 0b9d032
commit 54726d8
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 0 deletions.
diff --git a/public/webpages/css/browse.css b/public/webpages/css/browse.css
@@ -0,0 +1,32 @@
+
+
+.book-card {
+  display: flex;
+  background-color: white;
+  padding: 1.5em;
+  border-radius: 12px;
+  width: 200px; /* Fixed width for larger size */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  text-align: center;
+}
+
+.book-card img {
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.book-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+
+#all-books-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 20px;
+  padding: 20px;
+}
diff --git a/public/webpages/html/browse.html b/public/webpages/html/browse.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Browse All Books</title>
+  <link rel="stylesheet" href="../css/browse.css" />
+  <link rel="stylesheet" href="../css/dashboard.css" />
+</head>
+<body>
+  <header>
+    <h1>Browse All Books</h1>
+  </header>
+  <main>
+    <section id="all-books-container" class="books-grid">
+      <!-- Books will be loaded here -->
+    </section>
+  </main>
+  <footer>
+    <p>&copy; 2024 PageTurners. All Rights Reserved.</p>
+  </footer>
+
+  <script>
+    async function fetchAllBooks() {
+      const API_KEY = 'AIzaSyDHChLI4vatYILeQOWr24nHr4kSap9dwAM';
+      const API_URL = `https://www.googleapis.com/books/v1/volumes?q=books&maxResults=40&key=${API_KEY}`;
+
+      try {
+        const response = await fetch(API_URL);
+        const data = await response.json();
+        const container = document.getElementById('all-books-container');
+        container.innerHTML = ''; // Clear any previous content
+
+        if (data.items) {
+          data.items.forEach((book) => {
+            const bookCard = document.createElement('div');
+            bookCard.classList.add('book-card');
+
+            const link = document.createElement('a');
+            link.href = `https://books.google.com/books?id=${book.id}`;
+            link.target = "_blank"; // Open in a new tab
+
+            const image = document.createElement('img');
+            image.src = book.volumeInfo.imageLinks ? book.volumeInfo.imageLinks.thumbnail : '../../images/placeholder.jpg';
+            image.alt = book.volumeInfo.title;
+
+            link.appendChild(image);
+            bookCard.appendChild(link);
+            container.appendChild(bookCard);
+          });
+        } else {
+          container.innerHTML = '<p>No books found.</p>';
+        }
+      } catch (error) {
+        console.error('Error fetching books:', error);
+      }
+    }
+
+    // Fetch books when the page loads
+    window.onload = fetchAllBooks;
+  </script>
+</body>
+</html>
diff --git a/public/webpages/html/dashboard.html b/public/webpages/html/dashboard.html
@@ -133,6 +133,7 @@
       <section class="genres-section">
         <div class="section-header">
           <h3>Our Book Genres</h3>
+           <a href="browse.html" class="browse-allbutton">Browse All</a>
         </div>
 
        <div class="genres-grid">
@@ -184,6 +185,7 @@ <h4>Crime</h4>
          <section class="featured-books">
   <div class="section-header">
     <h3>Featured Books</h3>
+     <a href="browse.html" class="browse-allbutton">Browse All</a>
   </div>