let data;

let n = 0;

let books = [];

​

function preload() {

    data = loadJSON("books.json");

}

​

function setup() {

    noCanvas();

    let clearButton = createButton("Take All Books");

    clearButton.mousePressed(clearBooks);

    let takeButton = createButton("Take Last Shelved Book");

    takeButton.mousePressed(takeOne);

​

    for (let i = 0; i < names.length; i++) {

        let p = createElement("h1", names[i] + "'s " + "Bookshelf");

        p.class("bookshelf");

​

        let button = createButton("Add Book");

        button.parent(p);

        button.mousePressed(addBook.bind(button));

        button.mouseOver(changeColor);

        button.mouseOut(unchangeColor);

    }

}

​

function addBook() {

    let book = createElement("p", data.books[n].title + " by " + data.books[n].author);

    books.push(book);

    var para = this.parent();

    book.class("books");

    book.parent(para);

    n++;

}

​

function changeColor() {

    this.style("color", "blue");

}

​

function unchangeColor() {

    this.style("color", "black");

}

​

function clearBooks() {

    for (let i = 0; i < books.length; i++) {

        books[i].remove();

    }

}

​

function takeOne() {

    for (let i = 0; i < books.length; i++) {

        books[books.length - 1].remove();

    }

}

​

function draw() {

    background(220);

}