London | 25-ITP-May | Halimatou Saddiyaa | Sprint 2 | Book Library

debugging/book-library/index.html

@@ -37,14 +37,16 @@ <h1>Library</h1>
           name="title"
           required
         />
+        <!-- Replacing the type to "text" as the type "title" does not exist -->
         <label for="author">Author: </label>
         <input
-          type="author"
+          type="author"  
           class="form-control"
           id="author"
           name="author"
           required
         />
+        <!-- Replacing the type to "text" as the type "author does not exist -->
         <label for="pages">Pages:</label>
         <input
           type="number"
@@ -77,11 +79,11 @@ <h1>Library</h1>
           <th>Author</th>
           <th>Number of Pages</th>
           <th>Read</th>
-          <th></th>
+          <th>Delete</th>  <!-- adding missing description -->
         </tr>
       </thead>
       <tbody>
-        <tr>
+        <tr> 
           <td></td>
           <td></td>
           <td></td>

debugging/book-library/script.js

@@ -7,7 +7,7 @@ window.addEventListener("load", function (e) {
 
 function populateStorage() {
   if (myLibrary.length == 0) {
-    let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
+    let book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true); // Correcting the book's name to Robinson instead of Robison
     let book2 = new Book(
       "The Old Man and the Sea",
       "Ernest Hemingway",
@@ -16,7 +16,7 @@ function populateStorage() {
     );
     myLibrary.push(book1);
     myLibrary.push(book2);
-    render();
+   // removing render() here as it is already called in line 5
   }
 }
 
@@ -31,17 +31,26 @@ function submit() {
   if (
     title.value == null ||
     title.value == "" ||
+    author.value == null || // adding author to the validation
+    author.value == "" ||
     pages.value == null ||
     pages.value == ""
   ) {
     alert("Please fill all fields!");
     return false;
-  } else {
-    let book = new Book(title.value, title.value, pages.value, check.checked);
-    library.push(book);
+  } 
+
+  const pagesNumber = Number(pages.value);
+  if (isNaN(pagesNumber) || pagesNumber <= 0) {
+    alert("Please enter a valid, positive number of pages.");
+    return false;
+  }
+
+    let book = new Book(title.value, author.value, pagesNumber, check.checked);  // Correcting the repetition of title.value and replacing it with author.value
+    myLibrary.push(book);  // Correcting with the right function name
     render();
   }
-}
+
 
 function Book(title, author, pages, check) {
   this.title = title;
@@ -54,7 +63,7 @@ function render() {
   let table = document.getElementById("display");
   let rowsNumber = table.rows.length;
   //delete old table
-  for (let n = rowsNumber - 1; n > 0; n-- {
+  for (let n = rowsNumber - 1; n > 0; n--) {  // Adding a missing parenthesis
     table.deleteRow(n);
   }
   //insert updated row and cells
@@ -73,10 +82,17 @@ function render() {
     //add and wait for action for read/unread button
     let changeBut = document.createElement("button");
     changeBut.id = i;
+
+    // Adding option of btn-danger if status is not read
+    if (myLibrary[i].check === true) {
     changeBut.className = "btn btn-success";
+    } else {
+  changeBut.className = "btn btn-danger";
+}
+
     wasReadCell.appendChild(changeBut);
     let readStatus = "";
-    if (myLibrary[i].check == false) {
+    if (myLibrary[i].check === true) { // Changing the condition from false to true to validate the condition yes and using === instead of == to check for value and type
       readStatus = "Yes";
     } else {
       readStatus = "No";
@@ -89,15 +105,18 @@ function render() {
     });
 
     //add delete button to every row and render again
-    let delButton = document.createElement("button");
+    let delBut = document.createElement("button");  // Correcting the function name from delButton to delBut to match following code
     delBut.id = i + 5;
     deleteCell.appendChild(delBut);
     delBut.className = "btn btn-warning";
     delBut.innerHTML = "Delete";
-    delBut.addEventListener("clicks", function () {
+    delBut.addEventListener("click", function () {  // correcting using the correct term: click instead of clicks
+      const confirmDelete = confirm(`Are you sure you want to delete "${myLibrary[i].title}"?`);
+      if (confirmDelete) {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);
       render();
+      }
     });
   }
 }