script.js

// ===========================================
// My Book Library - JavaScript
// PhillyCoderDojo Session 17: JavaScript & DOM
// ===========================================

// ============================================
// SECTION 1: Global Variables
// ============================================

// Our books array - will be loaded from localStorage
// In C#, this would be: List<Book> books = new List<Book>();
let books = [];

// DOM element references - set when page loads
let bookForm;
let titleInput;
let authorInput;
let searchInput;
let bookList;
let bookCount;
let emptyMessage;

// ============================================
// SECTION 2: localStorage Functions
// ============================================

/**
 * Save books to localStorage
 * Think of this like File.WriteAllText() in C#
 */
function saveBooks() {
    // JSON.stringify converts our array to a text string
    // localStorage can only store strings!
    const booksJson = JSON.stringify(books);
    localStorage.setItem('myBooks', booksJson);
    console.log('Saved', books.length, 'books to localStorage');
}

/**
 * Load books from localStorage
 * Think of this like File.ReadAllText() in C#
 */
function loadBooks() {
    const savedBooks = localStorage.getItem('myBooks');

    if (savedBooks) {
        // JSON.parse converts the text string back to an array
        books = JSON.parse(savedBooks);
        console.log('Loaded', books.length, 'books from localStorage');
    } else {
        // No saved data - start with some sample books
        books = getDefaultBooks();
        console.log('No saved books found, using defaults');
    }
}

/**
 * Get default sample books
 * In C#, this would return a new List<Book> with initial data
 */
function getDefaultBooks() {
    return [
        {
            id: 1,
            title: 'Harry Potter and the Sorcerer\'s Stone',
            author: 'J.K. Rowling'
        },
        {
            id: 2,
            title: 'The Hobbit',
            author: 'J.R.R. Tolkien'
        },
        {
            id: 3,
            title: 'Diary of a Wimpy Kid',
            author: 'Jeff Kinney'
        },
        {
            id: 4,
            title: 'Percy Jackson: The Lightning Thief',
            author: 'Rick Riordan'
        }
    ];
}

// ============================================
// SECTION 3: Display Functions
// ============================================

/**
 * Display all books on the page
 * This is where DOM manipulation happens!
 */
function displayBooks(booksToDisplay) {
    // Use all books if no specific list provided
    if (booksToDisplay === undefined) {
        booksToDisplay = books;
    }

    // Clear the current display
    // innerHTML = '' removes all child elements
    bookList.innerHTML = '';

    // Update the book count
    updateBookCount();

    // Check if we have any books to show
    if (booksToDisplay.length === 0) {
        emptyMessage.style.display = 'block';
        return;
    } else {
        emptyMessage.style.display = 'none';
    }

    // Loop through each book and create a card
    // In C#, this would be: foreach (var book in booksToDisplay)
    booksToDisplay.forEach(function(book) {
        const card = createBookCard(book);
        bookList.appendChild(card);
    });
}

/**
 * Create a book card element
 * This shows how to create DOM elements dynamically
 *
 * In C#/WPF, this would be like creating a new UserControl
 */
function createBookCard(book) {
    // Step 1: Create the container div
    const card = document.createElement('div');
    card.className = 'book-card';

    // Add a data attribute to store the book's ID
    // This helps us find the book later
    card.setAttribute('data-id', book.id);

    // Step 2: Create the title element
    const title = document.createElement('h3');
    title.textContent = book.title;

    // Step 3: Create the author element
    const author = document.createElement('p');
    author.textContent = 'by ' + book.author;

    // Step 4: Create the delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete-btn';
    deleteBtn.textContent = 'Delete';

    // Step 5: Add click event to delete button
    // In C#, this would be: deleteBtn.Click += (sender, e) => DeleteBook(book.id);
    deleteBtn.addEventListener('click', function() {
        deleteBook(book.id);
    });

    // Step 6: Assemble the card
    card.appendChild(title);
    card.appendChild(author);
    card.appendChild(deleteBtn);

    return card;
}

/**
 * Update the book count display
 */
function updateBookCount() {
    bookCount.textContent = books.length;
}

// ============================================
// SECTION 4: CRUD Operations
// ============================================

/**
 * Add a new book
 * CRUD = Create, Read, Update, Delete
 * This is the "Create" operation
 */
