diff --git a/about.html b/about.html
new file mode 100644
index 0000000..e1a3aff
--- /dev/null
+++ b/about.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Me</title>
+</head>
+<body>
+    <ul>
+        <span id="nickname"><li>Nickname: booboo</li></span>
+        <span id="favorites"><li>Favorites: music, pizza, The Office</li>
+        <span id="hometown"><li>Hometown: Wilmington </li></span>
+        <span id="randomFact"></span><li>Random Fact: Black is my favorite color.</li></span>
+    </ul>
+    <script src="main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/js-dom.html b/js-dom.html
new file mode 100644
index 0000000..b52d623
--- /dev/null
+++ b/js-dom.html
@@ -0,0 +1,40 @@
+<!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 id="p1"></p>
+    <p id="p2"></p>
+    <script>
+        // write script to add "We are coders!" to <p>
+        let newp = document.createTextNode("We are coders!");
+        let pContent = document.getElementsByTagName("p");
+        for (let i=0; i<pContent.length; i++) {
+            pContent[i].textContent += "We are coders!";
+        }
+        // Find the first <p> element and change its text to "Developers for life!"
+        document.getElementById("p1").textContent = "Developers for life!";
+        // Add an image to the HTML document using DOM methods
+        let img = document.createElement("img");
+        img.src = "https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg";
+        document.getElementsByTagName("body")[0].appendChild(img);
+        // change the color of the text 
+        pContent = document.getElementsByTagName("p");
+        for (let i=0; i<pContent.length; i++) {
+            pContent[i].style.color = "purple";
+        }
+        // change the font size of the first <p> to 40px
+        document.getElementById("p1").style.fontSize = "40px";
+        // add button
+        let button = document.createElement("button");
+        document.getElementsByTagName("body")[0].appendChild(button);
+        // hide image when button is clicked
+        button.addEventListener("click", () => {
+            img.style.display = "none";
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..6693eb1
--- /dev/null
+++ b/main.js
@@ -0,0 +1,18 @@
+const lis = document.querySelectorAll("li");
+lis[0].textContent = "Nickname: none";
+lis[1].textContent = "Favorites: baking, gardening, pottery";
+lis[2].textContent = "Hometown: Philadelphia";
+lis[3].textContent = "Random fact: Oprah loves bread.";
+// change <li> color
+for (let i=0; i<lis.length; i++) {
+    lis[i].style.color = "darkgreen";
+}
+// add a picture to the project
+const oprah = document.createElement('img');
+oprah.src = "https://media.giphy.com/media/3o7ZeFpK0qqSpsWNsA/giphy.gif";
+document.body.appendChild(oprah);
+// create new img and set src to pic of you
+const amatullah = document.createElement('img');
+amatullah.src = "https://media-exp1.licdn.com/dms/image/C4D03AQFkl-SiehaSNg/profile-displayphoto-shrink_400_400/0/1597633624970?e=1614816000&v=beta&t=-D_e5ZF_fDAxLAMo0Kb1oJJloPr7pySU8tnt3N9tayE";
+document.body.appendChild(amatullah);
+document.body.style.fontFamily = "Arial", sans-ServiceUIFrameContext;
diff --git a/table-of-contents.html b/table-of-contents.html
new file mode 100644
index 0000000..23c0694
--- /dev/null
+++ b/table-of-contents.html
@@ -0,0 +1,31 @@
+<!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>
+    <style>
+        body{font-family: sans-serif;}
+    </style>
+</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 src="table-of-contents.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/table-of-contents.js b/table-of-contents.js
new file mode 100644
index 0000000..ac7df4b
--- /dev/null
+++ b/table-of-contents.js
@@ -0,0 +1,38 @@
+const toc = document.querySelectorAll("h1, h2, h3");
+        let ul = document.createElement('ul');
+        ul.setAttribute("class", "main");
+        document.querySelector('div').appendChild(ul);
+        let li;
+        let text;
+        let oldLi;
+        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);
+                li = document.createElement('li');
+                text = document.createTextNode(toc[i].textContent);
+                li.appendChild(text);
+                ul.appendChild(li);
+            } else if (toc[i].nodeName == 'H3' && toc[i-1].nodeName == 'H2') {
+                ul = document.createElement('ul');
+                ul.setAttribute("class", "sub2");
+                li.appendChild(ul);
+                li = document.createElement('li');
+                text = document.createTextNode(toc[i].textContent);
+                li.appendChild(text);
+                ul.appendChild(li);
+            } else if (toc[i].nodeName == 'H3' && toc[i-1].nodeName == 'H3') {
+                oldLi = li;
+                li = document.createElement('li');
+                text = document.createTextNode(toc[i].textContent);
+                li.appendChild(text);
+                oldLi.appendChild(li);
+            } else {
+                li = document.createElement('li');
+                text = document.createTextNode(toc[i].textContent);
+                li.appendChild(text);
+                document.querySelector('ul').appendChild(li);
+            }
+            
+        } 
\ No newline at end of file
