CodeYourFuture · Ayogit1 · Apr 19, 2026 · Apr 22, 2026
diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
@@ -1,3 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Personal Library Manager</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="style.css">
+
+  <script src="script.js" type="module"></script>
+</head>
+
+<body>
+  <div class="jumbotron text-center">
+    <h1>Library</h1>
+    <p>Add books to your virtual library</p>
+  </div>
+
+  <div class="container">
+    <button data-toggle="collapse" data-target="#demo" class="btn btn-info mb-3">
+      Add new book
+    </button>
+
+    <div id="demo" class="collapse mb-4">
+      <div class="form-group">
+        <label for="title">Title:</label>
+        <input type="text" class="form-control" id="title" name="title" required>
+
+        <label for="author" class="mt-2">Author:</label>
+        <input type="text" class="form-control" id="author" name="author" required>
+
+        <label for="pages" class="mt-2">Pages:</label>
+        <input type="number" class="form-control" id="pages" name="pages" min="1" required>
+
+        <div class="form-check mt-3 mb-3">
+          <input type="checkbox" class="form-check-input" id="check">
+          <label class="form-check-label" for="check">Read</label>
+        </div>
+
+        <button id="submitBtn" class="btn btn-primary">Submit</button>
+      </div>
+    </div>
+
+    <table class="table" id="display">
+      <thead class="thead-dark">
+        <tr>
+          <th>Title</th>
+          <th>Author</th>
+          <th>Pages</th>
+          <th>Read Status</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody id="tableBody">
+      </tbody>
+    </table>
+  </div>
+</body>
+
+</html>
+
+<!--
+
 <!DOCTYPE html>
 <html>
   <head>
@@ -94,3 +162,5 @@ <h1>Library</h1>
     <script src="script.js"></script>
   </body>
 </html>
+
+-->
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
@@ -1,3 +1,121 @@
+const myLibrary = [];
+
+// DOM Element Selectors
+const titleInput = document.getElementById("title");
+const authorInput = document.getElementById("author");
+const pagesInput = document.getElementById("pages");
+const checkInput = document.getElementById("check");
+const submitBtn = document.getElementById("submitBtn");
+const tableBody = document.getElementById("tableBody");
+
+// Initialize app
+window.addEventListener("load", () => {
+  populateStorage();
+  render();
+});
+
+submitBtn.addEventListener("click", submitBook);
+
+function Book(title, author, pages, check) {
+  this.title = title;
+  this.author = author;
+  this.pages = pages;
+  this.check = check;
+}
+
+function populateStorage() {
+  if (myLibrary.length === 0) {
+    // Note: pages are stored as numbers
+    const book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
+    const book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true);
+    myLibrary.push(book1, book2);
+  }
+}
+
+function submitBook() {
+  // Input Validation & Normalization
+  const titleVal = titleInput.value.trim();
+  const authorVal = authorInput.value.trim();
+  const pagesVal = parseInt(pagesInput.value);
+
+  // Reject empty strings or invalid page numbers
+  if (!titleVal || !authorVal || isNaN(pagesVal) || pagesVal <= 0) {
+    alert("Please provide a valid Title, Author, and Page Count.");
+    return;
+  }
+
+  const newBook = new Book(titleVal, authorVal, pagesVal, checkInput.checked);
+  myLibrary.push(newBook);
+
+  // Clear inputs
+  titleInput.value = "";
+  authorInput.value = "";
+  pagesInput.value = "";
+  checkInput.checked = false;
+
+  render();
+}
+
+function render() {
+  // Clear the container in one operation
+  tableBody.innerHTML = "";
+
+  myLibrary.forEach((book, index) => {
+    const row = document.createElement("tr");
+
+    // Title Cell
+    const titleCell = document.createElement("td");
+    titleCell.textContent = book.title;
+    row.appendChild(titleCell);
+
+    // Author Cell
+    const authorCell = document.createElement("td");
+    authorCell.textContent = book.author;
+    row.appendChild(authorCell);
+
+    // Pages Cell
+    const pagesCell = document.createElement("td");
+    pagesCell.textContent = book.pages;
+    row.appendChild(pagesCell);
+
+    // Read Status Cell
+    const statusCell = document.createElement("td");
+    const statusBtn = document.createElement("button");
+    statusBtn.className = "btn btn-sm btn-success";
+    // Ternary operator for simplification
+    statusBtn.textContent = book.check ? "Yes" : "No";
+
+    statusBtn.addEventListener("click", () => {
+      book.check = !book.check;
+      render();
+    });
+    statusCell.appendChild(statusBtn);
+    row.appendChild(statusCell);
+
+    // Delete Cell
+    const deleteCell = document.createElement("td");
+    const deleteBtn = document.createElement("button");
+    deleteBtn.className = "btn btn-sm btn-warning";
+    deleteBtn.textContent = "Delete";
+
+    deleteBtn.addEventListener("click", () => {
+      const deletedTitle = book.title;
+      myLibrary.splice(index, 1);
+      render();
+      // Alert after deletion logic is complete
+      alert(`Deleted: ${deletedTitle}`);
+    });
+    deleteCell.appendChild(deleteBtn);
+    row.appendChild(deleteCell);
+
+    tableBody.appendChild(row);
+  });
+}
+
+
+
+/*
+
 let myLibrary = [];
 
 window.addEventListener("load", function (e) {
@@ -101,3 +219,5 @@ function render() {
     });
   }
 }
+
+*/