appES6.js

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

class UI {
  addBookToList( book ) {
    const list = document.querySelector( '#book-list' );
    const row = document.createElement( 'tr' );

    row.innerHTML = `
      <tr>
        <td>${book.title}</td>
        <td>${book.author}</td>
        <td>${book.isbn}</td>
        <td><a href="#" class="delete">&times;</a></td>
      </tr>
    `;

    list.appendChild( row );
  }

  showAlert( message, alertType ) {
    // Create <div>
    const div = document.createElement( 'div' );
    // Add classes
    div.className = `alert ${alertType}`;
    // Add Message
    div.appendChild( document.createTextNode( message ) );
    // Get Parent, Sibling
    const container = document.querySelector( '.container' );
    const form = document.querySelector( '#book-form' );
    // Insert Alert
    container.insertBefore( div, form );

    // Timeout for Alert
    setTimeout( function() {
      document.querySelector( '.alert' ).remove();
    }, 3000 );
  }

  deleteBook( target ) {
    if ( target.className === 'delete' ) {
      target.parentElement.parentElement.remove();
      this.showAlert( 'Book deleted successfully', 'success' );
    }
  }

  clearFields() {
    document.querySelector( '#title' ).value = '';
    document.querySelector( '#author' ).value = '';
    document.querySelector( '#isbn' ).value = '';
  }
}

// Local Storage Class
class Store {
  // constructor() {}
  static getBooks() {
    let books;
    if ( localStorage.getItem( 'books' ) === null ) {
      books = [];
    } else {
      books = JSON.parse( localStorage.getItem( 'books' ) );
    }

    return books;
  }

  static displayBooks() {
    const books = Store.getBooks();

    books.forEach( function( book ) {
      const ui = new UI();
      // Add book to UI
      ui.addBookToList( book );
    } );
  }

  static addBook( book ) {
    const books = Store.getBooks();

    books.push( book );
    localStorage.setItem( 'books', JSON.stringify( books ) );
  }

  static deleteBook( isbn ) {
    console.log( isbn );
  }
}

// Instantiate the Store class on DOM load
document.addEventListener( 'DOMContentLoaded', function() {

  Store.displayBooks();

  document.querySelector( '.delete' ).addEventListener( 'click', function( e ) {
    const ui = new UI();
    console.log(e.target.parentElement.previousElementSibling.textContent);
    ui.deleteBook( e.target );
    Store.deleteBook( e.target.parentElement.previousElementSibling.textContent );
    // Store.deleteBook( e.target.parentElement.previousElementSibling.textContent );
    e.preventDefault();
  } );

} );

// Event Listener - Add Book
document.querySelector( '#book-form' ).addEventListener( 'submit', function( e ) {
  e.preventDefault();

  // Get form values
  const title = document.querySelector( '#title' ).value,
    author = document.querySelector( '#author' ).value,
    isbn = document.querySelector( '#isbn' ).value;

  // Book Instance
  const book = new Book( title, author, isbn );

  // UI Instance
  const ui = new UI();

  // Validation
  if ( title === '' || author === '' || isbn === '' ) {
    // Error Alert
    ui.showAlert( 'Please fill in all fields', 'error' );
  } else {
    // Add Book to List
    ui.addBookToList( book );

    // Add to LS
    Store.addBook( book );

    // Clear Fields on Submission
    ui.clearFields();

    ui.showAlert( `${title} added successfully`, 'success' );
    console.log( ui );
  }

} );