script.js

// Book Class

class Book{
    constructor(title, author, isbn){
        this.title = title
        this.author = author
        this.isbn = isbn
    }
}

// UI Class

class UI{
    static displayBooks(){
        const books = Store.getBooks()
        books.forEach((book) => UI.addBookToList(book))
    }

    static addBookToList(book){
        const list = document.getElementById('book-list')
        const row = document.createElement('tr')
        row.innerHTML = `
            <td>${book.title}</td>
            <td>${book.author}</td>
            <td>${book.isbn}</td>
            <td><a href='#' class='btn btn-danger btn-sm delete'>X</a></td>
        `
        list.appendChild(row)
    }

    static deleteBook(el){
        if(el.classList.contains('delete')){
            el.parentElement.parentElement.remove()
        }
    }

    static showAlert(message, className){
        const div = document.createElement('div')
        div.className = `alert alert-${className}`
        div.appendChild(document.createTextNode(message))
        const container = document.querySelector('.container')
        const form = document.getElementById('book-form')
        container.insertBefore(div, form)

        // Vanish in 5 sec

        setTimeout(() => {
            document.querySelector('.alert').remove()
        }, 5000)
    }

    static clearFields(){
        document.getElementById('title').value = ''
        document.getElementById('author').value = ''
        document.getElementById('isbn').value = ''
    }
}

// Storage Class

class Store{
    static getBooks(){
        let books
        if(localStorage.getItem('books') === null){
            books = []
        }else{
            books = JSON.parse(localStorage.getItem('books'))
        }

        return books
    }

    static addBook(book){
        const books = Store.getBooks()
        books.push(book)
        localStorage.setItem('books', JSON.stringify(books))
    }

    static removeBook(isbn){
        const books = Store.getBooks()
        books.forEach((book, index) => {
            if(book.isbn === isbn){
                books.splice(index, 1)
            }
        })
        localStorage.setItem('books', JSON.stringify(books))
    }
}

// Event: Display Books

document.addEventListener('DOMContentLoaded', UI.displayBooks)

// Event: Add a book

document.getElementById('book-form').addEventListener('submit', (e)=>{
    e.preventDefault();

    // Get form values
    const title = document.getElementById('title').value
    const author = document.getElementById('author').value
    const isbn = document.getElementById('isbn').value

    // Validate

    if(title === '' || author === '' || isbn === ''){
        UI.showAlert('Please Fill In All Fields', 'danger')
    }else{   

        // Instantiate Books
        const book = new Book(title, author, isbn)
        
        // Add Book to UI
        UI.addBookToList(book)

        // Add Book To Store

        Store.addBook(book)

        // Show Success Message
        UI.showAlert('Book Added', 'success')

        // Clear fields
        UI.clearFields()
    }
})

// Event: Remove a book

document.getElementById('book-list').addEventListener('click', (e) => {

    // Remove Book From UI
    UI.deleteBook(e.target)

    // Remove Book From Store
    Store.removeBook(e.target.parentElement.previousElementSibling.textContent)

    // Show Success Message
    UI.showAlert('Book Removed', 'success')
})