I'm currently working on the The Odin Project's, Library project.

Here's the code at the moment: https://codepen.io/donatcs/pen/eYepQLz

Here's only the JS code:

class Book {
    constructor(title, author, pages, isRead) {
        this.title = title.value;
        this.author = author.value;
        this.pages = pages.value;
        this.isRead = isRead.value;
    }
}

let myLibrary = [];


        const addBook = (event)=>{
            event.preventDefault();  
            
            let books = new Book (
                title =  this.title,
                author = this.author,
                pages =  this.pages,
                isRead = this.isRead)
             
            myLibrary.push(books);
            
            console.log('added' , {myLibrary} );
            let pre = document.querySelector('#bookz table');

            pre.textContent += (JSON.stringify(myLibrary, '\t', 2));

            localStorage.setItem('MyLibrary', JSON.stringify(myLibrary));
        }
        document.addEventListener('DOMContentLoaded', ()=>{
            document.getElementById('btn').addEventListener('click', addBook);
        });

It's still in the very early stages so I know the code looks bad and the functionality is not correct.

Here is the Project with the requirements: https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript/lessons/library

I need help with displaying the Books correctly.