+`;
+
+//Place image in body of HTML
+let bodyTag = document.querySelector('body');
+bodyTag.innerHTML += imageHtml;
+
+//Change text color in body to purple
+bodyTag.style.color = "purple";
+
+//Create functionality to hide/display image with button
+function buttonAction() {
+ const targetImage = document.querySelector(".divTechImg");
+ const curStatus = targetImage.style.visibility;
+
+ if(curStatus == "hidden"){
+ targetImage.style.visibility = "visible";
+ } else {
+ targetImage.style.visibility = "hidden";
+ }
+}
+
+
diff --git a/lib/script.js b/JS/script.js
similarity index 80%
rename from lib/script.js
rename to JS/script.js
index 51e5df8..1575cae 100644
--- a/lib/script.js
+++ b/JS/script.js
@@ -40,3 +40,8 @@ var characters = [
contribution: "What did/do I do?"
},
];
+// Set the innerHTML property: HTMLElementObject.innerHTML = text
+// Change the HTML content, URL, and target of a link:
+// document.getElementById("myAnchor").innerHTML = "W3Schools";
+//
+
diff --git a/JS/table-of-contents.js b/JS/table-of-contents.js
new file mode 100644
index 0000000..9d0133d
--- /dev/null
+++ b/JS/table-of-contents.js
@@ -0,0 +1,48 @@
+
+//selects elements h1, h2 & h3 and saves them to a variable 'toc'
+let toc = document.querySelectorAll('h1, h2, h3');
+
+//creates an unordered list
+let ul = document.createElement('ul');
+ul.setAttribute("class", "main");
+
+//places the list inside the div element
+document.querySelector('div').appendChild(ul);
+
+let tocItem;
+let content;
+let oldList;
+
+//iterate through the elements on the page
+for (let i = 1; i < toc.length; i++) {
+ if (toc[i].nodeName == 'H2') {
+ ul = document.createElement('ul');
+ ul.setAttribute("class", "sub1");
+ document.querySelector('ul').appendChild(ul);
+ tocItem = document.createElement('li'); // creates a list item element
+ content = document.createTextNode(toc[i].textContent); // creates a text node w content
+ tocItem.appendChild(content); //appends the content to the list item
+ ul.appendChild(tocItem); //appends the list item to the unordered list
+ } else if (toc[i].nodeName == 'H3' && toc[i-1].nodeName == 'H2') {
+ ul = document.createElement('ul');
+ ul.setAttribute("class", "sub2");
+ tocItem.appendChild(ul);
+ tocItem = document.createElement('li');
+ content = document.createTextNode(toc[i].textContent);
+ tocItem.appendChild(content);
+ ul.appendChild(tocItem);
+ } else if (toc[i].nodeName == 'H3' && toc[i-1].nodeName == 'H3') {
+ oldList = tocItem;
+ tocItem = document.createElement('li');
+ content = document.createTextNode(toc[i].textContent);
+ tocItem.appendChild(content);
+ oldList.appendChild(tocItem);
+ } else {
+ li = document.createElement('li');
+ content = document.createTextNode(toc[i].textContent);
+ li.appendChild(content);
+ document.querySelector('ul').appendChild(li);
+ }
+}
+
+//referenced: https://www.w3schools.com/jsref/met_document_createtextnode.asp
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..c7ecfb9
--- /dev/null
+++ b/about.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ -
+
- Nickname: booboo +
- Favorites: music, pizza, The Office +
- Hometown: Wilmington +
- Random Fact: Black is my favorite color. +
` elements without content. +2. - Add two `
` elements without content. -3. Give each `
` element an `id` and value +3. - Give each `
` element an `id` and value 4. Stage, commit, and push changes. Let Git be on your team. 5. Create scripts for each exercise: - - Write a script to add "We are coders!" to the `
` element. + - Write a script to add "We are coders!" to the `
` element. + + - Find the _first_ `
` element and change its text to "Developers for life!" + + - Add an image to that e HTML document using DOM methods + + > Stage, commit, and push changes. Let Git be on your team. - - Find the *first* `
` element and change its text to "Developers for life!" + - Write a script to change the color of the text from black to your favorite color - - Add an image to the HTML document using DOM methods + - Add a script to change the font size of the first `
` element to `40px` - > Stage, commit, and push changes. Let Git be on your team. + > Stage, commit, and push changes. Let Git be on your team. - - Write a script to change the color of the text from black to your favorite color + - Add a button to the HTML document - - Add a script to change the font size of the first `
` element to `40px` - - > Stage, commit, and push changes. Let Git be on your team. - - - Add a button to the HTML document - - - Add a script that hides the image when the button is clicked - - > Stage, commit, and push changes. Let Git be on your team. + - Add a script that hides the image when the button is clicked + > Stage, commit, and push changes. Let Git be on your team. #### Part Two -1. Create an HTML file called `about.html` +1. - Create an HTML file called `about.html` - - Must have global HTML document structure + - Must have global HTML document structure 2. Stage, commit, and push changes. Let Git be on your team. 3. Create a simple "About Me" webpage and using JS and the DOM to manipulate elements. -4. Title your webpage *About Me* and add this code +4. Title your webpage _About Me_ and add this code + ```html
-
-
- Nickname: booboo -
- Favorites: music, pizza, The Office -
- Hometown: Wilmington -
- Random Fact: Black is my favorite color. +
- Nickname: booboo +
- Favorites: music, pizza, The Office +
- Hometown: Wilmington +
- Random Fact: Black is my favorite color.