Skip to content

Commit 32b80d1

Browse files
therealshizantherealshizan
authored
Added 'Delete Book' Functionality
1 parent 0537f86 commit 32b80d1

3 files changed

Lines changed: 116 additions & 55 deletions

File tree

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
1212
crossorigin="anonymous"
1313
/>
14+
<link rel="stylesheet" href="main.css">
1415
</head>
1516
<body>
1617
<nav class="navbar navbar-dark navbar-expand-lg bg-dark">
@@ -102,6 +103,7 @@ <h2>Your Books</h2>
102103
<table class="table">
103104
<thead>
104105
<tr>
106+
<th scope="col">ID</th>
105107
<th scope="col">Name</th>
106108
<th scope="col">Author</th>
107109
<th scope="col">Type</th>

‎main.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
button{
2+
border: 0;
3+
background: unset;
4+
}
5+
6+
7+
#deleteBook {
8+
background: red;
9+
color: #fff;
10+
}

‎script.js‎

Lines changed: 104 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,134 @@
1-
console.log("JavaScript is working Here!");
1+
console.log("JavaScript is working Here! With ES6");
22

3-
function Book(name, type, author) {
4-
this.name = name;
5-
this.author = author;
6-
this.type = type;
3+
const tableBody = document.getElementById("tableBody");
4+
let books = []
5+
tableBody.innerHTML = (books.length === 0) && "<span class='no-books'>No Books</span>";
6+
7+
8+
class Book {
9+
constructor(bookId, name, type, author) {
10+
this.bookId = bookId;
11+
this.name = name;
12+
this.author = author;
13+
this.type = type;
14+
}
715
}
816

9-
function Display() {}
10-
11-
Display.prototype.add = function (book) {
12-
console.log("Adding to UI");
13-
let tableBody = document.getElementById("tableBody");
14-
let uiString = `
15-
<tr>
16-
<td>${book.name}</td>
17-
<td>${book.type}</td>
18-
<td>${book.author}</td>
19-
</tr>
20-
`;
21-
tableBody.innerHTML += uiString;
22-
};
17+
class Display {
2318

24-
Display.prototype.clear = function () {
25-
const libraryForm = document.getElementById("myForm");
26-
libraryForm.reset();
27-
};
19+
deleteBook(id) {
20+
const index = books.findIndex(book => book.bookId === id);
21+
if (index !== -1) {
22+
books.splice(index, 1);
23+
this.updateTable();
24+
this.show("success", "Book has been deleted successfully!", "Success");
25+
} else {
26+
this.show("error", "Book not found. Unable to delete.", "Error");
27+
}
28+
}
2829

29-
Display.prototype.validate = function (book) {
30-
if (book.name.length < 3 || book.author.length < 2) {
31-
return false;
32-
} else {
33-
return true;
30+
31+
add(book) {
32+
// console.log("Adding to UI");
33+
let uiString = `
34+
<tr>
35+
<td>${book.id}</td>
36+
<td>${book.name}</td>
37+
<td>${book.type}</td>
38+
<td>${book.author}</td>
39+
</tr>
40+
`;
41+
42+
tableBody.innerHTML += uiString;
3443
}
35-
};
3644

37-
Display.prototype.show = function (type, displayMessage, msgType) {
38-
swal({
39-
title: msgType,
40-
text: displayMessage,
41-
icon: type,
42-
button: "OK",
43-
});
44-
};
45+
clear() {
46+
const libraryForm = document.getElementById("myForm");
47+
libraryForm.reset();
48+
}
49+
50+
validate(book) {
51+
return book.name.length >= 3 && book.author.length >= 2;
52+
}
53+
54+
show(type, displayMessage, msgType) {
55+
swal({
56+
title: msgType,
57+
text: displayMessage,
58+
icon: type,
59+
button: "OK",
60+
});
61+
}
62+
63+
updateTable() {
64+
// console.log("Updating table");
65+
const tableBody = document.getElementById("tableBody");
66+
tableBody.innerHTML = ""; // Clear the table body
4567

46-
const libraryFormSubmit = e => {
68+
books.forEach((book) => {
69+
let uiString = `
70+
<tr>
71+
<td>${book.bookId}</td>
72+
<td>${book.name}</td>
73+
<td>${book.type}</td>
74+
<td>${book.author}</td>
75+
<td><button id="editBook">Edit</button></td>
76+
<td><button id="deleteBook" onclick="deleteBookHandler(${book.bookId})">Delete</button></td>
77+
</tr>
78+
`;
79+
80+
let emptyBooks = `
81+
<tr>
82+
<td>No Books Available</td>
83+
</tr>
84+
`;
85+
tableBody.innerHTML += uiString;
86+
});
87+
}
88+
}
89+
90+
function deleteBookHandler(id) {
91+
const sure = window.confirm("Are you sure, you want to delete the selected book")
92+
const display = new Display();
93+
(sure) && display.deleteBook(id);
94+
}
95+
96+
const libraryFormSubmit = (e) => {
4797
e.preventDefault();
48-
console.log("you have submitted the form");
49-
let name = document.getElementById("bookName").value;
50-
let author = document.getElementById("author").value;
98+
// console.log("you have submitted the form");
99+
const name = document.getElementById("bookName").value;
100+
const author = document.getElementById("author").value;
51101
let type;
52102

53-
let fiction = document.getElementById("fiction");
54-
let NonFiction = document.getElementById("NonFiction");
55-
let programming = document.getElementById("programming");
103+
const fiction = document.getElementById("fiction");
104+
const NonFiction = document.getElementById("NonFiction");
105+
const programming = document.getElementById("programming");
56106

57107
if (fiction.checked) {
58108
type = fiction.value.toUpperCase();
59109
} else if (NonFiction.checked) {
60-
type = NonFiction.value.toUpperCase();
110+
type = NonFiction.id.toUpperCase();
61111
} else if (programming.checked) {
62112
type = programming.value.toUpperCase();
63113
}
64114

65-
let book = new Book(name, author, type);
66-
console.log(book);
115+
const book = new Book(Date.now(), name, type, author);
116+
books.push(book);
67117

68-
let display = new Display();
118+
119+
const display = new Display();
69120

70121
if (display.validate(book)) {
71122
display.add(book);
72123
display.clear();
73-
display.show(
74-
"success",
75-
"Your book has been successfully saved!",
76-
"Success"
77-
);
124+
display.show("success", "Your book has been successfully saved!", "Success");
125+
display.updateTable(); // Call the updateTable method after adding a new book
78126
} else {
79-
// Display error
80127
display.show("error", "Sorry, Your book couldn't be saved", "Error");
81128
}
82129
};
83130

131+
132+
84133
const libraryForm = document.getElementById("myForm");
85-
libraryForm.addEventListener("submit", libraryFormSubmit);
134+
libraryForm.addEventListener("submit", libraryFormSubmit);

0 commit comments

Comments
 (0)