diff --git a/DOM.js b/DOM.js
new file mode 100644
index 0000000..cbe5529
--- /dev/null
+++ b/DOM.js
@@ -0,0 +1,33 @@
+function addText() {
+    document.getElementById("para1").textContent = "We are coders!";
+}
+
+function changeText() {
+    document.getElementById("para1").innerHTML = "Developers for life!";
+    }
+
+function addImage() {
+    let image = new Image(200, 200);
+    image.src = "tech.jpg";
+    document.getElementById("para2").appendChild(image);
+    }
+
+function changeColor() {
+    document.getElementById("para1").style.color = "brown";
+}
+
+function fontSize() {
+    document.getElementById("para1").style.fontSize = "40px";
+}
+
+function hideImage() {
+    document.getElementById("para2").textContent = "";
+}
+
+
+
+
+
+
+
+
diff --git a/TOC.html b/TOC.html
new file mode 100644
index 0000000..4c8b218
--- /dev/null
+++ b/TOC.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Table of Contents</title>
+    
+</head>
+<body>
+    <div id="toc">
+        <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="toc.js" ></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..8e22267
--- /dev/null
+++ b/about.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE HTML>
+<HTML>
+   <HEAD>
+      <TITLE>About me</TITLE>
+
+      <script src="main.js"></script>
+   </HEAD>
+   <body id="font">
+
+      <button type="button" onclick="changeFont()">font style</button>
+      <button type="button" onclick="changeColor()">change color</button>
+      <h1>About Me</h1>
+   <span>
+      <ul id="list">
+        <li>Nickname: hinz</li>
+        <li>Favorites: music, pizza, The Office</li>
+        <li>Hometown: Bear </li>
+        <li>Random Fact: Brown is my favorite color.</li>
+      </ul>
+    </span>
+
+      
+      
+   </body>
+</HTML>
\ No newline at end of file
diff --git a/js-dom.html b/js-dom.html
new file mode 100644
index 0000000..cdd4eef
--- /dev/null
+++ b/js-dom.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>DOM lab</title>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+        <script type="text/javascript">
+            $(document).ready(function(){
+              $('#btn1').on("click",function(e){
+               $('#myImg').toggle('slow');
+              });
+            });
+            </script>
+    </head>
+<body>
+
+    
+    <p id="para1" style="color: red; font-size: 40px;">Developers for life!</p>
+
+    <p id="Para2"></p>
+
+    <img id="myImg" src="http://placeimg.com/200/200/arch" alt="architecture">
+    <p id="demo"></p>
+
+    <button type="button" id="btn1">Show/Hide Image</button>
+
+    <script>
+        function myFunction() {
+          var x = document.getElementById("myImg").src;
+          document.getElementById("demo").innerHTML = x;
+          document.getElementById("para1").style.fontSize = "40px";
+          
+        }
+        </script>
+</body>
+
+</html>
+
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..ebc5047
--- /dev/null
+++ b/main.js
@@ -0,0 +1,8 @@
+
+    function changeFont() {
+        document.getElementById("font").style.fontFamily = "Arial,sans-serif";
+      }
+
+      function changeColor() {
+        document.getElementById("list").style.color = "green";
+      }
\ No newline at end of file
diff --git a/toc.js b/toc.js
new file mode 100644
index 0000000..5fcc244
--- /dev/null
+++ b/toc.js
@@ -0,0 +1,49 @@
+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;
+};
\ No newline at end of file
