JSFiddle - React, Tailwind, and code Playground

by jedensuscg

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <button @click="toggleShowBooks">
        <span v-if="showBooks">Hide Books</span> <!-- v-if removes from DOM-->
        <span v-else>Show Books</span>
      </button>

      <button @click="toggleGrid">
        <span v-if="showGrid">List View</span> <!-- v-if removes from DOM-->
        <span v-else>Grid View</span>
      </button>

      <div id="book-display" v-if="showBooks">
        <div id="grid-view" v-if="showGrid">
          <div v-for="book in books" class="box">
            <p></p>
            <h3>{{book.title}}</h3>
            <p> {{book.author}} </p>
            <p> Pages: {{book.pages}} </p>
            <p> Read Book? <span v-if="book.isRead == true">Yes</span> <span v-else="book.isRead == true">No</span></p>
            <img class="book-cover" :src="book.cover" alt="">
          </div>
        </div>

        <ul id="list-view" v-if="!showGrid">
          <li v-for="book in books">
            <h3>{{book.title}}</h3>
            <p> {{book.author}} </p>
            <p> Pages: {{book.pages}} </p>
            <p> Read Book? <span v-if="book.isRead == true">Yes</span> <span v-else="book.isRead == true">No</span>
            </p>
          </li>
        </ul>
      </div>

      <!-- <div id="book-entry">
        <label for="title">TITLE</label>
        <input type="text" name="title" id="title">
        <br>
        <label for="author">AUTHOR</label>
        <input type="text" name="author" id="author">
        <br>
        <label for="pages">PAGES</label>
        <input type="number" name="pages" id="pages">
        <br>
        <label for="is-read">READ BOOK?</label>
        <input type="checkbox" name="" id="is-read">
       ...

CSS

#book-display {
    display: grid;
}
.box {
    padding: 5px 5px 20px 5px;
    width: 250px;
    height: 400px;
    text-align: center;
    background: #ddd;
    margin: 20px;
    display: inline-block;
    vertical-align: top;
}

.book-cover {
    height: 200px;
}

JavaScript

library = [];
isbnURL = "https://www.googleapis.com/books/v1/volumes?q=title:";
listDiv = document.querySelector("#list");
titleInput = document.querySelector("#title");
authorInput = document.querySelector("#author");
pagesInput = document.querySelector("#pages");
isReadCheck = document.querySelector("#is-read");

function Book(title, author, isRead = false, pages = 0, isbn = "no isbn", cover = 'no image') {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.isRead = isRead;
  this.isbn = isbn;
  this.cover = cover;
}

Book.prototype.info = function () {
  isRead = this.isRead ? "Has been read." : "Has not been read";
  return `${this.title} by ${this.author}, ${this.pages} pages. ${isRead}`;
  // return {
  //   title: this.title,
  //   author: this.author,
  //   pages: this.pages,
  //   isRead: this.isRead,
  // };
};

async function getBookInfo(title) {
  let isbn = ''
  let pageCount = ''
  let coverLink = ''
  await fetch(isbnURL + title)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      isbn = data.items[0].volumeInfo.industryIdentifiers[0].identifier;
      pageCount = data.items[0].volumeInfo.pageCount
      coverLink =  data.items[0].volumeInfo.imageLinks.thumbnail
    })
    .catch((e) => {
      console.log(e);
    });
    return {
      isbn,
      coverLink,
      pageCount
    }
}

async function addBook(title, author, isRead = false) {
  let validBook = true;
  isbn = ''
  library.forEach((book) => {
    if (book.title == title) {
      validBook = false;
    }
  });

  if (validBook) {
    bookData = await getBookInfo(title).then(({isbn, pageCount, coverLink}) => {
      return {
        isbn,
        pageCount,
        coverLink,
      }
    });
    console.log(isbn)
    const newBook = new Book(title, author, isRead, bookData.pageCount, bookData.isbn, bookData.coverLink);
    library.push(newBook);
    console.log(newBook);
  } else {
    console.log("Duplicate Book");
 ...