Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Book Constructor
- function Book(title, author, isbn) {
- this.title = title;
- this.author = author;
- this.isbn = isbn;
- }
- // Get Books from LS
- Book.prototype.getBooks = function() {
- let books;
- if(localStorage.getItem('books') === null) {
- books = [];
- } else {
- books = JSON.parse(localStorage.getItem('books'));
- }
- return books;
- }
- // Add Book to LS
- Book.prototype.addBook = function(book) {
- books = book.getBooks();
- books.push(book);
- localStorage.setItem('books', JSON.stringify(books));
- }
- // Remove book from LS
- Book.prototype.removeBook = function(isbn) {
- books = book.getBooks();
- books.forEach(function(book, index){
- if(book.isbn === isbn) {
- books.splice(index, 1);
- }
- });
- localStorage.setItem('books', JSON.stringify(books));
- }
- // Display Books UI
- Book.prototype.displayBooks = function() {
- books = book.getBooks();
- books.forEach(function(book){
- const ui = new UI;
- // Add book to UI
- ui.addBookToList(book);
- });
- }
- // UI Constructor
- function UI() {}
- // Add Book To List
- UI.prototype.addBookToList = function(book){
- const list = document.getElementById('book-list');
- // Create tr element
- const row = document.createElement('tr');
- // Insert cols
- row.innerHTML = `
- <td>${book.title}</td>
- <td>${book.author}</td>
- <td>${book.isbn}</td>
- <td><a href="#" class="delete">X<a></td>
- `;
- list.appendChild(row);
- }
- // Show Alert
- UI.prototype.showAlert = function(message, className) {
- // Create div
- const div = document.createElement('div');
- // Add classes
- div.className = `alert ${className}`;
- // Add text
- div.appendChild(document.createTextNode(message));
- // Get parent
- const container = document.querySelector('.container');
- // Get form
- const form = document.querySelector('#book-form');
- // Insert alert
- container.insertBefore(div, form);
- // Timeout after 3 sec
- setTimeout(function(){
- document.querySelector('.alert').remove();
- }, 3000);
- }
- // Delete Book
- UI.prototype.deleteBook = function(target){
- if(target.className === 'delete') {
- target.parentElement.parentElement.remove();
- }
- }
- // Clear Fields
- UI.prototype.clearFields = function() {
- document.getElementById('title').value = '';
- document.getElementById('author').value = '';
- document.getElementById('isbn').value = '';
- }
- // DOM Load Event
- const book = new Book();
- document.addEventListener('DOMContentLoaded', book.displayBooks);
- // Event Listener for 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
- const ui = new UI();
- // Validate
- 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
- book.addBook(book);
- // Show success
- ui.showAlert('Book Added!', 'success');
- // Clear fields
- ui.clearFields();
- }
- e.preventDefault();
- });
- // Event Listener for delete
- document.getElementById('book-list').addEventListener('click', function(e){
- // Instantiate UI
- const ui = new UI();
- // Delete book
- ui.deleteBook(e.target);
- // Remove from LS
- book.removeBook(e.target.parentElement.previousElementSibling.textContent);
- // Show message
- ui.showAlert('Book Removed!', 'success');
- e.preventDefault();
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement