JSFiddle - React, Tailwind, and code Playground

by lavisha99

HTML

<html>
  <head>
  <title>WEEK 10 - Tutorial</title>
  </head>
  <body>
    <div class="wrapper">
      <section class="main">
        <h1>Items for selection</h1>
        <section id="bookList"></section>
      </section>
      <section class="cart">
        <h1>Cart</h1>
        <section id="cartList"></section>
      </section>
    </div>
  </body>    
</html>

JavaScript

/*****

Use the below API call to get 7 books from the Open Library API. Change the ISBN numbers to get more/fewer/other books if you wish.
	https://openlibrary.org/api/books?bibkeys=ISBN:0071435042,ISBN:0935739289,ISBN:0596101996,ISBN:1565923928,ISBN:9780470146231,ISBN:0764576593,ISBN:9780470171370&format=json&jscmd=data

Details about the response format is found here: https://openlibrary.org/dev/docs/api/books

*****/

//1.a. Hardcode HTML to add a book with its title and cover image to the "main" part of the page. See a simple proposed structure in Task 2.2. Use the details from this book object:
// {
//   "title": "JavaScript",
//   "cover": {
//     "small": "https://covers.openlibrary.org/b/id/6519345-S.jpg",
//     "large": "https://covers.openlibrary.org/b/id/6519345-L.jpg",
//     "medium": "https://covers.openlibrary.org/b/id/6519345-M.jpg"
//   }
// }
//1.b. Remove your hardcoded HTML and recreate it using hardcoded JavaScript (jQuery). Keep your code as reference; it may be helpful for the remaining tasks.
//1.c. Remove your hardcoded JavaScript (jQuery) before continuing.

//2.1 Make an API call to retrieve some books. When data from the API is returned add each book to the "main" part of the page.
//      You can use $.each() to get each book within the object that the API returns. See https://api.jquery.com/jQuery.each/ for an example.

//2.2 Display the books' titles and cover images. You can lay this out how you wish. A simple way is to use a div for each book (and apply the bookContainer class). Within the div, use a heading or similar for its title, and an img for its cover.
//      For books without cover images, you can use a placeholder image such as https://upload.wikimedia.org/wikipedia/en/f/f9/No-image-available.jpg

//3. Add an event handler for each book so that when a user clicks on a book it gets added to the "cart" part of the page. You can clone the book, or move it.

//4. Add an event handler for each book so that when a user...