Add button to delete all books

Author: mooniiDev

css/styles.css

@@ -15,7 +15,9 @@
   --blue: #1F3E59;
   --dark-blue: #1A3246;
   --green: #478647;
+  --dark-green: #337433;
   --red: #D05050;
+  --dark-red: #BE3E3E;
 }
 
 #content {
@@ -146,6 +148,7 @@ input[type=number] {
 }
 #add-book:hover {
   cursor: pointer;
+  border: 1px solid var(--dark-blue);
   background-color: var(--dark-blue);
   transition: 0.5s;
 }
@@ -190,13 +193,30 @@ input[type=number] {
 }
 #library-info {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-around;
   width: 70%;
+  margin-bottom: 30px;
+  padding: 0 25px;
+  font-size: 18px;
 }
-#library-info p {
-  font-size: 20px;
+#library-info p,
+#delete-all-btn {
   font-weight: 900;
 }
+#delete-all-btn {
+  width: 150px;
+  border: 1px solid var(--red);
+  border-radius: 2px;
+  background-color: var(--red);
+  color: var(--white);
+  transition: 0.5s;
+}
+#delete-all-btn:hover {
+  border: 1px solid var(--dark-red);
+  background-color: var(--dark-red);
+  cursor: pointer;
+}
+
 #books-list {
   width: 70%;
   border-collapse: collapse;
@@ -223,8 +243,17 @@ input[type=number] {
 }
 .fa-check {
   color: var(--green);
+  transition: 0.5s;
+}
+.fa-check:hover {
+  color: var(--dark-green);
 }
 .fa-times,
 .fa-trash-alt {
   color: var(--red);
+  transition: 0.5s;
+}
+.fa-times:hover,
+.fa-trash-alt:hover {
+  color: var(--dark-red);
 }

index.html

@@ -79,6 +79,7 @@ <h1 id="logo"><i class="fad fa-books theme-books"></i> Library</i></h1>
       <p>BOOKS READ: <span id="books-read"></span></p>
       <p>BOOKS UNREAD: <span id="books-unread"></span></p>
       <p>TOTAL BOOKS: <span id="total-books"></span></p>
+      <button type="button" id="delete-all-btn">DELETE ALL</button>
     </div>
 
     <table id="books-list">

scripts.js

@@ -1,4 +1,4 @@
-const myLibrary = [];
+let myLibrary = [];
 
 function Books(title, author, pages, status) {
   this.title = title;
@@ -7,50 +7,27 @@ function Books(title, author, pages, status) {
   this.status = status;
 }
 
-function addBookToLibrary(title, author, pages, status) {
-  const book = new Books(title, author, pages, status);
-  myLibrary.push(book);
-  return myLibrary;
-}
-addBookToLibrary('Sapiens: A Brief History of Humankind', 'Yuval Noah Harari', '464', 'read');
-addBookToLibrary('The Lady of the Lake', 'Andrzej Sapkowski', '544', 'unread');
-
-function showLibraryInfo() {
-  let readCounter = 0;
-  let unreadCounter = 0;
-  for (let i = 0; i < myLibrary.length; i += 1) {
-    if (myLibrary[i].status === 'read') {
-      readCounter += 1;
-      const booksRead = document.querySelector('#books-read');
-      booksRead.textContent = readCounter;
-    } else if (myLibrary[i].status === 'unread') {
-      unreadCounter += 1;
-      const booksUnread = document.querySelector('#books-unread');
-      booksUnread.textContent = unreadCounter;
-    }
-  }
-  const totalBooks = document.querySelector('#total-books');
-  totalBooks.textContent = myLibrary.length;
-}
-showLibraryInfo();
-
 function showBooksInLibrary() {
+  const bookList = document.querySelector('#table-body');
+  bookList.textContent = '';
   for (let i = 0; i < myLibrary.length; i += 1) {
-    const bookList = document.querySelector('#table-body');
     const bookRow = document.createElement('tr');
     bookRow.classList.add('book-info');
     bookList.appendChild(bookRow);
 
     const bookTitle = document.createElement('td');
     bookTitle.textContent = myLibrary[i].title;
+    bookTitle.classList.add('book-title');
     bookRow.appendChild(bookTitle);
 
     const bookAuthor = document.createElement('td');
     bookAuthor.textContent = myLibrary[i].author;
+    bookAuthor.classList.add('book-author');
     bookRow.appendChild(bookAuthor);
 
     const bookPages = document.createElement('td');
     bookPages.textContent = myLibrary[i].pages;
+    bookPages.classList.add('book-pages');
     bookRow.appendChild(bookPages);
 
     const bookStatus = document.createElement('td');
@@ -61,6 +38,7 @@ function showBooksInLibrary() {
     } else if (myLibrary[i].status === 'unread') {
       statusSymbol.classList.add('fas', 'fa-times');
     }
+    bookStatus.classList.add('book-status');
     statusButton.appendChild(statusSymbol);
     bookStatus.appendChild(statusButton);
     bookRow.appendChild(bookStatus);
@@ -70,8 +48,53 @@ function showBooksInLibrary() {
     const deleteSymbol = document.createElement('i');
     deleteSymbol.classList.add('fas', 'fa-trash-alt');
     deleteButton.appendChild(deleteSymbol);
+    bookDelete.classList.add('book-delete');
     bookDelete.appendChild(deleteButton);
     bookRow.appendChild(bookDelete);
   }
 }
+
+function showLibraryInfo() {
+  const booksRead = document.querySelector('#books-read');
+  const booksUnread = document.querySelector('#books-unread');
+  const totalBooks = document.querySelector('#total-books');
+  let readCounter = 0;
+  let unreadCounter = 0;
+  if (myLibrary.length === 0) {
+    booksRead.textContent = '0';
+    booksUnread.textContent = '0';
+  } else {
+    for (let i = 0; i < myLibrary.length; i += 1) {
+      if (myLibrary[i].status === 'read') {
+        readCounter += 1;
+        booksRead.textContent = readCounter;
+      } else if (myLibrary[i].status === 'unread') {
+        unreadCounter += 1;
+        booksUnread.textContent = unreadCounter;
+      }
+    }
+  }
+  totalBooks.textContent = myLibrary.length;
+}
+
+function addBookToLibrary(title, author, pages, status) {
+  const book = new Books(title, author, pages, status);
+  myLibrary.push(book);
+  showLibraryInfo();
+  showBooksInLibrary();
+}
+
+function deleteAllBooks() {
+  const deleteAllBtn = document.querySelector('#delete-all-btn');
+  deleteAllBtn.addEventListener('click', () => {
+    myLibrary = [];
+    showBooksInLibrary();
+    showLibraryInfo();
+  });
+}
+
+addBookToLibrary('Sapiens: A Brief History of Humankind', 'Yuval Noah Harari', '464', 'read');
+addBookToLibrary('The Lady of the Lake', 'Andrzej Sapkowski', '544', 'unread');
+showLibraryInfo();
 showBooksInLibrary();
+deleteAllBooks();