From 63be2e7e9996837a55de1ab7a9e5e1a088c011ce Mon Sep 17 00:00:00 2001 From: tabularasae Date: Wed, 18 Jun 2025 12:04:56 -0400 Subject: [PATCH 1/6] Added the list of required features. --- script.js | 38 ++++++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/script.js b/script.js index 5762129..f0b2b34 100644 --- a/script.js +++ b/script.js @@ -1,19 +1,29 @@ console.log("Hello! If you see this, the script is working."); -/* -- [ ] Select the section with an id of container without using querySelector. -- [ ] Select the section with an id of container using querySelector. -- [ ] Select all of the list items with a class of "second". -- [ ] Select a list item with a class of third, but only the list item inside of the ol tag. -- [ ] Give the section with an id of container the text "Hello!". -- [ ] Add the class main to the div with a class of footer. -- [ ] Remove the class main on the div with a class of footer. -- [ ] Create a new li element. -- [ ] Give the li the text "four". -- [ ] Append the li to the ul element. -- [ ] Loop over all of the lis inside the ol tag and give them a background color of "green". -- [ ] Remove the div with a class of footer. -*/ +// - [ 1 ] Select the section with an id of container without using querySelector. + +// - [ 2 ] Select the section with an id of container using querySelector. + +// - [ 3 ] Select all of the list items with a class of "second". + +// - [ 4 ] Select a list item with a class of third, but only the list item inside of the ol tag. + +// - [ 5 ] Give the section with an id of container the text "Hello!". + +// - [ 6 ] Add the class main to the div with a class of footer. + +// - [ 7 ] Remove the class main on the div with a class of footer. + +// - [ 8 ] Create a new li element. + +// - [ 9 ] Give the li the text "four". + +// - [ 10 ] Append the li to the ul element. + +// - [ 11 ] Loop over all of the lis inside the ol tag and give them a background color of "green". + +// - [ 12 ] Remove the div with a class of footer. + // Try rewriting this without using querySelector const header = document.querySelector("#container"); From b9bdbf6c26e899824969a3f685667197cc6d42b5 Mon Sep 17 00:00:00 2001 From: tabularasae Date: Wed, 18 Jun 2025 12:08:41 -0400 Subject: [PATCH 2/6] Added console.log printouts --- script.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index f0b2b34..b1af0ac 100644 --- a/script.js +++ b/script.js @@ -1,29 +1,40 @@ console.log("Hello! If you see this, the script is working."); // - [ 1 ] Select the section with an id of container without using querySelector. +console.log("Feature 1"); // - [ 2 ] Select the section with an id of container using querySelector. +console.log("Feature 2"); // - [ 3 ] Select all of the list items with a class of "second". +console.log("Feature 3"); // - [ 4 ] Select a list item with a class of third, but only the list item inside of the ol tag. +console.log("Feature 4"); // - [ 5 ] Give the section with an id of container the text "Hello!". +console.log("Feature 5"); // - [ 6 ] Add the class main to the div with a class of footer. +console.log("Feature 6"); // - [ 7 ] Remove the class main on the div with a class of footer. +console.log("Feature 7"); // - [ 8 ] Create a new li element. +console.log("Feature 8"); // - [ 9 ] Give the li the text "four". +console.log("Feature 9"); // - [ 10 ] Append the li to the ul element. +console.log("Feature 10"); // - [ 11 ] Loop over all of the lis inside the ol tag and give them a background color of "green". +console.log("Feature 11"); // - [ 12 ] Remove the div with a class of footer. - +console.log("Feature 12"); // Try rewriting this without using querySelector const header = document.querySelector("#container"); From 0ca0935f4123f2027e097384748b90ad52794aa3 Mon Sep 17 00:00:00 2001 From: tabularasae Date: Wed, 18 Jun 2025 12:54:56 -0400 Subject: [PATCH 3/6] features 1 to 12 --- script.js | 44 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index b1af0ac..41a1301 100644 --- a/script.js +++ b/script.js @@ -2,40 +2,82 @@ console.log("Hello! If you see this, the script is working."); // - [ 1 ] Select the section with an id of container without using querySelector. console.log("Feature 1"); +let container = null; +const allSections = document.getElementsByTagName("section"); +for (let i = 0; i < allSections.length; i++) { + if (allSections[i].id === "container") { + container = allSections[i]; + break; + } +} +console.log("container (loop):", container); // - [ 2 ] Select the section with an id of container using querySelector. console.log("Feature 2"); +const containerQS = document.querySelector("#container"); +console.log("container (querySelector):", containerQS); // - [ 3 ] Select all of the list items with a class of "second". console.log("Feature 3"); +const seconds = document.getElementsByClassName("second"); // HTMLCollection +console.log("seconds:", seconds); // - [ 4 ] Select a list item with a class of third, but only the list item inside of the ol tag. console.log("Feature 4"); +let thirdInsideOl = null; +const ol = container.querySelector("ol"); +const olLis = ol.children; +for (let i = 0; i < olLis.length; i++) { + if (olLis[i].classList.contains("third")) { + thirdInsideOl = olLis[i]; + break; + } +} +console.log("thirdInsideOl:", thirdInsideOl); // - [ 5 ] Give the section with an id of container the text "Hello!". console.log("Feature 5"); +container.appendChild(document.createTextNode("Hello!")); // - [ 6 ] Add the class main to the div with a class of footer. console.log("Feature 6"); +const footerDiv = document.getElementsByClassName("footer")[0]; +footerDiv.classList.add("main"); +console.log("footer classes after add:", footerDiv.className); // - [ 7 ] Remove the class main on the div with a class of footer. console.log("Feature 7"); +footerDiv.classList.remove("main"); +console.log("footer classes after remove:", footerDiv.className); // - [ 8 ] Create a new li element. console.log("Feature 8"); +const newLi = document.createElement("li"); +console.log("newLi created:", newLi); // - [ 9 ] Give the li the text "four". console.log("Feature 9"); +newLi.innerText = "four"; // - [ 10 ] Append the li to the ul element. console.log("Feature 10"); +const theUl = container.querySelector("ul"); +theUl.appendChild(newLi); +console.log("ul children after append:", theUl.children); // - [ 11 ] Loop over all of the lis inside the ol tag and give them a background color of "green". console.log("Feature 11"); +for (let i = 0; i < olLis.length; i++) { + olLis[i].style.backgroundColor = "green"; +} // - [ 12 ] Remove the div with a class of footer. console.log("Feature 12"); +footerDiv.remove(); // Try rewriting this without using querySelector +/* const header = document.querySelector("#container"); -console.log("header", header); +console.log("header", header); +*/ + From 0d2fa7e233ae65c92edb7872d1da3c8eba8ec14b Mon Sep 17 00:00:00 2001 From: tabularasae Date: Wed, 18 Jun 2025 13:16:32 -0400 Subject: [PATCH 4/6] Added the final feature --- script.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/script.js b/script.js index 41a1301..4414548 100644 --- a/script.js +++ b/script.js @@ -80,4 +80,7 @@ footerDiv.remove(); const header = document.querySelector("#container"); console.log("header", header); */ +console.log("Final Feature"); +const header = [...document.body.children].find( e=> e.ed === "container"); +console.log("header (final):", header) From 32611485ed016972d83706adae5a7893042a5a17 Mon Sep 17 00:00:00 2001 From: tabularasae Date: Wed, 18 Jun 2025 13:19:43 -0400 Subject: [PATCH 5/6] Miscellaneous changes --- script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 4414548..0c70597 100644 --- a/script.js +++ b/script.js @@ -19,7 +19,7 @@ console.log("container (querySelector):", containerQS); // - [ 3 ] Select all of the list items with a class of "second". console.log("Feature 3"); -const seconds = document.getElementsByClassName("second"); // HTMLCollection +const seconds = document.getElementsByClassName("second"); console.log("seconds:", seconds); // - [ 4 ] Select a list item with a class of third, but only the list item inside of the ol tag. @@ -38,6 +38,7 @@ console.log("thirdInsideOl:", thirdInsideOl); // - [ 5 ] Give the section with an id of container the text "Hello!". console.log("Feature 5"); container.appendChild(document.createTextNode("Hello!")); +console.log(container.innerText); // - [ 6 ] Add the class main to the div with a class of footer. console.log("Feature 6"); From c9027033973e75664e3ffd2f1dee573649fe580f Mon Sep 17 00:00:00 2001 From: hailia sommerville Date: Wed, 18 Jun 2025 13:57:19 -0400 Subject: [PATCH 6/6] miscellaneous edits --- script.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 0c70597..f573b73 100644 --- a/script.js +++ b/script.js @@ -58,7 +58,7 @@ console.log("newLi created:", newLi); // - [ 9 ] Give the li the text "four". console.log("Feature 9"); -newLi.innerText = "four"; +newLi.textContent = "four"; // - [ 10 ] Append the li to the ul element. console.log("Feature 10"); @@ -68,9 +68,7 @@ console.log("ul children after append:", theUl.children); // - [ 11 ] Loop over all of the lis inside the ol tag and give them a background color of "green". console.log("Feature 11"); -for (let i = 0; i < olLis.length; i++) { - olLis[i].style.backgroundColor = "green"; -} +[...olLis].forEach(li => li.style.backgroundColor = "green"); // - [ 12 ] Remove the div with a class of footer. console.log("Feature 12");