Advertisement
Guest User

app.js

a guest
Jun 24th, 2019
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.71 KB | None | 0 0
  1. // Book Constructor
  2. function Book(title, author, isbn) {
  3. this.title = title;
  4. this.author = author;
  5. this.isbn = isbn;
  6. }
  7.  
  8. // Get Books from LS
  9. Book.prototype.getBooks = function() {
  10. let books;
  11. if(localStorage.getItem('books') === null) {
  12. books = [];
  13. } else {
  14. books = JSON.parse(localStorage.getItem('books'));
  15. }
  16. return books;
  17. }
  18.  
  19.  
  20. // Add Book to LS
  21. Book.prototype.addBook = function(book) {
  22.  
  23. books = book.getBooks();
  24. books.push(book);
  25. localStorage.setItem('books', JSON.stringify(books));
  26. }
  27.  
  28. // Remove book from LS
  29. Book.prototype.removeBook = function(isbn) {
  30. books = book.getBooks();
  31. books.forEach(function(book, index){
  32. if(book.isbn === isbn) {
  33. books.splice(index, 1);
  34. }
  35. });
  36. localStorage.setItem('books', JSON.stringify(books));
  37. }
  38.  
  39.  
  40. // Display Books UI
  41. Book.prototype.displayBooks = function() {
  42.  
  43. books = book.getBooks();
  44. books.forEach(function(book){
  45. const ui = new UI;
  46.  
  47. // Add book to UI
  48. ui.addBookToList(book);
  49. });
  50. }
  51.  
  52.  
  53. // UI Constructor
  54. function UI() {}
  55.  
  56. // Add Book To List
  57. UI.prototype.addBookToList = function(book){
  58. const list = document.getElementById('book-list');
  59. // Create tr element
  60. const row = document.createElement('tr');
  61. // Insert cols
  62. row.innerHTML = `
  63. <td>${book.title}</td>
  64. <td>${book.author}</td>
  65. <td>${book.isbn}</td>
  66. <td><a href="#" class="delete">X<a></td>
  67. `;
  68.  
  69. list.appendChild(row);
  70. }
  71.  
  72.  
  73. // Show Alert
  74. UI.prototype.showAlert = function(message, className) {
  75. // Create div
  76. const div = document.createElement('div');
  77. // Add classes
  78. div.className = `alert ${className}`;
  79. // Add text
  80. div.appendChild(document.createTextNode(message));
  81. // Get parent
  82. const container = document.querySelector('.container');
  83. // Get form
  84. const form = document.querySelector('#book-form');
  85. // Insert alert
  86. container.insertBefore(div, form);
  87.  
  88. // Timeout after 3 sec
  89. setTimeout(function(){
  90. document.querySelector('.alert').remove();
  91. }, 3000);
  92. }
  93.  
  94. // Delete Book
  95. UI.prototype.deleteBook = function(target){
  96. if(target.className === 'delete') {
  97. target.parentElement.parentElement.remove();
  98. }
  99. }
  100.  
  101. // Clear Fields
  102. UI.prototype.clearFields = function() {
  103. document.getElementById('title').value = '';
  104. document.getElementById('author').value = '';
  105. document.getElementById('isbn').value = '';
  106. }
  107.  
  108.  
  109. // DOM Load Event
  110. const book = new Book();
  111. document.addEventListener('DOMContentLoaded', book.displayBooks);
  112.  
  113. // Event Listener for add book
  114. document.getElementById('book-form').addEventListener('submit', function(e){
  115. // Get form values
  116. const title = document.getElementById('title').value,
  117. author = document.getElementById('author').value,
  118. isbn = document.getElementById('isbn').value
  119.  
  120. // Instantiate book
  121. const book = new Book(title, author, isbn);
  122.  
  123. // Instantiate UI
  124. const ui = new UI();
  125.  
  126. // Validate
  127. if(title === '' || author === '' || isbn === '') {
  128. // Error alert
  129. ui.showAlert('Please fill in all fields', 'error');
  130. } else {
  131. // Add book to list
  132. ui.addBookToList(book);
  133.  
  134. // Add to LS
  135. book.addBook(book);
  136.  
  137. // Show success
  138. ui.showAlert('Book Added!', 'success');
  139.  
  140. // Clear fields
  141. ui.clearFields();
  142. }
  143.  
  144. e.preventDefault();
  145. });
  146.  
  147. // Event Listener for delete
  148. document.getElementById('book-list').addEventListener('click', function(e){
  149.  
  150. // Instantiate UI
  151. const ui = new UI();
  152.  
  153. // Delete book
  154. ui.deleteBook(e.target);
  155.  
  156. // Remove from LS
  157. book.removeBook(e.target.parentElement.previousElementSibling.textContent);
  158.  
  159. // Show message
  160. ui.showAlert('Book Removed!', 'success');
  161.  
  162. e.preventDefault();
  163. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement