JSFiddle - React, Tailwind, and code Playground

by Bhaumik Mehta

HTML

<div>
  <button id="patronsRecord" onclick="javascript:renderPatrons();" title="Click to render patrons record">Click to render patrons Record</button>
</div>
<div id="records"></div>

CSS

table {width: 100%;}

table th, table td {
  border: 1px solid #bbbbbb;
}

table td {
  padding: 0px 5px 0px 5px;
}

ul {
    padding: 0px;
    padding-left: 20px;
}

#patronsRecord, #catalogRecord {
  background-color: #cdcdcd;
  cursor: pointer;
  border: 1px solid gray;
  border-radius: 4px;
  padding: 10px;
}

#patronsRecord:hover, #catalogRecord:hover {
  background-color: #bbbbbb;
}

#catalogRecord {
  margin-left: 20px;
}

#records {
  margin-top: 10px;
  height: 400px;
  width: 100%;
  overflow: auto;
}

JavaScript

/**
	Create a constructor function for a Book object. The Book object should have the following properties:
	 
	Title: string 
	Available: Boolean representing whether the book is checked out or not. The initial value should be false. 
	Publication Date: Use a date object
	Checkout Date: Use a date object 
	Call Number: Make one up 
	Authors: Should be an array of Author objects
**/
var Book = function(title, available, publicationDate, checkOutDate, callNumber, authors, checkOutDates) {

	this.title = title;
	this.available = available;
	this.publicationDate = publicationDate;
	this.checkOutDate = checkOutDate;
	this.callNumber = callNumber;
	this.authors = authors;
}

/**
	Create a constructor function for an object called Author. It should have a property for the
	 
	first name: string
	last name: string
**/
var Author = function(firstName, lastName) {

	this.firstName = firstName;
	this.lastName = lastName;
}

/**
	Create a constructor function for an object called Patron. This represents a person who is allowed to check out books from the library. Give it the following properties:

	Firstname: string
	Lastname: string
	Library Card Number (Make one up): string
	Books Out (make it an array): []
	fine (Starts a 0.00): parseFloat(0.00)
**/
var Patron = function(firstName, lastName, libraryCardNumber, booksOut, fine) {
	
  this.firstName = firstName;
  this.lastName = lastName;
  this.libraryCardNumber = libraryCardNumber;
  this.booksOut = booksOut;
  this.fine = parseFloat(fine) || 0.00;
}

// Methods
/**
Add a function to the Book prototype called "checkOut". The function will change the available property of the book from true to false and set the checkout date. The checkout date should be set to the current date minus some random number of days between 1 and 5. This will allow us to simulate books being overdue.
**/
Book.prototype.checkOut = function(date) {
  this.available = false;
 
  this.checkOutDate = new Date(date.setDate(date.getDate() -...