Skip to content

Commit 9b0672f

Browse files
TarawallyTarawally
committed
feat(book-library): improve security and persistence
- Implement LocalStorage for data persistence - Use textContent to prevent XSS attacks - Remove inline event handlers - Update colours and responsive styling
1 parent c89c066 commit 9b0672f

File tree

3 files changed

+199
-68
lines changed

3 files changed

+199
-68
lines changed

‎debugging/book-library/index.html‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ <h1>Library</h1>
3131
<div class="form-group">
3232
<label for="title">Title:</label>
3333
<input
34-
type="title"
34+
type="text"
3535
class="form-control"
3636
id="title"
3737
name="title"
3838
required
3939
/>
4040
<label for="author">Author: </label>
4141
<input
42-
type="author"
42+
type="text"
4343
class="form-control"
4444
id="author"
4545
name="author"
@@ -64,32 +64,26 @@ <h1>Library</h1>
6464
<input
6565
type="submit"
6666
value="Submit"
67-
class="btn btn-primary"
68-
onclick="submit();"
67+
class="btn btn-primary btn-block"
68+
id="submit-book-btn"
6969
/>
7070
</div>
7171
</div>
7272

73-
<table class="table" id="display">
74-
<thead class="thead-dark">
75-
<tr>
76-
<th>Title</th>
77-
<th>Author</th>
78-
<th>Number of Pages</th>
79-
<th>Read</th>
80-
<th></th>
81-
</tr>
82-
</thead>
83-
<tbody>
84-
<tr>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
</tr>
91-
</tbody>
92-
</table>
73+
<div class="table-responsive">
74+
<table class="table table-hover" id="display">
75+
<thead class="thead-dark">
76+
<tr>
77+
<th>Title</th>
78+
<th>Author</th>
79+
<th>Number of Pages</th>
80+
<th>Read</th>
81+
<th></th>
82+
</tr>
83+
</thead>
84+
<tbody></tbody>
85+
</table>
86+
</div>
9387

9488
<script src="script.js"></script>
9589
</body>

‎debugging/book-library/script.js‎

Lines changed: 58 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1+
const title = document.getElementById("title");
2+
const author = document.getElementById("author");
3+
const pages = document.getElementById("pages");
4+
const check = document.getElementById("check");
5+
const table = document.getElementById("display");
6+
const submitBtn = document.getElementById("submit-book-btn");
7+
18
let myLibrary = [];
29

