JavaScript-DOM Lab Completed

JS/main.js

@@ -0,0 +1,53 @@
+//Style body element with 'Arial, sans-serif' font family
+const bodyTag = document.querySelector('body');
+bodyTag.style.fontFamily = "Arial, sans-serif";
+
+//Create variable for list items
+const listItems = document.querySelectorAll('li');
+
+//Iterate through each list item and change color to purple!
+for (let i = 0; i < listItems.length; i++) {
+    const thisLi = listItems[i];
+    thisLi.style.color = "purple";
+}
+
+//Select list items to replace
+//Change 1st List Item
+const oldNickname = document.querySelector("li:first-child");
+//Create new list item element to replace the old one
+const newNickname = document.createElement('li');
+newNickname.innerHTML = '<li>Stephanie</li>';
+//Target parent element of the target child & apply changes to child
+oldNickname.parentNode.replaceChild(newNickname, oldNickname);
+
+//Change 2nd List Item
+const oldFavorites = document.querySelector("li:nth-of-type(2)");
+//Create new list item element to replace the old one
+const newFavorites = document.createElement('li');
+newFavorites.innerHTML = '<li>Favorites: Jazz music, filet-mignon, Office Space</li>';
+//Target parent element of the target child & apply changes to child
+oldFavorites.parentNode.replaceChild(newFavorites, oldFavorites);
+
+//Change 3rd List Item
+const oldHometown = document.querySelector("li:nth-of-type(3)");
+//Create new list item element to replace the old one
+const newHometown = document.createElement('li');
+newHometown.innerHTML = '<li>Hometown: Middletown</li>';
+//Target parent element of the target child & apply changes to child
+oldHometown.parentNode.replaceChild(newHometown, oldHometown);
+
+//Change Last List Item
+const oldRandom = document.querySelector("li:nth-of-type(4)");
+//Create new list item element to replace the old one
+const newRandom = document.createElement('li');
+newRandom.innerHTML = '<li>Random Fact: I have traveled to Japan!</li>';
+//Target parent element of the target child & apply changes to child
+oldRandom.parentNode.replaceChild(newRandom, oldRandom);
+
+//Style the <li>'s to a color of my choosing
+document.getElementById("aboutList").style.color = "turquoise";
+
+//Create img element to hold new image
+let myImg = new Image(200, 215);
+myImg.src = 'myPhoto.jpg';
+document.body.appendChild(myImg);

JS/myScript_1.js

@@ -0,0 +1,42 @@
+
+const msgBothPars = "We are coders!";
+const msgFirstPar = "Developers for life!";
+
+//Insert text to both paragraphs
+let bothPars = document.querySelectorAll(".pars");
+
+for (let i = 0; i < bothPars.length; i++) {
+    const thisPars = bothPars[i];
+    thisPars.innerText = msgBothPars;
+};
+
+//Change text content & font size of first paragraph
+let parFirst = document.getElementById("parOne");
+parOne.innerText = msgFirstPar;
+parOne.style.fontSize = "40px";
+
+//Assign image to variable
+let imageHtml = `
+<img id="image" class="divTechImg" src="lib/images/diversetech.jpeg" alt="drawing of diverse people in tech"></img>
+`;
+
+//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";
+    }
+}
+
+

lib/script.js → 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";
+//
+

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

about.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>_About Me_</title>
+</head>
+<body>
+
+    <span id="spanId">
+    <ul id="aboutList" >
+        <li id="nickname">Nickname: booboo</li>
+        <li id="favorites">Favorites: music, pizza, The Office</li>
+        <li id="hometown">Hometown: Wilmington</li>
+        <li id="random">Random Fact: Black is my favorite color.</li>
+    </ul>
+    </span>
+
+    <script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
+    crossorigin="anonymous"></script>
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
+    <script src="JS/main.js"></script>
+
+
+</body>
+</html>

js-dom-lab.md

