zwadzinski · e2b-for-github · Jul 2, 2023 · Jul 2, 2023
diff --git a/README.md b/README.md
diff --git a/books.html b/books.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Books</title>
+    <link href="tailwind.css" rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+</head>
+<body class="dark-theme">
+    <nav id="navbar">
+        <!-- Navigation content -->
+    </nav>
+
+    <main>
+        <section id="bookList" class="book-card">
+            <!-- Books will be displayed here -->
+        </section>
+    </main>
+
+    <footer id="footer">
+        <!-- Footer content -->
+    </footer>
+
+    <script src="goodreadsAPI.js"></script>
+    <script>
+        fetchBooks();
+    </script>
+</body>
+</html>
diff --git a/goodreadsAPI.js b/goodreadsAPI.js
@@ -0,0 +1,39 @@
+```javascript
+const apiKey = 'YOUR_GOODREADS_API_KEY'; // Replace with your Goodreads API key
+let books = [];
+
+async function fetchBooks() {
+    try {
+        const response = await fetch(`https://www.goodreads.com/api/books?user_id=USER_ID&key=${apiKey}`);
+        if (!response.ok) {
+            throw new Error('fetchError');
+        }
+        const data = await response.json();
+        books = data.books;
+    } catch (error) {
+        console.error('Error:', error);
+    }
+}
+
+function displayBooks() {
+    const bookList = document.getElementById('bookList');
+    if (books.length === 0) {
+        bookList.innerHTML = '<p class="emptyList">No books to display</p>';
+        return;
+    }
+    books.forEach(book => {
+        const bookCard = document.createElement('div');
+        bookCard.className = 'book-card';
+        bookCard.innerHTML = `
+            <img src="${book.coverImage}" alt="${book.title}">
+            <h2>${book.title}</h2>
+            <h3>${book.author}</h3>
+            <p>${book.rating}</p>
+            <a href="${book.link}">Read more</a>
+        `;
+        bookList.appendChild(bookCard);
+    });
+}
+
+fetchBooks().then(displayBooks);
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Personal Website</title>
+    <link href="tailwind.css" rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+</head>
+<body class="dark-theme">
+    <nav id="navbar" class="p-6">
+        <a href="index.html" class="text-white">Home</a>
+        <a href="books.html" class="ml-6 text-white">Books</a>
+    </nav>
+    <main>
+        <section id="bookList" class="p-6">
+            <!-- Books will be displayed here by goodreadsAPI.js -->
+        </section>
+    </main>
+    <footer id="footer" class="p-6 text-center text-white">
+        © 2022 Personal Website. All rights reserved.
+    </footer>
+    <script src="goodreadsAPI.js"></script>
+</body>
+</html>
diff --git a/shared_dependencies.md b/shared_dependencies.md
@@ -0,0 +1,31 @@
+Shared Dependencies:
+
+1. **HTML Elements IDs**: 
+   - `navbar`: The navigation bar on the website.
+   - `bookList`: The section where the books from Goodreads will be displayed.
+   - `footer`: The footer of the website.
+
+2. **CSS Classes**:
+   - `dark-theme`: A class in `styles.css` and `tailwind.css` for applying the dark theme across the website.
+   - `book-card`: A class in `styles.css` and `tailwind.css` for styling the individual book display cards.
+
+3. **JavaScript Functions**:
+   - `fetchBooks()`: A function in `goodreadsAPI.js` that fetches the books from the Goodreads API.
+   - `displayBooks()`: A function in `goodreadsAPI.js` that takes the fetched books data and displays it in the `bookList` section.
+
+4. **Data Schemas**:
+   - `Book`: A schema for the book data fetched from the Goodreads API. It includes properties like `title`, `author`, `coverImage`, `rating`, and `link`.
+
+5. **APIs**:
+   - `Goodreads API`: Used in `goodreadsAPI.js` to fetch the books data.
+
+6. **External Libraries**:
+   - `Tailwind CSS`: A utility-first CSS framework used for styling the website. It's linked in `index.html` and its classes are used in `styles.css`.
+
+7. **Variables**:
+   - `books`: An array in `goodreadsAPI.js` that stores the fetched books data.
+   - `apiKey`: A variable in `goodreadsAPI.js` that stores the Goodreads API key.
+
+8. **Message Names**:
+   - `fetchError`: A message displayed when there's an error fetching data from the Goodreads API.
+   - `emptyList`: A message displayed when there are no books to display.
diff --git a/styles.css b/styles.css
@@ -0,0 +1,36 @@
+/* styles.css */
+
+body {
+  background-color: #1a202c;
+  color: #a0aec0;
+}
+
+#navbar {
+  background-color: #2d3748;
+  padding: 20px;
+}
+
+#bookList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 20px;
+}
+
+.book-card {
+  background-color: #2d3748;
+  border-radius: 10px;
+  margin: 10px;
+  padding: 20px;
+  width: 200px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#footer {
+  background-color: #2d3748;
+  padding: 20px;
+  text-align: center;
+}
diff --git a/tailwind.css b/tailwind.css
@@ -0,0 +1,23 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+body {
+  @apply bg-gray-900 text-white;
+}
+
+#navbar {
+  @apply bg-gray-800 p-4;
+}
+
+#bookList {
+  @apply grid grid-cols-3 gap-4 p-4;
+}
+
+.book-card {
+  @apply bg-gray-700 p-4 rounded shadow-lg;
+}
+
+#footer {
+  @apply bg-gray-800 p-4 text-center;
+}