3-
window.addEventListener("load", function (e) {
10+
window.addEventListener("load", function () {
411
populateStorage();
512
render();
613
});
714

15+
submitBtn.addEventListener("click", addBook);
16+
817
function populateStorage() {
9-
if (myLibrary.length == 0) {
18+
const storedLibrary = localStorage.getItem("myLibrary");
19+
if (storedLibrary) {
20+
myLibrary = JSON.parse(storedLibrary);
21+
} else {
22+
// Default books if nothing in storage
1023
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
1124
let book2 = new Book(
1225
"The Old Man and the Sea",
@@ -16,30 +29,35 @@ function populateStorage() {
1629
);
1730
myLibrary.push(book1);
1831
myLibrary.push(book2);
19-
render();
32+
saveStorage();
2033
}
2134
}
2235

23-
const title = document.getElementById("title");
24-
const author = document.getElementById("author");
25-
const pages = document.getElementById("pages");
26-
const check = document.getElementById("check");
36+
function saveStorage() {
37+
localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
38+
}
2739

2840
//check the right input from forms and if its ok -> add the new book (object in array)
2941
//via Book function and start render function
30-
function submit() {
31-
if (
32-
title.value == null ||
33-
title.value == "" ||
34-
pages.value == null ||
35-
pages.value == ""
36-
) {
42+
function addBook(e) {
43+
// Prevent form submission if we wrap this in a form later,
44+
// though currently it's just a button. Good practice.
45+
if (e) e.preventDefault();
46+
47+
if (!title.value || !author.value || !pages.value) {
3748
alert("Please fill all fields!");
3849
return false;
3950
} else {
40-
let book = new Book(title.value, title.value, pages.value, check.checked);
41-
library.push(book);
51+
let book = new Book(title.value, author.value, pages.value, check.checked);
52+
myLibrary.push(book);
53+
saveStorage();
4254
render();
55+
56+
// Clear inputs
57+
title.value = "";
58+
author.value = "";
59+
pages.value = "";
60+
check.checked = false;
4361
}
4462
}
4563

@@ -51,53 +69,59 @@ function Book(title, author, pages, check) {
5169
}
5270

5371
function render() {
54-
let table = document.getElementById("display");
5572
let rowsNumber = table.rows.length;
5673
//delete old table
57-
for (let n = rowsNumber - 1; n > 0; n-- {
74+
for (let n = rowsNumber - 1; n > 0; n--) {
5875
table.deleteRow(n);
5976
}
6077
//insert updated row and cells
6178
let length = myLibrary.length;
6279
for (let i = 0; i < length; i++) {
63-
let row = table.insertRow(1);
80+
// Insert at the end of the table
81+
let row = table.insertRow(-1);
6482
let titleCell = row.insertCell(0);
6583
let authorCell = row.insertCell(1);
6684
let pagesCell = row.insertCell(2);
6785
let wasReadCell = row.insertCell(3);
6886
let deleteCell = row.insertCell(4);
69-
titleCell.innerHTML = myLibrary[i].title;
70-
authorCell.innerHTML = myLibrary[i].author;
71-
pagesCell.innerHTML = myLibrary[i].pages;
87+
88+
// SECURITY: Use textContent to prevent XSS
89+
titleCell.textContent = myLibrary[i].title;
90+
authorCell.textContent = myLibrary[i].author;
91+
pagesCell.textContent = myLibrary[i].pages;
7292

7393
//add and wait for action for read/unread button
7494
let changeBut = document.createElement("button");
75-
changeBut.id = i;
95+
// Removed arbitrary index-based ID
7696
changeBut.className = "btn btn-success";
7797
wasReadCell.appendChild(changeBut);
98+
7899
let readStatus = "";
79100
if (myLibrary[i].check == false) {
80-
readStatus = "Yes";
81-
} else {
82101
readStatus = "No";
102+
} else {
103+
readStatus = "Yes";
83104
}
84-
changeBut.innerText = readStatus;
105+
changeBut.textContent = readStatus;
85106

86107
changeBut.addEventListener("click", function () {
87108
myLibrary[i].check = !myLibrary[i].check;
109+
saveStorage();
88110
render();
89111
});
90112

91113
//add delete button to every row and render again
92114
let delButton = document.createElement("button");
93-
delBut.id = i + 5;
94-
deleteCell.appendChild(delBut);
95-
delBut.className = "btn btn-warning";
96-
delBut.innerHTML = "Delete";
97-
delBut.addEventListener("clicks", function () {
98-
alert(`You've deleted title: ${myLibrary[i].title}`);
99-
myLibrary.splice(i, 1);
100-
render();
115+
// Removed arbitrary index-based ID
116+
deleteCell.appendChild(delButton);
117+
delButton.className = "btn btn-warning";
118+
delButton.textContent = "Delete";
119+
delButton.addEventListener("click", function () {
120+
if (confirm(`Are you sure you want to delete: ${myLibrary[i].title}?`)) {
121+
myLibrary.splice(i, 1);
122+
saveStorage();
123+
render();
124+
}
101125
});
102126
}
103127
}

‎debugging/book-library/style.css‎

Lines changed: 123 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,132 @@
1-
.form-group {
2-
width: 400px;
3-
height: 300px;
4-
align-self: left;
5-
padding-left: 20px;
1+
/* Google Fonts */
2+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
3+
4+
body {
5+
font-family: "Roboto", sans-serif;
6+
background-color: #f8f9fa;
7+
color: #333;
68
}
79

10+
.jumbotron {
11+
background-color: #343a40;
12+
color: white;
13+
padding: 2rem 1rem;
14+
margin-bottom: 2rem;
15+
border-radius: 0;
16+
}
17+
18+
.jumbotron h1 {
19+
font-weight: 700;
20+
}
21+
22+
/* Button Styling */
823
.btn {
9-
display: block;
24+
border-radius: 20px;
25+
padding: 8px 20px;
26+
font-weight: 500;
27+
transition: all 0.3s ease;
28+
}
29+
30+
.btn-info {
31+
background-color: #17a2b8;
32+
border-color: #17a2b8;
33+
color: white;
34+
}
35+
36+
.btn-info:hover {
37+
background-color: #138496;
38+
border-color: #117a8b;
39+
transform: translateY(-2px);
40+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
41+
}
42+
43+
/* Form Styling */
44+
#demo.collapse.show {
45+
display: flex;
46+
justify-content: center;
47+
margin-bottom: 20px;
48+
}
49+
50+
.form-group {
51+
background: white;
52+
padding: 2rem;
53+
border-radius: 8px;
54+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
55+
width: 100%;
56+
max-width: 500px;
57+
margin: 0 auto;
58+
}
59+
60+
.form-control {
61+
border-radius: 5px;
62+
border: 1px solid #ced4da;
63+
padding: 10px;
64+
}
65+
66+
.form-control:focus {
67+
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
68+
border-color: #17a2b8;
69+
}
70+
71+
label {
72+
font-weight: 500;
73+
margin-top: 10px;
1074
}
1175

1276
.form-check-label {
13-
padding-left: 20px;
14-
margin: 5px 0px 5px 0px;
77+
display: flex;
78+
align-items: center;
79+
margin: 15px 0;
80+
cursor: pointer;
1581
}
1682

17-
button.btn-info {
18-
margin: 20px;
83+
.form-check-input {
84+
margin-right: 10px;
85+
margin-top: 0;
86+
}
87+
88+
/* Table Styling */
89+
.table-responsive {
90+
margin-top: 20px;
91+
padding: 0 15px;
92+
}
93+
94+
.table {
95+
background: white;
96+
border-radius: 8px;
97+
overflow: hidden;
98+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
99+
}
100+
101+
.thead-dark th {
102+
background-color: #343a40;
103+
border-color: #454d55;
104+
color: white;
105+
}
106+
107+
.table td,
108+
.table th {
109+
vertical-align: middle;
110+
}
111+
112+
/* Responsive Adjustments */
113+
@media (max-width: 576px) {
114+
.jumbotron {
115+
padding: 1.5rem 1rem;
116+
}
117+
118+
.btn {
119+
width: 100%;
120+
margin-bottom: 10px;
121+
}
122+
123+
.form-group {
124+
padding: 1rem;
125+
}
126+
127+
button.btn-info {
128+
margin: 10px auto;
129+
display: block;
130+
width: 90%;
131+
}
19132
}

0 commit comments

Comments
 (0)