Permalink
Browse files

Adds booklist app

  • Loading branch information...
kbbushman
kbbushman committed Jan 11, 2019
1 parent 45b87eb commit b848c5522b5562b6f112f02ea78e08f594f9266f
Showing with 191 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +51 −0 js-booklist-app/index.html
  3. +139 −0 js-booklist-app/js/app.js
@@ -0,0 +1 @@
.DS_Store
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- Booswatch CSS -->
<link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css">
<!-- JS -->
<script defer src="js/app.js"></script>
<title>MyBookList App</title>
</head>
<body>
<div class="container mt-4">
<h1 class="display-4 text-center">
<i class="fas fa-book-open text-primary"></i>
My<span class="text-primary">Book</span>List
</h1>
<form id="book-form">
<div class="form-group">
<label for="title">Title</label>
<input id="title" type="text" class="form-control" >
</div>
<div class="form-group">
<label for="author">Author</label>
<input id="author" type="text" class="form-control" >
</div>
<div class="form-group">
<label for="isbn">ISBN#</label>
<input id="isbn" type="text" class="form-control" >
</div>
<input type="submit" value="Add Book" class="btn btn-primary btn-block">
</form>
<table class="table table-striped mt-5">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN#</th>
<th></th>
</tr>
</thead>
<tbody id="book-list">

</tbody>
</table>
</div>
</body>
</html>
@@ -0,0 +1,139 @@
// ============================ CLASSES ============================

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

// UI Class
class UI {
static displayBooks() {
const books = Store.getBooks();

books.forEach(book => UI.addBookToList(book));
}

static 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="btn btn-danger btn-sm delete">X</a></td>
`;

list.appendChild(row);
}

static deleteBook(element) {
if (element.classList.contains('delete')) {
element.parentElement.parentElement.remove();
}
}

static showAlert(message, className) {
const div = document.createElement('div');
div.className = `alert alert-${className}`;
div.appendChild(document.createTextNode(message));
const container = document.querySelector('.container');
const form = document.querySelector('#book-form');
container.insertBefore(div, form);
// Remove alert after 3 seconds
setTimeout(() => document.querySelector('.alert').remove(), 3000);
}

static clearFields() {
document.querySelector('#title').value = '';
document.querySelector('#author').value = '';
document.querySelector('#isbn').value = '';
}
}

// Store Class (Local Storage)
class Store {
static getBooks() {
let books;
if (localStorage.getItem('books') === null) {
books = [];
} else {
books = JSON.parse(localStorage.getItem('books'));
}

return books;
}

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((book, index) => {
if (book.isbn === isbn) {
books.splice(index, 1);
}
});

localStorage.setItem('books', JSON.stringify(books));
}
}


// ============================ EVENTS ============================

// Display Books
document.addEventListener('DOMContentLoaded', UI.displayBooks);


// Add A Book
document.getElementById('book-form').addEventListener('submit', e => {
e.preventDefault();

// Get Values For New Book
const title = document.querySelector('#title').value;
const author = document.querySelector('#author').value;
const isbn = document.querySelector('#isbn').value;

// Validate Input
if (title === '' || author === '' || isbn === '') {
UI.showAlert('Please fill in all fields', 'danger');
} else {
// Instantiate New Book
const book = new Book(title, author, isbn);

// Add Book To UI
UI.addBookToList(book);

// Add Book To Local Storage
Store.addBook(book);

// Show Success Message
UI.showAlert('Book Added Successfully...', 'success');

// Clear Form Fields
UI.clearFields();
}
});


// Remove A Book
document.querySelector('#book-list').addEventListener('click', e => {
// Remove Book From UI
UI.deleteBook(e.target);

// Remove Book From Local Storage
Store.removeBook(e.target.parentElement.previousElementSibling.textContent);

// Show Success Message
UI.showAlert('Book Removed Successfully...', 'success');
});

0 comments on commit b848c55

Please sign in to comment.