Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

West Midlands | Gabriel Deng | Module-Data-Groups | Week 2 - Book reading #131

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

West Midlands | Gabriel Deng | Module-Data-Groups | Week 2 - Book reading #131

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
06f3a34
There was a missing parenthesis, i also change the mis-spelling of th…
gai93003 Jan 9, 2025
10feedb
Made some changes on the code
gai93003 Jan 9, 2025
f81b156
some more changes
gai93003 Jan 9, 2025
a3e8186
I attempted the challenges on this file.
gai93003 Jan 9, 2025
fb8b22f
Update script.js
gai93003 Jan 16, 2025
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
18 changes: 9 additions & 9 deletions debugging/book-library/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ function submit() {
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);
render();
}
}
Expand All @@ -54,7 +54,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--) {
Copy link

Choose a reason for hiding this comment

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

Can you think of a more efficient way to remove all rows (except the heading) in the table?

Copy link
Author

Choose a reason for hiding this comment

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

I think the most efficient way is to set the innerHTML of the table to emtpy and then appendChild header. In this case the first row.

Copy link
Author

Choose a reason for hiding this comment

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

I have also implemented the checking of the input of spaces using the input.value.trim() and check if it is empty. If so, an alert will pop out. Similarly, the validation of the page input field is also implemented.

table.deleteRow(n);
}
//insert updated row and cells
Expand All @@ -76,7 +76,7 @@ function render() {
changeBut.className = "btn btn-success";
wasReadCell.appendChild(changeBut);
let readStatus = "";
if (myLibrary[i].check == false) {
if (myLibrary[i].check) {
readStatus = "Yes";
} else {
readStatus = "No";
Expand All @@ -90,11 +90,11 @@ 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;
Copy link

Choose a reason for hiding this comment

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

  • Do you think the value assigned to this id attribute is unique?
  • Do you think there is a need to assign any id attribute to delButton?
  • Do you think there is a need to assign any id attribute to changeBut (at line 75)?
  • Can you think of a more consistent naming convention for the variables representing the two buttons?

Copy link
Author

Choose a reason for hiding this comment

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

The assignment of the id in this case is not important because there is no where in the code where the button is being used in reference to the id. So i have deleted it to make the code more readable and as precise as possible.

deleteCell.appendChild(delButton);
delButton.className = "btn btn-warning";
delButton.innerHTML = "Delete";
delButton.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
Expand Down
10 changes: 10 additions & 0 deletions debugging/code-reading/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ Take a look at the following code:

Explain why line 5 and line 8 output different numbers.

Ans: The variable at line 5 is a globally declared as such it will return 1, while the variable at line 8 is a scope variable since is declared with the scope of the function.
Therefore, when the function is called it will console the x variable declared in its scope.

Comment on lines +20 to +22
Copy link

Choose a reason for hiding this comment

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

I am not sure what you meant. The x at line 5 is certainly not globally declared.
I wonder how ChatGPT would answer this question.

Copy link
Author

Choose a reason for hiding this comment

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

I misinterpreted how the scope works. I didn't take into account where the console logs where being called. The console inside the function will refer to the local variable x and vice-versa.

## Question 2

Take a look at the following code:
Expand All @@ -35,6 +38,8 @@ console.log(y);

What will be the output of this code. Explain your answer in 50 words or less.

Ans: The output will be 10 and undefined. This is because the y variable is declared within the scope of the function and therefore cannot be globally accessed.
Copy link

Choose a reason for hiding this comment

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

Did you try running the code to see what it produces?

The second statement does not explain why the first output is 10.

Copy link
Author

Choose a reason for hiding this comment

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

You are right, the output is indeed 10 and undefined. I try making some research and it turns out that it is because the function has no return value although y has been declared and assigned a value.

Copy link

Choose a reason for hiding this comment

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

When I ran the script, the script threw an exception (because y is not declared). Just curious, did you not get an exception?


## Question 3

Take a look at the following code:
Expand Down Expand Up @@ -62,3 +67,8 @@ console.log(y);
```

What will be the output of this code. Explain your answer in 50 words or less.

Ans: The output will be 9 and {x: 10}; This is due to the difference by which each of the
Copy link

Choose a reason for hiding this comment

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

Spot on.

Copy link
Author

Choose a reason for hiding this comment

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

Thanks

variables are passed. The variable x in f1 is passed by value, so the function will not modify the actual value of the variable.
While in f2, the variable y is passed by reference, there manipulating the code in the function will result into modification of the value
of the variable y.