JS file

const addBookBtn = document.querySelector(".add-book");
const addBookForm = document.querySelector(".overlay-cont");
const deleteBookButton = document.querySelector(".delete-btn");
// const bookCards = document.querySelectorAll(".book-card");
const inputFocus = document.querySelector("#name");
const addMessage = document.querySelector('.add-message');
const deleteMessage = document.querySelector('.delete-message');
// const form = document.querySelector("form");
const submitter = document.querySelector('.submit-btn');
const booksContainer = document.querySelector('.books-wrapper');
// const formDetails = new FormData(form, submitter);

// INITIAL BOOKS DISPLAYED
const myLibrary = [{title: 'Title', author: 'Author', pages: 111, read: 'on'}];
displayBooks();

// const myLibrary = [];

//  BOOK STORAGE
function Book(title, author = 'Unknown', pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;
    this.info = function() {
        return `The book '${this.title}' by ${this.author}, ${this.pages} pages, ${this.read}.`;
    }
}

function addBookToLibrary() {
    const title = document.querySelector('#name').value;
    const author = document.querySelector('#author').value;
    const pages = parseInt(document.querySelector('#pages').value);
    const read = document.querySelector('#read').value;

    const newBook = new Book(title, author, pages, read)
    myLibrary.push(newBook);
    // console.table(myLibrary);

    addMessage.style.visibility = 'visible';
    setTimeout(function() {
        addMessage.style.visibility = 'hidden';
    }, 1000);


    displayBooks();
}

submitter.addEventListener('click', function(event) {
    event.preventDefault();
    addBookToLibrary();
    addBookForm.style.visibility = "hidden";
})


// BOOK DISPLAY

function addBookCard(name, author, pages, read) {
    const bookCard = document.createElement('div');
    bookCard.classList.add('book-card');
    bookCard.innerHTML =
    `<div class="book">
        <div>
            <div class="book-name">${name}<hr></div>
            <div class="book-author">${author}</div>
        </div>
        <div class="book-pages">Pages: <span class="pages">${pages}</span></div>
        <div class="book-status">Status: <span class="status">${read}</span></div>
    </div>
    <div class="book-controls">
        <button class="delete-btn" type="button">
            <img src="./assests/delete.svg" alt="delete" class="delete-icon">
        </button>
    </div>`;

    booksContainer.appendChild(bookCard);

}

function displayBooks() {
    booksContainer.replaceChildren('');
    myLibrary.forEach(book => {
       addBookCard(book.title, book.author, book.pages, book.read);
    });
}


// DISPLAYING FORM
addBookBtn.addEventListener('click', function() {
    addBookForm.style.visibility = "visible";
    inputFocus.focus();
});

addBookForm.addEventListener('click', function(e) {
    if (e.target === addBookForm) {
        addBookForm.style.visibility = "hidden";
    }
});


// REMOVING BOOK

deleteBookButton.addEventListener('click', function() {
    console.log('Hello');
})

// console.log(deleteBookButton)