app.js

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

class UI {
  static displayBooks() {
    const books = Store.getBooks();
    books.forEach((book) => UI.addBookToList(book));
  }
  static addBookToList(book) {
    const list = document.querySelector('#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">Remove</a></td>
    `;
    list.appendChild(row);
  }
  static deleteBook(target) {
    if(target.classList.contains('delete') ) {
      target.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.querySelector('#book-form');

    container.insertBefore(div, form); 

    setTimeout(() => document.querySelector('.alert').remove(), 1000); 
  }
  static clearFields() {
    document.querySelector('#title').value = '';
    document.querySelector('#author').value = '';
    document.querySelector('#isbn').value = '';
  }
}

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));
    });
  }
}

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

document.querySelector('#book-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const title = document.querySelector('#title').value;
  const author = document.querySelector('#author').value;
  const newISBN = document.querySelector('#isbn').value;
  const booksInStorage = Store.getBooks();
  const isbnList = [];

  booksInStorage.map((singleBook) => {
    isbnList.push(singleBook.isbn);
  });

  if(title === '' || author === '' || newISBN === '') {
    UI.showAlert('Please fill in all fields', 'danger');
  }
  else if(isbnList.includes(newISBN)) {
    UI.showAlert('This ISBN is already being used', 'danger');
  }
  else {
    const book = new Book(title, author, newISBN);
    UI.addBookToList(book);
    Store.addBook(book);
    UI.showAlert('Book successfully added', 'success');
    UI.clearFields();
  }
});

document.querySelector('#book-list').addEventListener('click', (e) => {
  UI.deleteBook(e.target)
  Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
  UI.showAlert('Book successfully removed', 'success');
});