Q. I don't get why the lesson tells me to make a function that loops through the array. What I mean is, shouldn't it be functionality that adds one book at a time? There shouldn't be a button that loops through the array and display all the book names, rather, it should be that when I click the 'add book' button, it should display that particular one input, no? Having problems with step 3, so thought I should check up on my understanding of the assignment.

https://www.theodinproject.com/lessons/node-path-javascript-library

\=> What this might have been meant to 'loop through the entire array because the user either would have removed/ added a new book in the array. When you click 'add new book', the whole array will have to get updated to the latest state of the myLibrary array.

Q. Is there a way to make each element a node when looping through an array? I'm trying to display the array's elements on the page when I click the button and was thought I could use appendChild for appending each element to the page. But the problem is that book is not a node, so it returns an error. I googled for ways to make each element into a node but couldn't find anything useful. Is this the right approach to tackle step three or should I be using a different DOM method?

function displayBook() {
  myLibrary.forEach((book) => {

    console.log(book);
    //a way to make each element a node? // or just textContent?
    list.appendChild(book); //book is not a node 

  });
}

\=> I can loop through the array and make a node, and insert text into it.

function displayBook() {
  myLibrary.forEach((book) => {
    const book = document.createElement('div');
    list.appendChild(book);

  });
}

\=> SyntaxError: Identifier 'book' has already been declared

\=> I'm passing a book parameter and redefining it after. Should use different name for creating a node. const bookEl = document.createElement('div')