Skip to content
Snippets Groups Projects
Commit 5aef4ee7 authored by Fionn's avatar Fionn
Browse files

Finished mobile applications dice rolling game tutorial.

parent 803c8ec4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
[Commands For Docker Desktop DB].txt 0 → 100644
+ 10
− 0
View file @ 5aef4ee7
[Commands For Docker Desktop DB]
docker exec -it mongo-dev bash
mongosh -u admin -p secret --authenticationDatabase admin
show dbs
show collections
db.books.find()
\ No newline at end of file
backend/server.js
+ 11
− 1
View file @ 5aef4ee7
...@@ -61,10 +61,20 @@ app.post('/submit', async (req, res) => { ...@@ -61,10 +61,20 @@ app.post('/submit', async (req, res) => {
app.get('/books', async (req, res) => { app.get('/books', async (req, res) => {
try { try {
const books = await Book.find(); // Fetch all books 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 res.status(200).json(books); // Send the books as a JSON response
} catch (error) { } catch (error) {
res.status(500).json({ message: 'Error fetching books', error: error.message }); res.status(500).json({ message: 'Error fetching books', error: error.message });
} }
}); });
app.delete('/books/:id', async (req, res) => {
const { id } = req.params;
try {
await Book.findByIdAndDelete(id);
res.status(200).send({ message: 'Book deleted' });
} catch (err) {
res.status(500).send({ error: 'Deletion failed' });
}
});
frontend/all-books.html
+ 37
− 13
View file @ 5aef4ee7
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>All Books</title> <title>All Books</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<style> <style>
...@@ -54,6 +55,7 @@ ...@@ -54,6 +55,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<h1 style="text-align: center; color: #ff6600;">All Book Entries</h1> <h1 style="text-align: center; color: #ff6600;">All Book Entries</h1>
<div id="books-container"></div> <div id="books-container"></div>
...@@ -64,40 +66,62 @@ ...@@ -64,40 +66,62 @@
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script> <script>
/// Fetch and display all books
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
try { try {
// Fetch all books from the server
const response = await axios.get('http://localhost:3000/books'); const response = await axios.get('http://localhost:3000/books');
const books = response.data; const books = response.data;
const booksContainer = document.getElementById('books-container'); const booksContainer = document.getElementById('books-container'); // Get the container for books
console.log(books);
// Clear the container before adding new books
if (books.length === 0) { if (books.length === 0) {
booksContainer.innerHTML = "<p style='text-align:center; color:red;'>No books found.</p>"; booksContainer.innerHTML = "<p style='text-align:center; color:red;'>No books found.</p>";
return; return;
} }
// Create book cards for each book
books.forEach(book => { books.forEach(book => {
const bookElement = document.createElement('div'); const bookElement = document.createElement('div');
bookElement.className = 'book-card'; bookElement.className = 'book-card';
// Add book details to the card
bookElement.innerHTML = ` bookElement.innerHTML = `
<h3>${book.title}</h3> <div class="book-content">
<p><strong>Description:</strong> ${book.description}</p> <div>
<p><strong>Rating:</strong> ${book.rating} ⭐</p> <h3>${book.title}</h3>
<p><strong>Description:</strong> ${book.description}</p>
<p><strong>Rating:</strong> ${book.rating} ⭐</p>
</div>
<button class="delete-btn" data-id="${book._id}" title="Delete">
🗑️
</button>
</div>
`; `;
booksContainer.appendChild(bookElement); booksContainer.appendChild(bookElement);
}); });
document.querySelectorAll('.delete-btn').forEach(button => {
button.addEventListener('click', async (e) => {
const bookId = e.target.getAttribute('data-id');
if (confirm('Are you sure you want to delete this book?')) {
try {
await axios.delete(`http://localhost:3000/books/${bookId}`);
e.target.closest('.book-card').remove();
} catch (err) {
console.error('Failed to delete book:', err);
alert('Error deleting book.');
}
}
});
});
} catch (error) { } catch (error) {
console.error('Error fetching books:', error); console.error('Error fetching books:', error);
document.getElementById('books-container').innerHTML = `<p style="color:red;">Error loading books.</p>`; document.getElementById('books-container').innerHTML = `<p style="color:red;">Error loading books.</p>`;
} }
}); });
</script> </script>
</body> </body>
</html>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment