From 803c8ec430d0b1ce79a1c8f6abb113a2e4ff40d1 Mon Sep 17 00:00:00 2001
From: Fionn <fionnmc123@gmail.com>
Date: Wed, 2 Apr 2025 21:30:45 +0200
Subject: [PATCH] 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.
---
backend/server.js | 17 +++++-
frontend/all-books.html | 103 +++++++++++++++++++++++++++++++++++
frontend/book-application.js | 3 +-
frontend/style.css | 5 +-
frontend/submit-book.html | 6 +-
5 files changed, 129 insertions(+), 5 deletions(-)
diff --git a/backend/server.js b/backend/server.js
index fabaf32..f456a2b 100644
--- 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 });
+ }
+});
+
diff --git a/frontend/all-books.html b/frontend/all-books.html
index e69de29..6834b5e 100644
--- a/frontend/all-books.html
+++ b/frontend/all-books.html
@@ -0,0 +1,103 @@
+<!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>
diff --git a/frontend/book-application.js b/frontend/book-application.js
index d03243a..182d886 100644
--- a/frontend/book-application.js
+++ b/frontend/book-application.js
@@ -23,4 +23,5 @@ form.addEventListener('submit', async function (e) {
console.error('Submission failed:', error);
alert('Something went wrong.');
}
-});
\ No newline at end of file
+});
+
diff --git a/frontend/style.css b/frontend/style.css
index 21e084e..958b2f4 100644
--- 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,9 +63,10 @@ body {
width: 150px;
}
- button[type="submit"]:hover {
+ button:hover {
background-color: #e65c00;
}
+
/* For focus states - accessibility */
input:focus, textarea:focus, select:focus, button:focus {
diff --git a/frontend/submit-book.html b/frontend/submit-book.html
index 08a66b4..5fbfff2 100644
--- a/frontend/submit-book.html
+++ b/frontend/submit-book.html
@@ -29,8 +29,12 @@
<option value="5">5 Stars</option>
</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>
--
GitLab