diff --git a/debugging/book-library/debugging-notes.md b/debugging/book-library/debugging-notes.md new file mode 100644 index 00000000..fa3945f0 --- /dev/null +++ b/debugging/book-library/debugging-notes.md @@ -0,0 +1,61 @@ +# HTML Debugging Checklist + +## Page Structure + +## Book Input Form + +## Add Book Button + +## Book Display Area + +## Delete Functionality + +## Read Status + +## Validation Support + +## Browser Testing + + +# JavaScript Debugging Checklist + +## Library Data Storage + +## Page Loading + +## Add Book Function + +## Book Constructor + +## Render Function + +## Read/Unread Button + +## Delete Button + +## Console Errors + + +## Final Testing +- [ ] Add a book with all information +- [ ] Add a book without title +- [ ] Add a book without author +- [ ] Add a book without pages +- [ ] Add a read book +- [ ] Add an unread book +- [ ] Delete a book +- [ ] Change read/unread status + +# HTML correction: +- input type +- submit function +- +# Script.js correction: +- delete e from addEventListener +- correct book name +- add input validation for author value in submit() function +- add author.value replacing title.value in new Book() +- replace library by myLibrary +- correct check == true/false and made correction for readstatus = yes/no for read button +- correct variable name delBut > delButton +- correct clicks > click \ No newline at end of file diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..2628651d 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -31,7 +31,7 @@

Library

Library /> myLibrary render(); } } @@ -54,7 +58,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--) { table.deleteRow(n); } //insert updated row and cells @@ -76,7 +80,10 @@ function render() { changeBut.className = "btn btn-success"; wasReadCell.appendChild(changeBut); let readStatus = ""; - if (myLibrary[i].check == false) { + if (myLibrary[i].check == true) { + // correct for read button, if user checks reads, + // it sould be check == true & button shows yes, but previuos it was false > yes, ture > no, means + // reverse readStatus = "Yes"; } else { readStatus = "No"; @@ -90,11 +97,12 @@ function render() { //add delete button to every row and render again let delButton = document.createElement("button"); - delBut.id = i + 5; - deleteCell.appendChild(delBut); - delBut.className = "btn btn-warning"; - delBut.innerHTML = "Delete"; - delBut.addEventListener("clicks", function () { + delButton.id = i + 5; // correct variable name delBut > delButton + deleteCell.appendChild(delButton); + delButton.className = "btn btn-warning"; + delButton.innerHTML = "Delete"; + delButton.addEventListener("click", function () { + // correct clicks > click alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render();