All books page added. Uses an axios get request to obtain an array of books...

All books page added. Uses an axios get request to obtain an array of books which it loops through and displays using some simple css and html. Backend linked and using a mongo db database running within a docker container.

All books page added. Uses an axios get request to obtain an array of books...
803c8ec4 · Fionn · dfad545b · 803c8ec4 · 803c8ec4 · 803c8ec4
Commit 803c8ec4 authored 7 months ago by Fionn
--- a/backend/server.js
+++ b/backend/server.js
@@ -6,6 +6,9 @@ const app = express();
 const path = require('path');
 app.use(express.static(path.join(__dirname, '../frontend')));
+const cors = require('cors');
+app.use(cors());
 // Start the server
 const PORT = 3000;
@@ -13,9 +16,10 @@ const PORT = 3000;
 app.use(express.json());
 // Connect to MongoDB
-mongoose.connect('mongodb://localhost:27017/BookDatabase', {
+mongoose.connect('mongodb://admin:secret@localhost:27017/BookDatabase', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
+    authSource: "admin",
 })
    .then(() => console.log('Connected to MongoDB'))
    .catch(err => console.error('Could not connect to MongoDB', err));
@@ -53,3 +57,14 @@ app.post('/submit', async (req, res) => {
    }
 });
+// GET route to fetch all books from the database
+app.get('/books', async (req, res) => {
+    try {
+        const books = await Book.find(); // Fetch all books
+        console.log('Fetched books:', books); // Log the fetched books
+        res.status(200).json(books); // Send the books as a JSON response
+    } catch (error) {
+        res.status(500).json({ message: 'Error fetching books', error: error.message });
+    }
+});
--- a/frontend/all-books.html
+++ b/frontend/all-books.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>All Books</title>
+  <link rel="stylesheet" href="style.css" />
+  <style>
+    .book-card {
+      background-color: #fff;
+      border: 2px solid #ff6600;
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 20px;
+      text-align: left;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    }
+    .book-card h3 {
+      margin: 0 0 10px;
+      color: #ff6600;
+    }
+    .book-card p {
+      margin: 4px 0;
+      color: #000;
+    }
+    #books-container {
+      max-width: 600px;
+      margin: 20px auto;
+      font-family: Arial, sans-serif;
+    }
+    .button-row {
+      display: flex;
+      justify-content: center;
+      margin-top: 30px;
+      gap: 10px;
+    }
+    .button-row button {
+      background-color: #ff6600;
+      color: white;
+      border: none;
+      padding: 12px 20px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: bold;
+    }
+    .button-row button:hover {
+      background-color: #e65c00;
+    }
+  </style>
+</head>
+<body>
+  <h1 style="text-align: center; color: #ff6600;">All Book Entries</h1>
+  <div id="books-container"></div>
+  <div class="button-row">
+    <button onclick="window.location.href='submit-book.html'">Add a Book</button>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      try {
+        // Fetch all books from the server
+        const response = await axios.get('http://localhost:3000/books');
+        const books = response.data;
+        const booksContainer = document.getElementById('books-container');
+        console.log(books);
+        // Clear the container before adding new books
+        if (books.length === 0) {
+          booksContainer.innerHTML = "<p style='text-align:center; color:red;'>No books found.</p>";
+          return;
+        }
+        // Create book cards for each book
+        books.forEach(book => {
+          const bookElement = document.createElement('div');
+          bookElement.className = 'book-card';
+          // Add book details to the card
+          bookElement.innerHTML = `
+            <h3>${book.title}</h3>
+            <p><strong>Description:</strong> ${book.description}</p>
+            <p><strong>Rating:</strong> ${book.rating} ⭐</p>
+          `;
+          booksContainer.appendChild(bookElement);
+        });
+      } catch (error) {
+        console.error('Error fetching books:', error);
+        document.getElementById('books-container').innerHTML = `<p style="color:red;">Error loading books.</p>`;
+      }
+    });
+  </script>
+</body>
+</html>
--- a/frontend/book-application.js
+++ b/frontend/book-application.js
@@ -24,3 +24,4 @@ form.addEventListener('submit', async function (e) {
        alert('Something went wrong.');
    }
 });
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -49,7 +49,7 @@ body {
    background-color: white;
  }
-  button[type="submit"] {
+  button {
    background-color: #ff6600;
    color: white;
    border: none;
@@ -63,10 +63,11 @@ body {
    width: 150px;
  }
-  button[type="submit"]:hover {
+  button:hover {
    background-color: #e65c00;
  }
  /* For focus states - accessibility */
  input:focus, textarea:focus, select:focus, button:focus {
    outline: 2px solid #ff6600;


--- a/frontend/submit-book.html
+++ b/frontend/submit-book.html
@@ -30,7 +30,11 @@
        </select>
        <br><br>
+        <div style="display: flex; gap: 10px;">
        <button type="submit">Submit</button>
+        <button type="button" onclick="window.location.href='all-books.html'">Home</button>
+        </div>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>