Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
D
DockerContainerizationProject
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Fionn McGoldrick
DockerContainerizationProject
Commits
5aef4ee7
Commit
5aef4ee7
authored
3 months ago
by
Fionn
Browse files
Options
Downloads
Patches
Plain Diff
Finished mobile applications dice rolling game tutorial.
parent
803c8ec4
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
[Commands For Docker Desktop DB].txt
+10
-0
10 additions, 0 deletions
[Commands For Docker Desktop DB].txt
backend/server.js
+11
-1
11 additions, 1 deletion
backend/server.js
frontend/all-books.html
+37
-13
37 additions, 13 deletions
frontend/all-books.html
with
58 additions
and
14 deletions
[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
This diff is collapsed.
Click to expand it.
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
'
});
}
});
This diff is collapsed.
Click to expand it.
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
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment