Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules
**/node_modules
.DS_Store
**/.DS_Store
**/.DS_Store
.qodo
34 changes: 20 additions & 14 deletions debugging/book-library/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,36 @@ function populateStorage() {
myLibrary.push(book2);
render();
}

}

const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
const check = document.getElementById("check");
console.log(title.value, author.value, pages.value, check.checked);

//check the right input from forms and if its ok -> add the new book (object in array)
//via Book function and start render function

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I accidentally approve your PR but your form submission validation needs to be fixed. That's why I'm leaving this comment

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No Worries, Since I completed every comment of yours I label this PR as completed

function submit() {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still able to add books even if fields are empty. Please check your submit logic and validation process
image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now author validation is added, all the fields must be containing something

if (
title.value == null ||

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another challenge, you can also clear form fields after book is saved. Currently fields are not cleared after form submitted.
image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

now when a book is submitted the fields are reset

title.value == "" ||
pages.value == null ||
pages.value == ""
pages.value == "" ||
author.value == null ||
author.value == ""
) {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
let book = new Book(title.value, author.value, pages.value, check.checked);
myLibrary.push(book);
title.value = "";
author.value = "";
pages.value = ""; check.checked = false;
alert(`You've added title: ${book.title}`);
render();
}
}
Expand All @@ -50,11 +59,12 @@ function Book(title, author, pages, check) {
this.check = check;
}


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
Expand All @@ -73,14 +83,10 @@ function render() {
//add and wait for action for read/unread button
let changeBut = document.createElement("button");
changeBut.id = i;
changeBut.className = "btn btn-success";
changeBut.className = "btn";
changeBut.className = myLibrary[i].check ? "btn btn-success" : "btn btn-danger";
wasReadCell.appendChild(changeBut);
let readStatus = "";
if (myLibrary[i].check == false) {
readStatus = "Yes";
} else {
readStatus = "No";
}
let readStatus = myLibrary[i].check ? "Read" : "Unread";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to see button as red if book is marked as unread to increase UI&UX

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now added, if the book is unread it's red by adding btn-danger class to the button, Thanks for suggestion

changeBut.innerText = readStatus;

changeBut.addEventListener("click", function () {
Expand All @@ -89,12 +95,12 @@ function render() {
});

//add delete button to every row and render again
let delButton = document.createElement("button");
delBut.id = i + 5;
let delBut = document.createElement("button");
delBut.id = i+10;
deleteCell.appendChild(delBut);
delBut.className = "btn btn-warning";
delBut.innerHTML = "Delete";
delBut.addEventListener("clicks", function () {
delBut.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
Expand Down