feat: logic completed.

library/css/style.css

@@ -31,15 +31,43 @@
 
 .book-cards {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
 .card {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 20px;
-    min-width: 200px;
-    min-height: 200px;
+    gap: 5px;
+    width: 300px;
+    min-height: 250px;
+    text-align: center;
 }
 
+.card p {
+    padding: 0;
+    margin: 0;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    min-height: 50vh;
+    min-width: 20vw;
+    border: none;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-header {
+    display: flex;
+    justify-content: space-around;
+}
+
+.close-btn {
+    height: 30px;
+    align-self: center;
+}

library/index.html

@@ -26,18 +26,21 @@
         </footer>
     </div>
         <dialog class="modal">
-            <main>
-                <div class="form">
-                    <form action="" >
-                        <input type="text" name="title" id="title">
-                        <input type="text" name="author" id="author">
-                        <button type="submit" id="submit-btn" class="btn">Submit</button>
-                    </form>
+                <div class="form-header">
+                    <h1 class="form-header">Add Book</h1>
                     <button class="btn close-btn">
                         <span class="material-symbols-outlined">close</span>                
                     </button>
                 </div>
-            </main>
+                <form action="" class="form">
+                    <input type="text" name="title" id="title">
+                    <input type="text" name="author" id="author">
+                    <div class="form-item">
+                        <label for="checkbox">Have you read the book?</label>
+                        <input type="checkbox" id="read-button">
+                    </div>
+                    <button type="submit" id="submit-btn" class="btn">Submit</button>
+                </form>
         </dialog>
     <script src="js/script.js"></script>
 </body>

library/js/script.js

@@ -23,8 +23,12 @@ function Book(title, author, read) {
   };
 }
 
+Book.prototype.toggleBookReadStatus = function(){
+  this.read = !this.read;
+}
+
 function addBookToLibrary(book) {
-  let newBook = new Book(book.title, book.author, book.pages, book.read);
+  let newBook = new Book(book.title, book.author, book.read);
   myLibrary.push(newBook);
 }
 
@@ -35,25 +39,57 @@ function displayBooks(books) {
   books.forEach((element, i) => {
     const card = document.createElement('div');
     card.classList.add('card');
-    card.classList.add(`data-card${i}`)
+    card.setAttribute("data-card", i);
 
     const title = document.createElement('p');
+    title.classList.add('card-title');
     const author = document.createElement('p');
+    author.classList.add('card-author');
+    const readBtn = document.createElement('button');
+    readBtn.classList.add('btn','read-btn');
+    readBtn.textContent = element.read ? "read" : "not read";
+    const deleteBtn = document.createElement('button');
+    deleteBtn.classList.add('btn', 'delete-btn')
+    deleteBtn.textContent = 'delete book';
 
-    title.textContent = element.title;
+
+    title.textContent = `"${element.title}"`;
     author.textContent = element.author;
 
     card.appendChild(title);
-    card.appendChild(author)
+    card.appendChild(author);
+    card.appendChild(readBtn);
+    card.appendChild(deleteBtn);
     booksDiv.appendChild(card);
   });
 }
 
+booksDiv.addEventListener('click', event => {
+  let target = event.target.className;
+  if (target.includes('read-btn')){
+    let cardIndex = event.target.parentElement.dataset.card;
+    myLibrary[cardIndex].toggleBookReadStatus();
+    displayBooks(myLibrary);
+  };
+});
+
+booksDiv.addEventListener('click', event => {
+  let target = event.target.className;
+  if (target.includes('delete-btn')){
+    let cardIndex = event.target.parentElement.dataset.card;
+    myLibrary.splice(cardIndex, 1);
+    displayBooks(myLibrary);
+  };
+});
 
 submitButton.addEventListener('click', event => {
   const author = document.querySelector('#author').value;
   const title = document.querySelector('#title').value;
-  const newBook = new Book(title, author, false);
+  const readBtn = document.querySelector('#read-button').value;
+  const bookIsRead = readBtn === 'on' ? true : false;
+
+  // create book object
+  const newBook = new Book(title, author, bookIsRead);
 
   addBookToLibrary(newBook);
   displayBooks(myLibrary);
@@ -68,13 +104,6 @@ closeDialogButton.addEventListener('click', () => {
   dialog.close();
 });
 
-// document.addEventListener('click', e => {
-//   if (!e.target.closest("dialog")) {
-//     dialog.showModal();
-//   }
-// });
-
-
 // default data
 myLibrary.push(defaultData)