Breaking News: Grepper is joining You.com. Read the official announcement!

how to creat a booklists using javascript

shaheryar abid answered on October 30, 2022 Popularity 1/10 Helpfulness 1/10

answer how to creat a booklists using javascript

related how to creat a booklists using javascript

how to creat a booklists using javascript

Comment

class Book {
    constructor(title,author,isbn){
        this.title = title;
        this.author = author;
        this.isbn = isbn;
    }
}
 
 
class UI {
 
 
    static displayBooks(){
        let books = Store.getBooks();
 
        books.forEach((book) => UI.addBookToList(book));
 
 
    }
 
    static addBookToList(book){
        const list = document.querySelector('#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 clearFields(){
        document.querySelector('#title').value = '';
        document.querySelector('#author').value = '';
        document.querySelector('#isbn').value = '';
    }
 
 
    static deleteBook(el){
        if(el.classList.contains('delete')){
            el.parentElement.parentElement.remove();
        }
    }
 
 
    static showAlerts(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);
 
 
        setTimeout(() => document.querySelector('.alert').remove(), 3000);
    }
}
 
 
class Store {
    static getBooks() {
        let books;
        if(localStorage.getItem('books') === null) {
          books = [];
        } else {
          books = JSON.parse(localStorage.getItem('books'));
        }
 
        return books;
      }
 
    static saveBook(book){
        let books;
        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));
    }
}
 
 
document.addEventListener('DOMContentLoaded',UI.displayBooks);
 
 
document.querySelector('#book-form').addEventListener('submit',(e) => {
 
 
    e.preventDefault();
 
 
    const title = document.querySelector('#title').value;
    const author = document.querySelector('#author').value;
    const isbn = document.querySelector('#isbn').value;
 
    if(title === '' || author === '' || isbn === ''){
        UI.showAlerts('Please fill in all details...','danger');
    } else {
 
        const book = new Book(title,author,isbn);
 
 
        UI.addBookToList(book);
 
 
        Store.saveBook(book);
 
 
        UI.showAlerts('Book Added','success');
 
 
        UI.clearFields();
    }
 
});
 
 
document.querySelector('#book-list').addEventListener('click',(e) => {
    UI.deleteBook(e.target);
 
    Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
 
    UI.showAlerts('Book Removed','success');
});

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: www.sourcecodester.com

Tags: javascript using

Link to this answer
Share Copy Link

Contributed on Oct 30 2022

shaheryar abid

0 Answers Avg Quality 2/10

Closely Related Answers

how to creat a booklists using javascript

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/fontawesome/css/all.css">
    <title>Booklist App</title>
</head>
<body>
 
    <div class="container mt-4">
 
        <h1 class="display-4 text-center">
            <i class="fa fa-book-open text-primary"></i>Book<span class="text-primary">List</span> App
        </h1>
 
 
        <form id="book-form">
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" id="title" class="form-control" />
            </div>
 
            <div class="form-group">
                <label for="author">Author</label>
                <input type="text" id="author" class="form-control" />
            </div>
 
            <div class="form-group">
                <label for="isbn">ISBN#</label>
                <input type="text" id="isbn" class="form-control" />
            </div>
 
            <input type="submit" value="Submit" 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>Action</th>
                </tr>
            </thead>
 
            <tbody id="book-list">
 
            </tbody>
        </table>
    </div>
 
    <script src="app.js"></script>
</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: www.sourcecodester.com

Tags: using javascript

Link to this answer
Share Copy Link

Contributed on Oct 30 2022

shaheryar abid

0 Answers Avg Quality 2/10

how to creat a booklists using javascript

Contents

More Related Answers

how to creat a booklists using javascript

Closely Related Answers

how to creat a booklists using javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.