Improve form input handling and validation in book submission

Co-authored-by: Copilot <copilot@github.com>

Author: Darkidd77

Project-TV-Show

@@ -0,0 +1 @@
+Subproject commit 48745b1055393956b0578f73a729c1e059bf6bc6

Project-TV-Show-Mahmoud

@@ -0,0 +1 @@
+Subproject commit b47305bdd011fa8aa52f6adea17269b4fcde74f5

debugging/book-library/index.html

@@ -34,7 +34,7 @@ <h1>Library</h1>
           name="title"
           required
         />
-        <label for="author">Author: </label>
+        <label for="author">Author:</label>
         <input
           type="text"
           class="form-control"
@@ -49,8 +49,9 @@ <h1>Library</h1>
           id="pages"
           name="pages"
           required
+          min="1"
         />
-        <label class="form-check-label">
+        <label for="check" class="form-check-label">
           <input
             type="checkbox"
             class="form-check-input"
@@ -77,17 +78,9 @@ <h1>Library</h1>
           <th></th>
         </tr>
       </thead>
-      <tbody>
-        <tr>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
-      </tbody>
+      <tbody></tbody>
     </table>
 
-    <script src="script.js"></script>
+    <script src="script.js" type="module"></script>
   </body>
 </html>

debugging/book-library/script.js

@@ -2,7 +2,6 @@ let myLibrary = [];
 
 window.addEventListener("load", function (e) {
   populateStorage();
-  render();
 });
 
 function populateStorage() {
@@ -20,35 +19,39 @@ function populateStorage() {
   }
 }
 
-const title = document.getElementById("title");
-const author = document.getElementById("author");
-const pages = document.getElementById("pages");
-const check = document.getElementById("check");
+const titleInput = document.getElementById("title");
+const authorInput = document.getElementById("author");
+const pagesInput = document.getElementById("pages");
+const checkInput = document.getElementById("check");
 
 //check the right input from forms and if its ok -> add the new book (object in array)
 //via Book function and start render function
 function submit() {
+  const titleVal = titleInput.value.trim();
+  const authorVal = authorInput.value.trim();
+  const pagesVal = parseInt(pagesInput.value, 10);
+
   if (
-    title.value == null ||
-    title.value == "" ||
-    author.value == null ||
-    author.value == "" ||
-    pages.value == null ||
-    pages.value == ""
+    titleVal == null ||
+    titleVal == "" ||
+    authorVal == null ||
+    authorVal == "" ||
+    isNaN(pagesVal) ||
+    pagesVal <= 0
   ) {
     alert("Please fill all fields!");
     return false;
   } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
+    let book = new Book(titleVal, authorVal, pagesVal, checkInput.checked);
     myLibrary.push(book);
     render();
   }
 
   // clear the form after submit
-  title.value = "";
-  author.value = "";
-  pages.value = "";
-  check.checked = false;
+  titleInput.value = "";
+  authorInput.value = "";
+  pagesInput.value = "";
+  checkInput.checked = false;
 }
 
 function Book(title, author, pages, check) {
@@ -74,9 +77,9 @@ function render() {
     let pagesCell = row.insertCell(2);
     let wasReadCell = row.insertCell(3);
     let deleteCell = row.insertCell(4);
-    titleCell.innerHTML = myLibrary[i].title;
-    authorCell.innerHTML = myLibrary[i].author;
-    pagesCell.innerHTML = myLibrary[i].pages;
+    titleCell.textContent = myLibrary[i].title;
+    authorCell.textContent = myLibrary[i].author;
+    pagesCell.textContent = myLibrary[i].pages;
 
     //add and wait for action for read/unread button
     let changeBut = document.createElement("button");
@@ -89,7 +92,7 @@ function render() {
     } else {
       readStatus = "No";
     }
-    changeBut.innerText = readStatus;
+    changeBut.textContent = readStatus;
 
     changeBut.addEventListener("click", function () {
       myLibrary[i].check = !myLibrary[i].check;
@@ -101,7 +104,7 @@ function render() {
     delButton.id = i + 5;
     deleteCell.appendChild(delButton);
     delButton.className = "btn btn-warning";
-    delButton.innerHTML = "Delete";
+    delButton.textContent = "Delete";
     delButton.addEventListener("click", function () {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);