debug validate input and variable names

Author: Ofonimeedak

debugging/book-library/script.js

@@ -20,26 +20,36 @@ function populateStorage() {
   }
 }
 
-const title = document.getElementById("title");
-const author = document.getElementById("author");
-const pages = document.getElementById("pages");
-const check = document.getElementById("check");
+const bookTitle = document.getElementById("title");
+const authorOfBook = document.getElementById("author");
+const NoOfpages = document.getElementById("pages");
+const readBook = 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() {
   if (
-    title.value == null ||
-    title.value == "" ||
-    pages.value == null ||
-    pages.value == "" ||
-    author.value == null ||
-    author.value == ""
+    bookTitle.value.trim() === "" ||
+    NoOfpages.value.trim() === "" ||
+    authorOfBook.value.trim() === ""
   ) {
     alert("Please fill all fields!");
     return false;
+  }
+
+  if (
+    !/^[A-Za-z\s]+$/.test(authorOfBook.value) ||
+    !/^[A-Za-z\s]+$/.test(bookTitle.value)
+  ) {
+    alert("Author  and book title must contain only letters");
+    return false;
   } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
+    let book = new Book(
+      bookTitle.value,
+      authorOfBook.value,
+      NoOfpages.value,
+      readBook.checked
+    );
     myLibrary.push(book);
     render();
   }
@@ -48,11 +58,11 @@ function submit() {
 const submitInput = document.getElementById("submit");
 submitInput.addEventListener("click", submit);
 
-function Book(title, author, pages, check) {
-  this.title = title;
-  this.author = author;
-  this.pages = pages;
-  this.check = check;
+function Book(bookTitle, authorOfBook, NoOfpages, readBook) {
+  this.bookTitle = bookTitle;
+  this.authorOfBook = authorOfBook;
+  this.NoOfpages = NoOfpages;
+  this.readBook = readBook;
 }
 
 function render() {
@@ -71,39 +81,34 @@ 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;
-
-    //add and wait for action for read/unread button
-    let changeBut = document.createElement("button");
-    changeBut.id = i;
-    changeBut.className = "btn btn-success";
-    wasReadCell.appendChild(changeBut);
-    let readStatus = "";
-    if (myLibrary[i].check == true) {
-      readStatus = "Yes";
-    } else {
-      readStatus = "No";
-    }
+    titleCell.innerHTML = myLibrary[i].bookTitle;
+    authorCell.innerHTML = myLibrary[i].authorOfBook;
+    pagesCell.innerHTML = myLibrary[i].NoOfpages;
 
-    changeBut.innerText = readStatus;
+    let changeBtn = document.createElement("button");
+    changeBtn.id = i;
+    changeBtn.className = "btn btn-success";
+    wasReadCell.appendChild(changeBtn);
+    changeBtn.textContent = myLibrary[i].readBook ? "Yes" : "No";
 
-    changeBut.addEventListener("click", function () {
-      myLibrary[i].check = !myLibrary[i].check;
+    changeBtn.addEventListener("click", function () {
+      myLibrary[i].readBook = !myLibrary[i].readBook;
       render();
     });
 
     //add delete button to every row and render again
 
     let delButton = document.createElement("button");
-    delButton.id = i;
+    //delButton.id = i;
 
     deleteCell.appendChild(delButton);
     delButton.className = "btn btn-warning";
     delButton.innerHTML = "Delete";
     delButton.addEventListener("click", function () {
-      alert(`You've deleted title: ${myLibrary[i].title}`);
+      const toast = document.createElement("div");
+      toast.textContent = `You've deleted title: ${myLibrary[i].bookTitle}`;
+      table.appendChild(toast);
+      setTimeout(() => toast.remove(), 2000);
       myLibrary.splice(i, 1);
       render();
     });