updating code to accommodate PR.

Author: Dave-Vermeulen

debugging/book-library/index.html

@@ -22,20 +22,22 @@ <h1>Library</h1>
     </button>
 
     <div id="demo" class="collapse">
-      <div class="form-group">
-        <label for="title">Title:</label>
-        <input type="text" class="form-control" id="title" name="title" required>
-        <label for="author">Author: </label>
-        <input type="text" class="form-control" id="author" name="author" required>
-        <label for="pages">Pages:</label>
-        <input type="number" class="form-control" id="pages" name="pages" required>
-        <label class="form-check-label">
-          <input type="checkbox" class="form-check-input" id="check" value="">Read
-        </label>
-        <input type="submit" value="Submit" class="btn btn-primary" onclick="submit();">
-      </div>
+      <form id="addBookForm">
+        <div class="form-group">
+          <label for="title">Title:</label>
+          <input type="text" class="form-control" id="title" name="title" required />
+          <label for="author">Author: </label>
+          <input type="text" class="form-control" id="author" name="author" required />
+          <label for="pages">Pages:</label>
+          <input type="number" class="form-control" id="pages" name="pages" required />
+          <label class="form-check-label">
+            <input type="checkbox" class="form-check-input" id="check" value="" />Read
+          </label>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </div>
+      </form>
     </div>
-
+    <div id="notification-container" class="mt-3"></div>
     <table class="table" id="display">
       <thead class="thead-dark">
         <tr>

debugging/book-library/script.js

@@ -5,54 +5,74 @@ const titleInput = document.getElementById("title");
 const authorInput = document.getElementById("author");
 const pagesInput = document.getElementById("pages");
 const checkInput = document.getElementById("check");
+const addBookForm = document.getElementById("addBookForm");
+
 // populate the library with some default books if it's empty
 function populateStorage() {
   if (myLibrary.length === 0) {
     let book1 = new Book("Robison Crusoe", "Daniel Defoe", 252, true);
-    let book2 = new Book("The Old Man and the Sea","Ernest Hemingway", 127, true);
+    let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true);
     myLibrary.push(book1);
     myLibrary.push(book2);
-    }
-}
-//check the right input from forms and if its ok -> add the new book (object in array)
-//via Book function and start render function
-function submit() {
-  if (
-    titleInput.value.trim == "" || // cant be null so removed all that
-    authorInput.value.trim == "" ||
-    pagesInput.value.trim == ""
-  ) {
-    alert("Please fill all fields!");
-    return false;
-  } else {
-    let newBook = new Book(titleInput.value, authorInput.value, parseInt(pagesInput.value), checkInput.checked);
-    myLibrary.push(newBook);
-    //clear form after adding newBook
-    titleInput.value = '';
-    authorInput.value = '';
-    pagesInput.value = '';
-    checkInput.value = false;
-    render();
   }
 }
+
+// this function is now exclusively for adding a new book to the array and rendering, replaced the old submit()
+function addBookToLibrary() {
+  let newBook = new Book(
+    titleInput.value,
+    authorInput.value,
+    parseInt(pagesInput.value),
+    checkInput.checked
+  );
+  myLibrary.push(newBook);
+  addBookForm.reset();
+  render();
+}
+
+addBookForm.addEventListener('submit', function (event) {
+  event.preventDefault(); // prevents the default page reload
+  addBookToLibrary();
+});
+
 // book constructor
 function Book(title, author, pages, check) {
   this.title = title;
   this.author = author;
   this.pages = pages;
   this.check = check;
 }
-// renders lib data into HTML
+
+function displayNotification(message) {
+  const container = document.getElementById("notification-container");
+  container.innerHTML = `<div class="alert alert-success alert-dismissible fade show" role="alert">
+    ${message}
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>`;
+  setTimeout(() => {
+    const alert = container.querySelector('.alert');
+    if (alert) {
+      alert.classList.remove('show');
+      alert.classList.add('fade');
+      setTimeout(() => 
+        alert.remove(), 150);
+      }
+    }, 3000); // 3 secs
+}
+
+// renders library data into HTML
 function render() {
   let tableBody = document.querySelector("#display tbody");
-  tableBody.innerHTML = ''; // get rid of all instead of one by one row deletion
-  
+  tableBody.innerHTML = '';
+
   myLibrary.forEach((book, index) => {
     let row = tableBody.insertRow();
-    // post debate lets use textContent instead of innerHTML
     row.insertCell(0).textContent = book.title;
     row.insertCell(1).textContent = book.author;
     row.insertCell(2).textContent = book.pages;
+
     // 'read' status
     const wasReadCell = row.insertCell(3);
     const readStatusBtn = document.createElement("button");
@@ -68,17 +88,19 @@ function render() {
     const deleteCell = row.insertCell(4);
     const deleteBtn = document.createElement("button");
     deleteBtn.className = "btn btn-warning";
-    deleteBtn.innerHTML = "Delete";
+    deleteBtn.textContent = "Delete";
     deleteCell.appendChild(deleteBtn);
+
     deleteBtn.addEventListener("click", function () {
       const deletedTitle = myLibrary[index].title;
       myLibrary.splice(index, 1);
       render();
-      alert(`You've deleted title: ${deletedTitle}`);
+      displayNotification(`You've deleted "${deletedTitle}"`);
     });
   });
 }
-// moved to end to make sure all is defined before load  
+
+// ensures functions are defined before being called on page load
 window.addEventListener("load", function () {
   populateStorage();
   render();