script.js

const myLibrary = [
    { title: "The Hobbit", author: "J.R.R. Tolkien", pages: 295, read: true },
    { title: "1984", author: "George Orwell", pages: 328, read: false },
    { title: "To Kill a Mockingbird", author: "Harper Lee", pages: 281, read: true }
];

// Book Object
function Book(title, author, pages, read, id) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;
    this.id = id;
}

// Add Book Object
function addBookToLibrary(title, author, pages, read) {
    const id = crypto.randomUUID();

    const newBook = new Book(title, author, pages, read, id);
    myLibrary.push(newBook);
}


// Display Books
function displayBooks() {
    const bookContainer = document.querySelector(".book-container");
    bookContainer.innerHTML = "";

    for (let i = 0; i < myLibrary.length; i++) {
        const book = myLibrary[i];

        const card = document.createElement("div");
        card.className = "book-card";
        card.innerHTML = `
            <h3>${book.title}</h3>
            <p>Author: ${book.author}</p>
            <p>Pages: ${book.pages}</p>
            <p>Read: ${book.read ? 'Read' : 'Not Read Yet'}</p>
            <button class="readBtn">Read</button>
            <button class="delete">Delete</button>
        `;

        // Read Button
        const readBtn = card.querySelector(".readBtn");
        readBtn.addEventListener("click", function() {
            book.read = !book.read;
            displayBooks();
        })

        // Delete Button
        const deleteBtn = card.querySelector(".delete");
        deleteBtn.addEventListener("click", function() {
            myLibrary.splice(i, 1);
            displayBooks();
        })

        bookContainer.appendChild(card);
    }
}

displayBooks();

// Form Popup
const showFormBtn = document.querySelector(".newBookButton");
const formPopup = document.querySelector("#formPopUp");
const closeBtn = document.querySelector(".close");

showFormBtn.addEventListener("click", function() {
    formPopup.style.display = "flex";
})

closeBtn.addEventListener("click", function() {
    formPopup.style.display = "none";
})

window.addEventListener("click", function(event) {
    if (event.target === formPopup) {
        formPopup.style.display = "none";
    }
})

// Making new Book card from form
const bookForm = document.querySelector("#bookForm");

bookForm.addEventListener("submit", function(event) {
    event.preventDefault();

    const title = document.getElementById("title").value;
    const author = document.getElementById("author").value;
    const pages = document.getElementById("pages").value;
    const readStatus = document.getElementById("readStatus").checked;


    const newBook = new Book(title, author, pages, readStatus);

    myLibrary.push(newBook);
    displayBooks();

    formPopup.style.display = "none";
    bookForm.reset();
})