JS es5 vs es6 difference

es5es6.js

// Book Constructor
function Book(title, author, isbn) {
	this.title = title;
	this.author = author;
	this.isbn = this.isbn;
}

// UI Constructor
function UI() {}
UI.prototype.addBookToList = function (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="delete" style="text-decoration: none;">X</a></td>`;

	list.appendChild(row);
};
UI.prototype.showAlert = function (message, className) {
	const div = document.createElement('div');
	div.className = `alert ${className}`;
	// div.innerText = message;
	div.appendChild(document.createTextNode(message));
	const container = document.querySelector('.container');
	const form = document.querySelector('#book-form');
	container.insertBefore(div, form);
	setTimeout(function () {
		document.querySelector('.alert').remove();
	}, 3000);
};
UI.prototype.clearFields = function () {
	document.getElementById('title').value = '';
	document.getElementById('author').value = '';
	document.getElementById('isbn').value = '';
};
UI.prototype.deleteBook = function (target) {
	if (target.className === 'delete') {
		target.parentElement.parentElement.remove();
	}
};

function Store() {}
Store.prototype.addBooks = function (book) {
	let books;
	if (localStorage.getItem('books') === null) {
		books = [];
	} else {
		books = JSON.parse(localStorage.getItem('books'));
	}
	books.push(book);
	localStorage.setItem('books', JSON.stringify(books));
};
Store.prototype.removeBook = function (isbn) {
	let books;
	if (localStorage.getItem('books') === null) {
		books = [];
	} else {
		books = JSON.parse(localStorage.getItem('books'));
	}
	books.forEach(function (book, index) {
		if (book.isbn === isbn) {
			books.splice(index, 1);
		}
	});
	localStorage.setItem('books', JSON.stringify(books));
};

//
// Event Listeners -------------------------------------------------------

document.addEventListener('DOMContentLoaded', function () {
	let books;
	if (localStorage.getItem('books') === null) {
		books = [];
	} else {
		books = JSON.parse(localStorage.getItem('books'));
	}
	books.forEach(function (book) {
		const ui = new UI();
		ui.addBookToList(book);
	});
});

// Event Listener - add book
document.getElementById('book-form').addEventListener('submit', function (e) {
	// Get form values
	const title = document.getElementById('title').value,
		author = document.getElementById('author').value,
		isbn = document.getElementById('isbn').value;

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

	// Instantiate UI object
	const ui = new UI();
	const store = new Store();
	console.log(ui);

	// Validate
	if (title === '' || author === '' || isbn === '') {
		ui.showAlert('Please fill in all fields', 'error');
	} else {
		// Add book to UI list
		ui.addBookToList(book);

		store.addBooks(book);

		ui.showAlert('Book Added!', 'success');
		// Clear fields
		ui.clearFields();
	}

	e.preventDefault();
});

// Event Listener - Delete
document.getElementById('book-list').addEventListener('click', function (e) {
	const ui = new UI();
	const store = new Store();
	ui.deleteBook(e.target);

	store.removeBook(e.target.parentElement.previousElementSibling.textContent);

	ui.showAlert('Book removed!', 'success');
	e.preventDefault();
});


// es6 below ---------------------------------------------------------------------------------------------------------


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

class UI {
	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="delete" style="text-decoration: none;">X</a></td>`;
		list.appendChild(row);
	}
	showAlert(message, className) {
		const div = document.createElement('div');
		div.className = `alert ${className}`;
		// div.innerText = message;
		div.appendChild(document.createTextNode(message));
		const container = document.querySelector('.container');
		const form = document.querySelector('#book-form');
		container.insertBefore(div, form);
		setTimeout(function () {
			document.querySelector('.alert').remove();
		}, 3000);
	}
	deleteBook(target) {
		if (target.className === 'delete') {
			target.parentElement.parentElement.remove();
		}
	}
	clearFields() {
		document.getElementById('title').value = '';
		document.getElementById('author').value = '';
		document.getElementById('isbn').value = '';
	}
}

// Local Storage Class
class Store {
	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();
			ui.addBookToList(book);
		});
	}
	static addBooks(book) {
		const books = Store.getBooks();
		books.push(book);
		localStorage.setItem('books', JSON.stringify(books));
	}
	static removeBook(isbn) {
		const books = Store.getBooks();
		books.forEach(function (book, index) {
			if (book.isbn === isbn) {
				books.splice(index, 1);
			}
		});
		localStorage.setItem('books', JSON.stringify(books));
	}
}

//
// Event Listeners  ----------------------

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

// Event Listener - add book
document.getElementById('book-form').addEventListener('submit', function (e) {
	// Get form values
	const title = document.getElementById('title').value,
		author = document.getElementById('author').value,
		isbn = document.getElementById('isbn').value;

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

	// Instantiate UI object
	const ui = new UI();

	console.log(ui);

	// Validate
	if (title === '' || author === '' || isbn === '') {
		ui.showAlert('Please fill in all fields', 'error');
	} else {
		// Add book to UI list
		ui.addBookToList(book);
		Store.addBooks(book);

		ui.showAlert('Book Added!', 'success');
		// Clear fields
		ui.clearFields();
	}

	e.preventDefault();
});

// Event Listener - Delete
document.getElementById('book-list').addEventListener('click', function (e) {
	const ui = new UI();

	ui.deleteBook(e.target);

	Store.removeBook(e.target.parentElement.previousElementSibling.textContent);

	ui.showAlert('Book removed!', 'success');
	e.preventDefault();
});