Update phase-4-DOM-Manipulation to work with Bootstrap

[Leah123-d]

Page where the problem was found:

https://github.com/Techtonica/curriculum/blob/main/projects/recipe-page/phase-4-DOM-Manipulation.md

Type of Problem

The current instructions conflict with the Bootstrap integration instructed to be implemented in Phase 3.

When the instructions for phase 4 are followed, it places the list item in the navigation bar since the navigation bar is the first ul element on the html file.

This results in the removal of the Bootstrap framework since it is causing this issue.

A second issue that might be occurring is the instructions might be missing the part to connect the checkbox and list item. The code as is creating them separately.

Suggested Solution

The instructions can explicitly state or hint to watch out for Bootstrap conflicts and adjust the code accordingly.

For example, an id was added to the second list, and it was selected by that id.

// And finally, let's add that list item as a child of the ul.
//document.querySelector('ul').appendChild(newListItem);

//uncomment the below to place the new list item with the ul list
document.getElementById("secondList").appendChild(newListItem);

I don't have a suggested solution to connecting the checkbox to the new list item.