Added 'Delete Book' Functionality

WindingSnow · Aug 3, 2023 · 32b80d1 · 32b80d1 · therealshizan · Aug 3, 2023
1 parent 0537f86
commit 32b80d1
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
       integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
       crossorigin="anonymous"
     />
+    <link rel="stylesheet" href="main.css">
   </head>
   <body>
     <nav class="navbar navbar-dark navbar-expand-lg bg-dark">
@@ -102,6 +103,7 @@ <h2>Your Books</h2>
         <table class="table">
           <thead>
             <tr>
+              <th scope="col">ID</th>
               <th scope="col">Name</th>
               <th scope="col">Author</th>
               <th scope="col">Type</th>

diff --git a/main.css b/main.css
@@ -0,0 +1,10 @@
+button{
+    border: 0;
+    background: unset;
+}
+
+
+#deleteBook {
+    background: red;
+    color: #fff;
+}
diff --git a/script.js b/script.js
@@ -1,85 +1,134 @@
-console.log("JavaScript is working Here!");
+console.log("JavaScript is working Here! With ES6");
 
-function Book(name, type, author) {
-  this.name = name;
-  this.author = author;
-  this.type = type;
+const tableBody = document.getElementById("tableBody");
+let books = []
+tableBody.innerHTML = (books.length === 0) && "<span class='no-books'>No Books</span>";
+
+
+class Book {
+  constructor(bookId, name, type, author) {
+    this.bookId = bookId;
+    this.name = name;
+    this.author = author;
+    this.type = type;
+  }
 }
 
-function Display() {}
-
-Display.prototype.add = function (book) {
-  console.log("Adding to UI");
-  let tableBody = document.getElementById("tableBody");
-  let uiString = `
-    <tr>
-        <td>${book.name}</td>
-        <td>${book.type}</td>
-        <td>${book.author}</td>
-    </tr>
-  `;
-  tableBody.innerHTML += uiString;
-};
+class Display {
 
-Display.prototype.clear = function () {
-  const libraryForm = document.getElementById("myForm");
-  libraryForm.reset();
-};
+  deleteBook(id) {
+    const index = books.findIndex(book => book.bookId === id);
+    if (index !== -1) {
+      books.splice(index, 1);
+      this.updateTable();
+      this.show("success", "Book has been deleted successfully!", "Success");
+    } else {
+      this.show("error", "Book not found. Unable to delete.", "Error");
+    }
+  }
 
-Display.prototype.validate = function (book) {
-  if (book.name.length < 3 || book.author.length < 2) {
-    return false;
-  } else {
-    return true;
+
+  add(book) {
+    // console.log("Adding to UI");
+    let uiString = `
+      <tr>
+          <td>${book.id}</td>
+          <td>${book.name}</td>
+          <td>${book.type}</td>
+          <td>${book.author}</td>
+      </tr>
+      `;
+
+    tableBody.innerHTML += uiString;
   }
-};
 
-Display.prototype.show = function (type, displayMessage, msgType) {
-  swal({
-    title: msgType,
-    text: displayMessage,
-    icon: type,
-    button: "OK",
-  });
-};
+  clear() {
+    const libraryForm = document.getElementById("myForm");
+    libraryForm.reset();
+  }
+
+  validate(book) {
+    return book.name.length >= 3 && book.author.length >= 2;
+  }
+
+  show(type, displayMessage, msgType) {
+    swal({
+      title: msgType,
+      text: displayMessage,
+      icon: type,
+      button: "OK",
+    });
+  }
+
+  updateTable() {
+    // console.log("Updating table");
+    const tableBody = document.getElementById("tableBody");
+    tableBody.innerHTML = ""; // Clear the table body
 
-const libraryFormSubmit = e => {
+    books.forEach((book) => {
+      let uiString = `
+        <tr>
+          <td>${book.bookId}</td>
+          <td>${book.name}</td>
+          <td>${book.type}</td>
+          <td>${book.author}</td>
+          <td><button id="editBook">Edit</button></td>
+          <td><button id="deleteBook" onclick="deleteBookHandler(${book.bookId})">Delete</button></td>
+        </tr>
+      `;
+
+      let emptyBooks = `
+        <tr>
+          <td>No Books Available</td>
+        </tr>
+      `;
+      tableBody.innerHTML += uiString;
+    });
+  }
+}
+
+function deleteBookHandler(id) {
+  const sure = window.confirm("Are you sure, you want to delete the selected book")
+  const display = new Display();
+  (sure) && display.deleteBook(id);
+}
+
+const libraryFormSubmit = (e) => {
   e.preventDefault();
-  console.log("you have submitted the form");
-  let name = document.getElementById("bookName").value;
-  let author = document.getElementById("author").value;
+  // console.log("you have submitted the form");
+  const name = document.getElementById("bookName").value;
+  const author = document.getElementById("author").value;
   let type;
 
-  let fiction = document.getElementById("fiction");
-  let NonFiction = document.getElementById("NonFiction");
-  let programming = document.getElementById("programming");
+  const fiction = document.getElementById("fiction");
+  const NonFiction = document.getElementById("NonFiction");
+  const programming = document.getElementById("programming");
 
   if (fiction.checked) {
     type = fiction.value.toUpperCase();
   } else if (NonFiction.checked) {
-    type = NonFiction.value.toUpperCase();
+    type = NonFiction.id.toUpperCase();
   } else if (programming.checked) {
     type = programming.value.toUpperCase();
   }
 
-  let book = new Book(name, author, type);
-  console.log(book);
+  const book = new Book(Date.now(), name, type, author);
+  books.push(book);
 
-  let display = new Display();
+
+  const display = new Display();
 
   if (display.validate(book)) {
     display.add(book);
     display.clear();
-    display.show(
-      "success",
-      "Your book has been successfully saved!",
-      "Success"
-    );
+    display.show("success", "Your book has been successfully saved!", "Success");
+    display.updateTable(); // Call the updateTable method after adding a new book
   } else {
-    // Display error
     display.show("error", "Sorry, Your book couldn't be saved", "Error");
   }
 };
 
+
+
 const libraryForm = document.getElementById("myForm");
-libraryForm.addEventListener("submit", libraryFormSubmit);
+libraryForm.addEventListener("submit", libraryFormSubmit);