feat: add back UI and handler functions

Author: MatimotTheTimoters

src/script.js

@@ -103,3 +103,165 @@ class Library {
   }
 }
 
+/*==========
+ ** Application State and Functions
+ **/
+const myLibrary = new Library();
+
+// Add new book to library
+function addBookToLibrary(title, author, pages, genre, read) {
+  const newBook = new Book(title, author, pages, genre, read);
+  myLibrary.addBook(newBook);
+  return newBook;
+}
+
+// Display all books
+function displayBooks() {
+  const booksContainer = document.getElementById("books-container");
+
+  // Clear container
+  booksContainer.innerHTML = "";
+
+  // Check if library empty
+  if (myLibrary.isEmpty) {
+    booksContainer.innerHTML = `
+            <div class="empty-library">
+                <i class="fas fa-book-open"></i>
+                <h3>Your library is empty</h3>
+                <p>Click "Add New Book" to start adding books to your collection!</p>
+            </div>
+        `;
+    return;
+  }
+
+  // Create and append cards to library
+  myLibrary.books.forEach((book) => {
+    const bookCard = createBookCard(book);
+    booksContainer.appendChild(bookCard);
+  });
+}
+
+// Create book card element
+function createBookCard(book) {
+  const bookCard = document.createElement("div");
+  bookCard.className = "book-card";
+  bookCard.dataset.bookId = book.id;
+
+  bookCard.innerHTML = `
+        <div class="book-header">
+            <h3 class="book-title">${book.title}</h3>
+            <span class="book-status ${book.statusClass}">${
+    book.statusText
+  }</span>
+        </div>
+        <p class="book-author">${book.formattedAuthor}</p>
+        <div class="book-details">
+            <div class="book-detail">
+                <span class="book-detail-label">Pages:</span>
+                <span class="book-detail-value">${book.pages}</span>
+            </div>
+            ${
+              book.genre
+                ? `
+            <div class="book-detail">
+                <span class="book-detail-label">Genre:</span>
+                <span class="book-detail-value">${book.genre}</span>
+            </div>
+            `
+                : ""
+            }
+        </div>
+        <div class="book-actions">
+            <button class="btn-success toggle-read-btn" data-book-id="${
+              book.id
+            }">
+                <i class="fas fa-book-reader"></i> ${
+                  book.read ? "Mark Unread" : "Mark Read"
+                }
+            </button>
+            <button class="btn-danger remove-btn" data-book-id="${book.id}">
+                <i class="fas fa-trash"></i> Remove
+            </button>
+        </div>
+    `;
+
+  return bookCard;
+}
+
+// Handle form submission
+function handleFormSubmit(event) {
+  event.preventDefault();
+
+  // Get form values
+  const title = document.getElementById("title").value.trim();
+  const author = document.getElementById("author").value.trim();
+  const pages = parseInt(document.getElementById("pages").value);
+  const genre = document.getElementById("genre").value.trim();
+  const read = document.getElementById("read").checked;
+
+  // Validate fields
+  if (!title || !author || !pages) {
+    alert("Please fill in all required fields (Title, Author, and Pages)");
+    return;
+  }
+
+  // Add book to library
+  addBookToLibrary(title, author, pages, genre, read);
+
+  // Reset form
+  document.getElementById("book-form").reset();
+
+  // Close modal
+  document.getElementById("book-form-modal").close();
+
+  // Update display
+  displayBooks();
+}
+
+// Remove book
+function handleRemoveBook(event) {
+  if (!event.target.closest(".remove-btn")) return;
+
+  const bookId = event.target.closest(".remove-btn").dataset.bookId;
+
+  // Confirm deletion
+  if (confirm("Are you sure you want to remove this book from your library?")) {
+    // Remove book using Library class method
+    const removed = myLibrary.removeBook(bookId);
+
+    if (removed) {
+      // Update display
+      displayBooks();
+    }
+  }
+}
+
+// Handle toggle read
+function handleToggleReadStatus(event) {
+  if (!event.target.closest(".toggle-read-btn")) return;
+
+  const bookId = event.target.closest(".toggle-read-btn").dataset.bookId;
+
+  // Find book in library using Library class method
+  const book = myLibrary.findBookById(bookId);
+
+  if (book) {
+    // Toggle read using Book class method
+    book.toggleReadStatus();
+
+    // Update display
+    displayBooks();
+  }
+}
+
+// Add sample books
+function initializeSampleBooks() {
+  // Add sample books to library
+  addBookToLibrary("The Hobbit", "J.R.R. Tolkien", 310, "Fantasy", true);
+  addBookToLibrary("To Kill a Mockingbird", "Harper Lee", 281, "Fiction", true);
+  addBookToLibrary("1984", "George Orwell", 328, "Dystopian", false);
+  addBookToLibrary("Pride and Prejudice", "Jane Austen", 432, "Classic", true);
+
+  // Display initial books
+  displayBooks();
+}