Return-Ready-PT-Tues-Thurs · koggenfuss · Dec 29, 2020 · Jan 1, 2021 · Jan 1, 2021 · Jan 1, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/about.html b/about.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+ <script>
+     /*Add new title to page*/
+     let title = document.querySelector("title");
+     title.textContent = "About Me";
+
+    /*Add this code and text to webpage*/
+     let ul = document.createElement("UL");
+     document.body.appendChild(ul);
+     let aboutMe = ["Nickname: booboo", "Favorites: music, pizza, The Office", "Hometown: Wilmington", "Random Fact: Black is my favorite color"];
+
+     for(i=0;i<aboutMe.length;i++){
+        let li = document.createElement("LI"); 
+        li.textContent=aboutMe[i];
+        ul.appendChild(li);
+     }
+
+     /*Add span element and give each span an id*/
+     for(i=0;i<aboutMe.length;i++){
+        li = document.querySelectorAll("li");
+        let span = document.createElement("span");
+        li[i].parentNode.insertBefore(span, li[i]);
+        span.appendChild(li[i]);
+        span.setAttribute("id", "span"+i);
+        console.log(li[i]);
+     }
+
+ </script> 
+ <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/images/IMG_0285.JPG b/images/IMG_0285.JPG
diff --git a/images/ratio3x2_1200.jpg b/images/ratio3x2_1200.jpg
diff --git a/js-dom.html b/js-dom.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JS-Dom HTML</title>
+</head>
+<body>
+    <script>
+        /*Created two paragraph elements and set their attributes*/
+        let p1= document.createElement("P");
+        let p2 = document.createElement("P");
+        p1.setAttribute("id", "paragraph1");
+        p2.setAttribute("id", "paragraph2");
+
+        /*Set paragraph text content*/
+        p1.textContent = "We are coders!";
+        p2.textContent = "We are coders!";
+
+        /*Appended paragraphs to body*/
+        document.body.appendChild(p1);
+        document.body.appendChild(p2);
+
+        /*Changed paragraph 1 text content*/
+        document.getElementById("paragraph1").textContent= "We are Developers!";
+
+        /*Added image to document*/
+        let img = document.createElement("img");
+        img.src = "https://www.wilmingtonde.gov/Home/ShowPublishedImage/2524/636504239673830000";
+        img.alt = "Downtown Wilmington, Delaware";
+        document.body.appendChild(img);
+        img.style.display = "block";
+
+        /*Changed script color of paragraphs and font size of paragraph 1*/
+        p1.style.color = "red";
+        p2.style.color = "red";
+        p1.style.fontSize = "2.5em";
+
+        /*Created toggle button to toggle image*/
+        const toggleButton = document.createElement("BUTTON");
+        document.body.appendChild(toggleButton);
+        toggleButton.style.display = "block";
+        toggleButton.textContent = "Hide image";
+
+        /*If image is shown, toggle button to hide image, else toggle button to show itmage*/
+        toggleButton.addEventListener("click", () => {
+            if (img.style.display == "block") {
+                console.log(img.style.display);
+                img.style.display = "none";
+                toggleButton.textContent = "Show image";
+            } else {
+                console.log(img.style.display);
+                img.style.display = "block";
+                toggleButton.textContent = "Hide image";
+            }
+        });
+    </script>
+
+
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,26 @@
+window.addEventListener("load", (event) => {
+    /*Style font on window load*/
+    document.querySelector("body").style.fontFamily = "Arial, sans-serif";
+
+    /*Add image on window load*/
+    let image = document.createElement("img");
+    image.src = "images/ratio3x2_1200.jpg";
+    image.alt = "San Francisco Bay Bridge";
+    document.body.appendChild(image);
+
+
+    /*Create image on window load*/
+    let picOfMe = document.createElement("img");
+    picOfMe.src = "images/IMG_0285.JPG";
+    picOfMe.alt = "Picture of Katharyn Lynn Oggenfuss";
+    document.body.append(picOfMe);
+});
+
+/*Populate facts about me in existing unordered list*/
+let factsAboutMe = ["Nickname: Kiki", "Favorites: jazz, piano, Halloween", "Hometown: Middletown", "Random Fact: I started playing the piano at 4 years old"];
+let li = document.querySelectorAll("li"); 
+for(i=0;i<factsAboutMe.length;i++){
+        li[i].textContent=factsAboutMe[i];
+        li[i].style.color="purple"
+     }
+
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,32 @@
+const firstParagraph = document.querySelector("#firstParagraph");
+const secondParagraph = document.querySelector("#secondParagraph");
+const buttonAddText = document.querySelector("#buttonAddText");
+const buttonAddMoreText = document.querySelector("#buttonAddMoreText");
+let buttonToggleImage = document.querySelector("#buttonToggleImage");
+
+buttonAddText.addEventListener("click", () => {
+    console.log("in paragraphs");
+    firstParagraph.textContent = "We are coders!";
+    secondParagraph.textContent = "We are coders!";
+});
+
+buttonAddMoreText.addEventListener("click", () => {
+    console.log("in first paragraph");
+    firstParagraph.textContent = "Developers for life!";
+});
+
+buttonToggleImage.addEventListener("click", () => {
+    if (buttonToggleImage.style.display == "none") {
+        let img = document.createElement("img");
+        img.src = "https://www.wilmingtonde.gov/Home/ShowPublishedImage/2524/636504239673830000";
+        console.log(img);
+        buttonToggleImage.appendChild(img);
+    } else {
+        buttonToggleImage.textContent = "Display Image";
+
+    }
+});
+
+
+
+
diff --git a/lib/images/Annie J. Easley.jpg b/lib/images/Annie J. Easley.jpg
diff --git a/lib/images/David L. Steward.jpg b/lib/images/David L. Steward.jpg
diff --git a/lib/images/Guy Primus.jpg b/lib/images/Guy Primus.jpg
diff --git a/lib/images/Jessie Woolley-Wilson.jpeg b/lib/images/Jessie Woolley-Wilson.jpeg
diff --git a/lib/images/Katherine Johnson.jpg b/lib/images/Katherine Johnson.jpg
diff --git a/lib/images/Kathryn Finney .jpg b/lib/images/Kathryn Finney .jpg
diff --git a/lib/images/Kimberly Bryant.jpg b/lib/images/Kimberly Bryant.jpg
diff --git a/lib/images/Stacy Spikes.jpg b/lib/images/Stacy Spikes.jpg
diff --git a/lib/images/diversetech.jpeg b/lib/images/diversetech.jpeg
diff --git a/lib/images/fist.png b/lib/images/fist.png
diff --git a/lib/images/laptop.svg b/lib/images/laptop.svg
diff --git a/table-of-contents.html b/table-of-contents.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<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>
+    <script>
+        /*prepend div to use available toc code on codepen*/
+        let div = document.createElement("DIV");
+            document.body.prepend(div);
+
+        /*set attributes of divs to use available toc code on codepen*/
+        document.getElementsByTagName("div")[0].setAttribute("id", "console" );
+        document.getElementsByTagName("div")[1].setAttribute("id", "toc");
+        document.getElementsByTagName("div")[2].setAttribute("id", "contents");
+
+        /*/use toc code from codepen*/
+        var c = function() {
+            return({
+                log: function(msg) {
+                consoleDiv = document.getElementById('console');
+                para = document.createElement('p');
+                text = document.createTextNode(msg);
+                para.appendChild(text);
+                consoleDiv.appendChild(para);
+                }
+            });
+        }();
+
+        window.onload = function () {
+            var toc = "";
+            var level = 0;
+            var maxLevel = 3;
+
+            document.getElementById("contents").innerHTML =
+                document.getElementById("contents").innerHTML.replace(
+                    /<h([\d])>([^<]+)<\/h([\d])>/gi,
+                    function (str, openLevel, titleText, closeLevel) {
+                        if (openLevel != closeLevel) {
+                        c.log(openLevel)
+                            return str + ' - ' + openLevel;
+                        }
+
+                        if (openLevel > level) {
+                            toc += (new Array(openLevel - level + 1)).join("<ol>");
+                        } else if (openLevel < level) {
+                            toc += (new Array(level - openLevel + 1)).join("</ol>");
+                        }
+
+                        level = parseInt(openLevel);
+
+                        var anchor = titleText.replace(/ /g, "_");
+                        toc += "<li><a href=\"#" + anchor + "\">" + titleText
+                            + "</a></li>";
+
+                        return "<h" + openLevel + "><a name=\"" + anchor + "\">"
+                            + titleText + "</a></h" + closeLevel + ">";
+                    }
+                );
+
+            if (level) {
+                toc += (new Array(level + 1)).join("</ol>");
+            }
+
+            document.getElementById("toc").innerHTML += toc;
+        };
+
+    </script>
+</body>
+</html>