fterdal · aarcher711 · Jun 18, 2025 · Jun 18, 2025 · Jun 18, 2025 · Jun 18, 2025
diff --git a/bonus-script.js b/bonus-script.js
@@ -0,0 +1,72 @@
+console.log("hello from JS");
+
+// Loop over all of the lis inside the ol tag and give them a background color of "green".
+
+document.body.style.backgroundColor = "#4169E1"; //adding background color to the page
+
+
+
+const root = document.getElementById("root");
+const h1 = document.createElement("h1");
+h1.innerText =
+  "Welcome to our Intros page :) Here you can learn a little bit about us.";
+h1.style.fontFamily = "Georgia, serif";
+
+root.appendChild(h1);
+
+//NEW STUFF
+//note for team: replace the hex code with your
+// colors we chose for our backgrounds: #4169e1 <-blue #280137 <- purple #882d17 <- red  #da667b <- pink #342a21 <- brown (random placeholder)
+
+//Aiyanna
+const root2 = document.getElementById("root2");
+const h2 = document.createElement("h2");
+h2.innerText =
+  //Bio text goes here
+  " Name: Aiyanna A. \n About Me: I'm a CIS major, and I became interested in technology through media such as cartoons and video games.Outside of programming the hobbies that I spend the most time on are figure skating, art, and cosplay (I love going to anime conventions). I also enjoy learning new languages. \n Snack of choice: Boba \n Fun Fact: I never leave home without my headphones. I listen to a lot of music and if you see me in the server, you can hover over my icon to see what I'm currently listening to.\n";
+
+h2.style.fontFamily = "Georgia, serif"; // font style for entire box
+h2.style.backgroundColor = "#DA667B";// color for inside of bordered box
+h2.style.border = "thick solid  #DA667B"; //color code for border
+
+root.appendChild(h2);
+
+//2nd person
+const root3 = document.getElementById("root3");
+const h3 = document.createElement("h2");
+h3.innerText =
+  "Hello! This is my HTML website created entirely from JavaScript";
+h3.style.fontFamily = "Georgia, serif";
+h3.style.backgroundColor = "DA667B";
+h3.style.border = "thick solid  #DA667B"; //color code for border
+
+root.appendChild(h3);
+
+
+//3rd person
+const root4 = document.getElementById("root3");
+const h4 = document.createElement("h2");
+h4.innerText =
+  "Hello! This is my HTML website created entirely from JavaScript";
+h4.style.fontFamily = "Georgia, serif";
+h4.style.backgroundColor = "DA667B";
+h4.style.border = "thick solid  #DA667B"; //color code for border
+
+root.appendChild(h4);
+
+
+
+//4th person
+const root5 = document.getElementById("root3");
+const h5 = document.createElement("h2");
+h5.innerText =
+  "Hello! This is my HTML website created entirely from JavaScript";
+h5.style.fontFamily = "Georgia, serif";
+h5.style.backgroundColor = "DA667B";
+h5.style.border = "thick solid  #DA667B"; //color code for border
+
+root.appendChild(h5);
+
+
+console.log()
+
diff --git a/bonus.html b/bonus.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM from Scratch!</title>
+    <script defer src="bonus-script.js"></script>
+  </head>
+  <body>
+    <div  id="root"></div>
+    <div  id="root2"></div>
+    <div  id="root3"></div>
+    <div  id="root4"></div>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -21,4 +21,4 @@
     </section>
     <div class="footer"></div>
   </body>
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -1,20 +1,77 @@
 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.
+- [x] Select the section with an id of container without using querySelector.
+- [x] Select the section with an id of container using querySelector.
+- [x] Select all of the list items with a class of "second".
+- [x] Select a list item with a class of third, but only the list item inside of the ol tag.
+- [x] Give the section with an id of container the text "Hello!".
+- [x] Add the class main to the div with a class of footer.
+- [x] Remove the class main on the div with a class of footer.
+- [x] Create a new li element.
+- [x] Give the li the text "four".
+- [X] Append the li to the ul element.
+- [X] Loop over all of the lis inside the ol tag and give them a background color of "green".
+- [X] Remove the div with a class of footer.
 */
 
-// Try rewriting this without using querySelector
-const header = document.querySelector("#container");
-console.log("header", header);
+// Select the section with an id of container without using querySelector.
+const sectionNoQuery = document.getElementById("container");
+console.log("Section (Without using Query Selector): ", sectionNoQuery);
+
+// Select the section with an id of container using querySelector.
+const sectionWithQuery = document.querySelector("#container");
+console.log("Section (Using Query Selector): ", sectionWithQuery);
+
+// Select all of the list items with a class of "second".
+const secondItems = document.querySelectorAll("li.second");
+console.log("List items with class 'second': ", secondItems);
+
+// Emmanuel
+
+// Select a list item with a class of third, but only the list item inside of the ol tag.
+const thirdItem = document.querySelector("ol li.third");
+console.log("Third item in ordered list: ", thirdItem);
+
+// Give the section with an id of container the text "Hello!".
+const container = document.getElementById("container");
+const newText = document.createElement('p');
+
+newText.innerText = "Hello!";
+container.prepend(newText);
+
+// Add the class main to the div with a class of footer.
+const footerDiv = document.querySelector("div.footer");
+footerDiv.classList.add("main");
+
+// Jocsan
+
+// Remove the class main on the div with a class of footer.
+footerDiv.classList.remove('main');
+
+// Create a new li element.
+const newLi = document.createElement('li');
+
+// Give the li the text "four".
+newLi.innerText = "four";
+
+//Aiyanna - tasks done
+// Append the li to the ul element.
+
+const appendElement = document.querySelector("ul").append(newLi);
+console.log()
+
+// Loop over all of the lis inside the ol tag and give them a background color of "green".
+
+const styleColor = document.querySelectorAll("ol li");
+[...styleColor].forEach(element => {
+    element.style.backgroundColor = "green";
+
+});
+console.log(styleColor)
+
+// Remove the div with a class of footer.
+
+const footerClass = document.querySelector(".footer");
+console.log(footerClass);
+footerClass.parentNode.removeChild(footerClass);
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,4 +21,4 @@ @@
         </section>
         <div class="footer"></div>
       </body>
-    </html>
+    </html>