diff --git a/bonus-script.js b/bonus-script.js new file mode 100644 index 0000000..86234f0 --- /dev/null +++ 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 new file mode 100644 index 0000000..21f571f --- /dev/null +++ b/bonus.html @@ -0,0 +1,16 @@ + + + + + + DOM from Scratch! + + + +
+
+
+
+ + + diff --git a/index.html b/index.html index 1358462..29f87d6 100644 --- a/index.html +++ b/index.html @@ -21,4 +21,4 @@
- + \ No newline at end of file diff --git a/script.js b/script.js index 5762129..2599e9e 100644 --- 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); \ No newline at end of file