@@ -1,76 +1,67 @@
 ![code differently](https://user-images.githubusercontent.com/54545904/91590200-f82ec600-e928-11ea-9433-eea450388abf.png)
 
-
-
 ## JavaScript and the DOM Lab
 
-
-
-
-
 ### The Set-Up
 
-
 - Fork and clone this repository locally and in Visual Studio Code
 
 - Push up your changes to the remote repository
 
-
-
 ### Tasks
 
 #### Part One
 
-1. Create an HTML file called `js-dom.html`
+1. - Create an HTML file called `js-dom.html`
 
-    - Must have global HTML document structure
+   - Must have global HTML document structure
 
-2. Add two `<p>` elements without content. 
+2. - Add two `<p>` elements without content.
 
-3. Give each `<p>` element an `id` and value
+3. - Give each `<p>` 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 `<p>` element.
+   - Write a script to add "We are coders!" to the `<p>` element.
+
+   - Find the _first_ `<p>` 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* `<p>` 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 `<p>` 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 `<p>` 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
 <ul>
-    <li>Nickname: booboo</li>
-    <li>Favorites: music, pizza, The Office</li>
-    <li>Hometown: Wilmington </li>
-    <li>Random Fact: Black is my favorite color.</li>
+  <li>Nickname: booboo</li>
+  <li>Favorites: music, pizza, The Office</li>
+  <li>Hometown: Wilmington</li>
+  <li>Random Fact: Black is my favorite color.</li>
 </ul>
 ```
 
@@ -84,55 +75,52 @@
 
 9. Complete the following tasks below using the DOM methods:
 
-    - Change the body style so it has a `font-family` of `Arial, sans-serif`.
+   - Change the body style so it has a `font-family` of `Arial, sans-serif`.
 
-    - Replace each of the values with your own information.
+   - Replace each of the values with your own information.
 
-        > Stage, commit, and push changes. Let Git be on your team.
+     > Stage, commit, and push changes. Let Git be on your team.
 
-    - Change the `<li>` style to a color of your choosing. Cannot be black.
+   - Change the `<li>` style to a color of your choosing. Cannot be black.
 
-        > Stage, commit, and push changes. Let Git be on your team.
+     > Stage, commit, and push changes. Let Git be on your team.
 
-    - Find a picture and add to the project.
+   - Find a picture and add to the project.
 
-    - Create a new `img` element and set its `src` attribute to a picture of you. Append the image to the web page.
+   - Create a new `img` element and set its `src` attribute to a picture of you. Append the image to the web page.
 
-        > Stage, commit, and push changes. Let Git be on your team.
+     > Stage, commit, and push changes. Let Git be on your team.
 
 #### Part Three
 
-Using the great power of the DOM and its methods, iterate through the elements in the HTML document and create a Table of Contents that will be at the top of the webpage. 
+Using the great power of the DOM and its methods, iterate through the elements in the HTML document and create a Table of Contents that will be at the top of the webpage.
 
 1. Create a new HTML file and add the code below.
 
 ```html
 <body>
-    <div >
-        <h3>Table of Contents</h3>
-    </div>
-    <hr/>
-    <div >
-        <h1>Fruits</h1>
-        <h2>Red Fruits</h2>
-        <h3>Apple</h3>
-        <h3>Raspberry</h3>
-        <h2>Orange Fruits</h2>
-        <h3>Orange</h3>
-        <h3>Tangerine</h3>
-        <h1>Vegetables</h1>
-        <h2>Vegetables Which Are Actually Fruits</h2>
-        <h3>Tomato</h3>
-        <h3>Eggplant</h3>
-    </div>
+  <div>
+    <h3>Table of Contents</h3>
+  </div>
+  <hr />
+  <div>
+    <h1>Fruits</h1>
+    <h2>Red Fruits</h2>
+    <h3>Apple</h3>
+    <h3>Raspberry</h3>
+    <h2>Orange Fruits</h2>
+    <h3>Orange</h3>
+    <h3>Tangerine</h3>
+    <h1>Vegetables</h1>
+    <h2>Vegetables Which Are Actually Fruits</h2>
+    <h3>Tomato</h3>
+    <h3>Eggplant</h3>
+  </div>
 </body>
 ```
+
 2. Stage, commit, and push changes. Let Git be on your team.
 
-3. Add a script to the HTML document that iterates through the elements and creates a table of contents. The table of contents should be at the top of the webpage. 
+3. Add a script to the HTML document that iterates through the elements and creates a table of contents. The table of contents should be at the top of the webpage.
 
 4. Stage, commit, and push changes. Let Git be on your team.
-
-
-
-

js-dom.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="CSS/styles.css">
+    <title>JS DOM Lab</title>
+</head>
+<body>
+
+<!-- Add two `<p>` elements without content. -->
+<!-- Give each `<p>` element an `id` and value -->
+    <p id="parOne" class="pars">one</p>
+    <p id="parTwo" class="pars">two</p>
+
+    <button id="buttonHide" onclick="buttonAction()">Hide/Show Image</button>
+
+
+    <script src="JS/myScript_1.js"></script>
+
+</body>
+</html>
+
+