From 4991567e866a2d5fe4c63fba153cb688c2d153be Mon Sep 17 00:00:00 2001 From: rend1027 Date: Wed, 18 Jun 2025 13:18:42 -0400 Subject: [PATCH 1/2] flo --- .vscode/settings.json | 3 +++ script.js | 25 +++++++++++++++++++++---- 2 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/script.js b/script.js index 5762129..cdfaabc 100644 --- a/script.js +++ b/script.js @@ -1,20 +1,37 @@ 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. +- [check] Select the section with an id of container without using querySelector. (Flo) +- [check] Select the section with an id of container using querySelector. (Flo) - [ ] 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!". +- [check] Give the section with an id of container the text "Hello!". (Flo) - [ ] 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". +- [cheack] Loop over all of the lis inside the ol tag and give them a background color of "green". (Flo) - [ ] Remove the div with a class of footer. */ +//Select the section with an id of container without using querySelector. +const container = document.getElementById("container"); +//Give the section with an id of container the text "Hello!". +const newPTag = document.createElement("p"); +newPTag.textContent = "Hello"; +container.append(newPTag); +//Select the section with an id of container using querySelector. +const container2 = document.querySelector("#container"); +//Loop over all of the lis inside the ol tag and give them a background color of "green". +const olElement= document.querySelector("ol"); +[...olElement.children].forEach(li => { + li.style.backgroundColor = "green" +}) + + + + // Try rewriting this without using querySelector const header = document.querySelector("#container"); console.log("header", header); From 07ae8e010e164e68e29ebbc04da975dd218a90dc Mon Sep 17 00:00:00 2001 From: Elian Echavarria Date: Wed, 18 Jun 2025 13:40:50 -0400 Subject: [PATCH 2/2] Elian - Dom --- script.js | 54 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 11 deletions(-) diff --git a/script.js b/script.js index 5762129..80079b5 100644 --- a/script.js +++ b/script.js @@ -1,20 +1,52 @@ 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". +- [check ] Select the section with an id of container without using querySelector. +- [ check] Select the section with an id of container using querySelector. +- [check ] 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". +- [check ] Give the section with an id of container the text "Hello!". +- [ check ] Add the class main to the div with a class of footer. +- [ check ] Remove the class main on the div with a class of footer. +- [ check] Create a new li element. +- [check ] Give the li the text "four". +- [ check ] Append the li to the ul element. +- [check ] 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. */ + + + + + + + + +/* Select all of the list items with a class of "second". */ +const secondListItems = document.querySelectorAll('.second'); + + + +secondListItems.forEach(item => { + if (item.parentNode.tagName === 'UL') { + const newli = document.createElement('li'); // Create a new li element. + newli.textContent = "four"; // Give the li the text "four". + item.parentNode.append(newli); // Append the li to the ul element. + } +}) + + +/* Add the class main to the div with a class of footer */ +const footerEl = document.querySelector('.footer'); +footerEl.classList.add('main'); // add class "main" to the footer div +footerEl.classList.remove('main'); // Remove the class main on the div with a class of footer. + + + + + + // Try rewriting this without using querySelector const header = document.querySelector("#container"); -console.log("header", header); +// console.log("header", header);