function addBook(title, author) {
    // Validate inputs
    if (!title || !author) {
        alert('Please enter both a title and author!');
        return false;
    }

    // Create a new book object
    // Date.now() gives us a unique ID (milliseconds since 1970)
    const newBook = {
        id: Date.now(),
        title: title.trim(),
        author: author.trim()
    };

    // Add to our array
    // In C#: books.Add(newBook);
    books.push(newBook);

    // Save to localStorage
    saveBooks();

    // Refresh the display
    displayBooks();

    console.log('Added new book:', newBook.title);
    return true;
}

/**
 * Delete a book by ID
 * This is the "Delete" operation in CRUD
 */
function deleteBook(id) {
    // Ask for confirmation
    const confirmed = confirm('Are you sure you want to delete this book?');

    if (!confirmed) {
        return; // User clicked Cancel
    }

    // Filter out the book with this ID
    // In C#: books = books.Where(b => b.Id != id).ToList();
    books = books.filter(function(book) {
        return book.id !== id;
    });

    // Save to localStorage
    saveBooks();

    // Refresh the display
    displayBooks();

    console.log('Deleted book with ID:', id);
}

/**
 * Search/filter books by title or author
 * This is like LINQ's Where() in C#
 */
function searchBooks(searchTerm) {
    // Convert to lowercase for case-insensitive search
    const term = searchTerm.toLowerCase().trim();

    if (term === '') {
        // Empty search - show all books
        displayBooks(books);
        return;
    }

    // Filter books that match the search term
    // In C#: books.Where(b => b.Title.Contains(term) || b.Author.Contains(term))
    const filtered = books.filter(function(book) {
        const titleMatch = book.title.toLowerCase().includes(term);
        const authorMatch = book.author.toLowerCase().includes(term);
        return titleMatch || authorMatch;
    });

    displayBooks(filtered);
    console.log('Found', filtered.length, 'books matching "' + term + '"');
}

// ============================================
// SECTION 5: Event Handlers
// ============================================

/**
 * Handle form submission
 * This runs when user clicks "Add Book" button
 */
function handleFormSubmit(event) {
    // IMPORTANT: Prevent the default form behavior
    // Without this, the page would refresh and lose our data!
    event.preventDefault();

    // Get values from input fields
    const title = titleInput.value;
    const author = authorInput.value;

    // Try to add the book
    const success = addBook(title, author);

    if (success) {
        // Clear the form inputs
        // form.reset() clears all inputs in the form
        bookForm.reset();

        // Focus back on the title input for easy adding
        titleInput.focus();
    }
}

/**
 * Handle search input
 * This runs every time the user types in the search box
 */
function handleSearchInput(event) {
    const searchTerm = event.target.value;
    searchBooks(searchTerm);
}

// ============================================
// SECTION 6: Initialization
// ============================================

/**
 * Initialize the application
 * This runs when the DOM is fully loaded
 */
function initializeApp() {
    console.log('Initializing Book Library...');

    // Step 1: Get references to DOM elements
    // These are like finding controls on a Windows Form
    bookForm = document.getElementById('bookForm');
    titleInput = document.getElementById('titleInput');
    authorInput = document.getElementById('authorInput');
    searchInput = document.getElementById('searchInput');
    bookList = document.getElementById('bookList');
    bookCount = document.getElementById('bookCount');
    emptyMessage = document.getElementById('emptyMessage');

    // Verify all elements were found
    if (!bookForm || !titleInput || !authorInput || !bookList) {
        console.error('Could not find required DOM elements!');
        return;
    }

    // Step 2: Load saved books from localStorage
    loadBooks();

    // Step 3: Display the books
    displayBooks();

    // Step 4: Set up event listeners
    // In C#, these would be like: button.Click += HandleClick;

    // Listen for form submissions
    bookForm.addEventListener('submit', handleFormSubmit);

    // Listen for search input
    searchInput.addEventListener('input', handleSearchInput);

    console.log('Book Library is ready!');
    console.log('Total books:', books.length);
}

// ============================================
// SECTION 7: Start the Application
// ============================================

// Wait for the DOM to be fully loaded before running our code
// This is VERY important! Without this, our elements might not exist yet.
//
// In C#/WPF, this is similar to the Window.Loaded event
document.addEventListener('DOMContentLoaded', initializeApp);

// ============================================
// BONUS: Debugging Tips
// ============================================

// You can open the browser console (F12 -> Console tab) and type:
//
// books              - See all books
// books.length       - Count of books
// localStorage       - See what's saved
// books.push({id: 999, title: 'Test', author: 'Me'})  - Add a book manually
// displayBooks()     - Refresh the display
//
// This is great for testing and understanding how the code works!