feat: initial javascript complete

library/js/script.js

@@ -1,20 +1,60 @@
 const myLibrary = [];
+const booksDiv = document.querySelector('.book-cards');
+const defaultData = new Book('James Clear', 'Atomic Habits', true);
 
-function Book(title, author, pages, read) {
+function Book(title, author, read) {
   this.title = title;
   this.author = author;
-  this.pages = pages;
   this.read = read;
-  
-  this.info = function(){
-    // returns book info 
+
+  this.info = function() {
     let haveRead = this.read ? "have read" : "have not read";
-    
+
     return `${this.title}, by ${this.author}, ${this.pages} pages, ${haveRead}`;
-  
   };
 }
 
 function addBookToLibrary(book) {
-    
+  let newBook = new Book(book.title, book.author, book.pages, book.read);
+  myLibrary.push(newBook);
 }
+
+function displayBooks(books) {
+  // Clear the screen before looping
+  booksDiv.innerHTML = "";
+
+  books.forEach((element, i) => {
+    const card = document.createElement('div');
+    card.classList.add('card');
+    card.classList.add(`data-card${i}`)
+
+    const title = document.createElement('p');
+    const author = document.createElement('p');
+
+    title.textContent = element.title;
+    author.textContent = element.author;
+
+    card.appendChild(title);
+    card.appendChild(author)
+    booksDiv.appendChild(card);
+  });
+}
+
+const button = document.querySelector('#btn');
+
+button.addEventListener('click', event => {
+  const author = document.querySelector('#author').value;
+  const title = document.querySelector('#title').value;
+  const newBook = new Book(title, author, false);
+
+  addBookToLibrary(newBook);
+  displayBooks(myLibrary);
+  event.preventDefault();
+})
+
+// default data
+myLibrary.push(defaultData)
+
+// Load books on page load
+displayBooks(myLibrary);
+