Book database - Vanilla JS, Skeleton

book-database-vanilla-js-skeleton.markdown

Book database - Vanilla JS, Skeleton

A Pen by Vasilii V on CodePen.

License.

index.html

<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='title'>Author</label>
      <input type='text' id='author' class='u-full-width'>
    </div>
     <div>
      <label for='title'>ISBN</label>
      <input type='text' id='isbn' class='u-full-width'>
    </div>
    <div>
      <input type='submit' id='submitbook' value='Add book'>
    </div>  
  </form>
  <hr>
  <table class='u-full-width'>
    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>ISBN</th>
      </tr> 
    </thead>
    <tbody id='book-list'>
    </tbody>
   </table> 
  </hr>
</div>

script.js

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-btn'>X</a></td>
`
  list.appendChild(row);
 }
  showAlert(msg, classname) {
     const div = document.createElement('div');
  
  div.className = `alert ${classname}`;
  
  div.appendChild(document.createTextNode(msg));
  
  const container = document.querySelector('.container');
  
  const form = document.getElementById('book-form');
  
  container.insertBefore(div, form);
  
  
  setTimeout(()=>{
    document.querySelector('.alert').remove();
  }, 3000)
  }
  deleteBook(target) {
     if (target.className === 'delete-btn') {
    target.parentElement.parentElement.remove();
  }
  }
  clear() {
     document.getElementById('author').value = '';
  document.getElementById('title').value = '';
  document.getElementById('isbn').value = '';
  }
} 


class Store {
 static getBooks() {
    let books;
    if(!localStorage.getItem('books')) {
     // alert('null')
      books = [];
    }
   else {
     books = JSON.parse(localStorage.getItem('books'));
   }
   return books;
  }
  static displayBooks() {
    const books = Store.getBooks();
    books.forEach(e => {
      const ui = new UI();
      ui.addBookToList(e);
    })
  }
  static addBook(book) {
    const books = Store.getBooks();
    console.log(books);
     books.push(book); 
    localStorage.setItem('books', JSON.stringify(books));
  }
  
  static removeBook(isbn) {
    const books = Store.getBooks();
    for (let a = 0; a<books.length; a++) {
      if (books[a]['isbn'] === isbn) {
        books.splice(a,1);
      }
    }
    localStorage.setItem('books', JSON.stringify(books));
  }
}


document.getElementById('submitbook').addEventListener('click', e => {
  const title = document.getElementById('title').value,
        author = document.getElementById('author').value,
        isbn = document.getElementById('isbn').value;
  
 
  const book = new Book(title,author,isbn);
  

  const ui = new UI();
  
  if (title==='' || author==='' || isbn==='') {
     ui.showAlert('Error', 'error');  
  }
  else {
  ui.showAlert('Book added', 'success' );
   ui.addBookToList(book);
   Store.addBook(book); 
  ui.clear();
  } 
  e.preventDefault(); 
}) 


window.addEventListener("load", () => {
  Store.displayBooks();
  
})
document.getElementById('book-list').addEventListener('click', e => {
  
  
  const ui = new UI();
  
  ui.deleteBook(e.target);
  
  Store.removeBook(e.target.parentElement.previousElementSibling.textContent)
  
  ui.showAlert('Book removed', 'success')
  
 e.preventDefault();  
})

style.css

.success, .error {
  color: white;
  padding: 5px;
  margin 5px 0 15px 0;
}
.success {
  background:green;
}
.error {
  background: red;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />