let cart = [];
function renderCart() {
    const cartTemplate = cart.map(item => 
        `<div class="item">
            <div>${item.title}</div>
            <div>${item.author}</div>
            <div>${item.price}</div>
        </div>`
    );
    document.getElementById("cart").innerHTML = cartTemplate.join("");    
}


// add the add to cart method to the Book constructor
function Book(bookData) {
    this.id = bookData.id;
    this.emoji = bookData.emoji;
    this.author = bookData.author;
    this.title = bookData.title;
    this.format = bookData.format;
    this.price = bookData.price;
}

const book = new Book({
    id:1,
    emoji: "📗",
    author: "George Orwell",
    title:"1984",
    format:"Paperback",
    price:"$9.99"
});


book.addToCart = function() {
    const {title, author,price} = this;
    cart.push({ title, author, price });
    renderCart();
};   

book.getTemplate = function() {
    const { id, emoji, title, author, format, price} = this;
    return `<div class="book">
        <div class="emoji">${emoji}</div>
        <div class="title">${title}</div>
        <div class="author">${author}</div>
        <div class="format">${format}</div>
        <div class="price">${price}</div>
        <button id="cart-${id}">Add to Cart</button>
    </div>`
}
    
document.getElementById("books").innerHTML = book.getTemplate();
document.getElementById("cart-1").onclick = () => book.addToCart();