Return-Ready-PT-Mon-Wed · nsatinover · Dec 29, 2020 · Dec 29, 2020 · Dec 29, 2020 · Dec 29, 2020
diff --git a/about.html b/about.html
@@ -0,0 +1,26 @@
+<!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>
+
+    <h1>About Me</h1>
+
+    <span>
+        <ul>
+            <li>Nickname: None</li>
+            <li>Favorites: music, pizza, The Office</li>
+            <li>Hometown: Wilmington </li>
+            <li>Random Fact: Black is my favorite color.</li>
+        </ul>
+    </span>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/fruits.html b/fruits.html
@@ -0,0 +1,33 @@
+<!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 id="headerDiv">
+        <h3>Table of Contents</h3>
+    </div>
+    <hr />
+    <div id="contents">
+        <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 src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
+    <script src="fruits.js"></script>
+</body>
+
+</html>
diff --git a/fruits.js b/fruits.js
@@ -0,0 +1,34 @@
+const bodyElem = document.querySelector('body');
+const divHeader = document.querySelector('#headerDiv');
+
+
+
+// insert a div element above current body content
+let tocElem = document.createElement('div');
+tocElem.id = 'toc';
+bodyElem.insertBefore(tocElem, divHeader);
+
+
+// jquery function on document ready to get child elem of #contents and iterate
+//console.log(divList[i].innerText);
+$(document).ready(function toc_builder(){
+
+    const divList = $('#contents').children();
+
+    for (let i = 0; i < divList.length; i++) {
+        if(divList[i].nodeName == "H1"){
+            $('#toc').append(`<h1>${divList[i].innerText}</h1>`);
+
+        } 
+        else if(divList[i].nodeName == "H2"){
+            $('#toc').append(`<ul><u>${divList[i].innerText}</u></ul>`);
+        }
+        else {
+            $('#toc').append(`<li>${divList[i].innerText}</li>`);
+        }
+    }
+    $('#toc').append(`</br>`);
+    $('#toc').append(`</br>`);
+
+});
+
diff --git a/js-dom.html b/js-dom.html
@@ -0,0 +1,19 @@
+<!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>
+    <p class="para" id="paraOne">one</p>
+    <p class="para" id="paraTwo">two</p>
+
+    <button id="hideBtn" onclick="hideImage()">Hide/ Show the Laptop</button>
+
+    <script src="js-dom.js"></script>
+</body>
+
+</html>
diff --git a/js-dom.js b/js-dom.js
@@ -0,0 +1,41 @@
+//// Change text of p1, p2 ////
+const paraBothMessage = "We are coders!";
+const paraOneMessage = "Developers for life!";
+
+var bothPara = document.querySelectorAll(".para");
+
+for (let i = 0; i < bothPara.length; i++) {
+  const thisPara = bothPara[i];
+  thisPara.innerText = paraBothMessage;
+}
+
+var paraOne = document.getElementById("paraOne");
+paraOne.innerText = paraOneMessage;
+paraOne.style.fontSize = "40px";
+
+//
+let imageHtml = 
+`
+<h3>This is a laptop!</h3>
+<img class="image" id="laptopImg" src="lib/images/laptop.svg" alt="Granville Woods"/>
+`;
+
+let bodyElem = document.querySelector('body');
+bodyElem.innerHTML += imageHtml;
+
+// Change all text to red
+bodyElem.style.color = "red";
+
+//hide button
+function hideImage() {
+    const laptopImg = document.querySelector(".image");
+    const status = laptopImg.style.visibility;
+
+    if(status == "hidden"){
+        laptopImg.style.visibility = "visible";
+    } 
+    else {
+        laptopImg.style.visibility = "hidden";
+    }
+
+}
diff --git a/lib/images/Headshot Photo.JPG b/lib/images/Headshot Photo.JPG
diff --git a/lib/index.html b/lib/index.html
@@ -8,12 +8,16 @@
     <link rel="stylesheet" type="text/css" media="screen" href="./styles.css" />
   </head>
   <body>
+
+
     <div class="icons">
       <img class="fist" src="./images/fist.png" alt="fist" />
       <img class="laptop" src="./images/laptop.svg" alt="fist" />
     </div>
     <header>
       <h1>Minority Tech</h1>
+      <p class="para" id="paraOne"></p>
+      <p class="para" id="paraTwo"></p>
     </header>
     <main>
       <div class="tech">

diff --git a/main.js b/main.js
@@ -0,0 +1,23 @@
+// Change font of body
+const bodyElem = document.querySelector('body');
+bodyElem.style.fontFamily = "Arial, sans-serif";
+
+const liElem = document.querySelectorAll('li');
+
+for (let i = 0; i < liElem.length; i++) {
+    const thisLi = liElem[i];
+    thisLi.style.color = "red";
+}
+
+//Add image
+let imageHtml = 
+`
+<h3>This is a picture of me!</h3>
+<img class="image" id="laptopImg" src="lib/images/Headshot Photo.JPG" alt="Granville Woods"/>
+`;
+
+bodyElem.innerHTML += imageHtml;
+
+let imgElem = document.querySelector('.image');
+imgElem.width = "100";
+