Add files via upload

suryajack663 · Nov 25, 2022 · 1d19987 · 1d19987
1 parent 69320c9
commit 1d19987
Show file tree

Hide file tree

Showing 2 changed files with 220 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+        .success, .error{
+            color: white;
+            padding: 5px;
+            margin: 5px 0 15px 0;
+        }
+
+        .success {
+            background: green;
+        }
+
+        .error{
+            background: red;
+        }
+    </style>
+    <title>Book List</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Add Book</h1>
+        <form id="book-form">
+          <div>
+            <label for="title">Title</label>
+            <input type="text" id="title" class="u-full-width">
+          </div>
+          <div>
+            <label for="author">Author</label>
+            <input type="text" id="author" class="u-full-width">
+          </div>
+          <div>
+            <label for="isbn">ISBN#</label>
+            <input type="text" id="isbn" class="u-full-width">
+          </div>
+          <div>
+            <input type="submit" value="Submit" class="u-full-width">
+          </div>
+        </form>
+        <table class="u-full-width">
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Author</th>
+              <th>ISBN</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody id="book-list"></tbody>
+        </table>
+      </div>
+
+    <script src="oop.js"></script>
+</body>
+</html>
diff --git a/oop.js b/oop.js
@@ -0,0 +1,160 @@
+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');
+    // 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);
+  }
+
+  showAlert(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);
+  }
+
+  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;
+
+      // Add book to UI
+      ui.addBookToList(book);
+    });
+  }
+
+  static addBook(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));
+  }
+}
+
+// DOM Load Event
+document.addEventListener('DOMContentLoaded', Store.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();
+
+  console.log(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
+    Store.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
+  Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
+
+  // Show message
+  ui.showAlert('Book Removed!', 'success');
+
+  e.preventDefault();
+});
+
+