linker.js

//Book Class:Represents a book
class Book{
	constructor(title,author,isbn){
		this.title = title;
		this.author = author;
		this.isbn = isbn;
	}
}
//UI Class: handle UI taskss
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">X</a></td>`;

		list.appendChild(row);
	}
		static deleteBooks(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.querySelector('#book-form');
			container.insertBefore(div,form);
			setTimeout(() => document.querySelector('.alert').remove(),1500);
		}
	static clearFields(){
		document.querySelector('#title').value = '';
				document.querySelector('#author').value = '';
						document.querySelector('#isbn').value = '';
	}
}
//Store Class : Handles Storage
class Store{
	static getBooks(){
		let books;
		if(localStorage.getItem('books')=== null){
				books = [];

		}else{
			books = JSON.parse(localStorage.getItem('books'));
		}
		return books;

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

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

//Events : Display Books
document.addEventListener('DOMContentLoaded', UI.displayBooks);

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

	 //Get form values
	const title = document.querySelector('#title').value;
	const author = document.querySelector('#author').value;
	const isbn = document.querySelector('#isbn').value;
		//Validation
		if(title === ''||author ===''||isbn === ''){
			UI.showAlert('Please fill in all the fields','danger');
		}else{
	//Instantiate book
	const book = new Book(title,author,isbn);
	
	//add book to list
	UI.addBookToList(book);
	//Add book to store
	Store.addBooks(book);
	UI.showAlert('Book has been added','success');

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

//Event Remove a Book
document.querySelector('#book-list').addEventListener('click',function(e){
	UI.deleteBooks(e.target);
		//remove from storage
		Store.removeBooks(e.target.parentElement.previousElementSibling.textContent);
	UI.showAlert('Book has been deleted','success');
});