script.js

const form = document.getElementById('book-form');
const bookList = document.getElementById('book-list');

// Load books from localStorage
document.addEventListener('DOMContentLoaded', loadBooks);

form.addEventListener('submit', function (e) {
    e.preventDefault();

    const bookName = document.getElementById('bookName').value;
    const authorName = document.getElementById('authorName').value;

    addBookToUI(bookName, authorName);
    saveBookToStorage(bookName, authorName);

    form.reset();
});

// Create table row dynamically
function addBookToUI(book, author) {
    const tr = document.createElement('tr');

    tr.innerHTML = `
        <td>${book}</td>
        <td>${author}</td>
        <td><button class="delete-btn">Delete</button></td>
    `;

    bookList.appendChild(tr);
}

// Delete book using event bubbling
bookList.addEventListener('click', function (e) {
    if (e.target.classList.contains('delete-btn')) {
        const row = e.target.parentElement.parentElement;
        removeBookFromStorage(
            row.children[0].textContent,
            row.children[1].textContent
        );
        row.remove();
    }
});

// Local Storage Functions
function getBooks() {
    return JSON.parse(localStorage.getItem('books')) || [];
}

function saveBookToStorage(book, author) {
    const books = getBooks();
    books.push({ book, author });
    localStorage.setItem('books', JSON.stringify(books));
}

function loadBooks() {
    const books = getBooks();
    books.forEach(item => addBookToUI(item.book, item.author));
}

function removeBookFromStorage(book, author) {
    let books = getBooks();
    books = books.filter(
        item => !(item.book === book && item.author === author)
    );
    localStorage.setItem('books', JSON.stringify(books));
}