ECS 162 Assignment 3
Book Club
You are encouraged to work on this assignment in teams of two.

Please submit by 10pm, Wednesday April 25, on Canvas.

We will make a page to help a user compile a list of books for a book club. Our goal is to give our Javascript skills a workout, use an API, work with JSON, and practice adding and removing elements from the DOM.

Here are Dana's designs. We will not count appearance as much when grading this assignment, but failure to reasonably approximate the given design will still cost you some points.

Our assignment is to let the user request information from the Google Books API by giving any combination of title, author, and ISBN number. The user gives a request using the text boxes and clicks "Submit". We send the request to the Google Books API, and get an array of books back.

We bring up an overlay pop-up, in which the user can pick a book from the array for their book list. If the search returned nothing, the pop-up should just say that. Otherwise, we start with the first book in the array. We show the user information on the book - cover image, title, author, beginning of the description - and the user can decide whether to keep that one. If so, we close the pop-up and add the information for the chosen book to the list of books on the main page. Otherwise, the user can choose to look at the next book in the array, and possibly keep that one. Possibly the user will like none of the books in the array, in which case they can close the pop-up and do another search.

Here are some suggested steps to get this working.

1. Start with the code from the lecture on 4/16.
2. Extract the title, author and description of all the books in the JSON response. Find the cover image and extract that. There may be more than one size image, but we will stick with the "thumbnail" size, which seems pretty common.
3. Extract the first 30 words or so from the description.
4. Bring up the overlay pop-up to interact with the user (this W3Schools tutorial should help), and display a "tile" showing the book information for the first book.
5. Add the buttons to the overlay pop-up and make them behave properly, so that the user adds at most one of the ten possible tiles to the main Web page.
6. Give each tile on the main Web page an "x" button to remove it. When the tile is removed, it should be taken out of the DOM entirely, not just given display value none.
7. Work on the CSS.

A few more requirements:

• Do not use innerHTML (see, eg. the "Security Considerations" in the MDN documentation).
• Do not use form elements.
• A book might be missing a cover image or a description. If there is no cover image show an empty box with a message saying "no image". If there is no description just leave it out.

Please submit four files:

• bookclub.html,
• bookclub.js,
• bookclub.css, and
• a README saying who your partner is, and anything you'd like us to notice.

Submit the files using Canvas, without zipping them. You and your partner should submit identical files.