diff --git a/Table_of_contents.html b/Table_of_contents.html
new file mode 100644
index 0000000..4c8b218
--- /dev/null
+++ b/Table_of_contents.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.css b/about.css
new file mode 100644
index 0000000..e4e5a88
--- /dev/null
+++ b/about.css
@@ -0,0 +1,5 @@
+
+
+h1 {
+    color:red;
+}
\ No newline at end of file
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..ef990fc
--- /dev/null
+++ b/about.html
@@ -0,0 +1,28 @@
+<!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="about.css">
+    <title>About me</title>
+    <script src="main.js"></script>
+</head>
+<body id="abc">
+<h1> About Me</h1>
+<div>
+    <button onclick="change_font()">Change font</button>
+    <button onclick="show_hide()">Hide image</button>
+    <button onclick="change_color()">Change color</button>
+    </div><br>
+<img src="img.jpg" alt="My picture" id="image" width="400px" height="250px">
+ <span>  
+<ul id="list">
+        <li id="a">Nickname: Nomi </li>
+        <li id="b">Favorites: Movies, coding, traveling</li>
+        <li id="c">Hometown: Bear </li>
+        <li id="d">Random Fact: Always keen to learn something new.</li>
+    </ul>
+</span> 
+
+</body>
+</html>
\ No newline at end of file
diff --git a/dom.css b/dom.css
new file mode 100644
index 0000000..6ad763f
--- /dev/null
+++ b/dom.css
@@ -0,0 +1,5 @@
+button{
+
+    padding: 10px;
+    font-weight: bold;
+}
diff --git a/dom.js b/dom.js
new file mode 100644
index 0000000..d289829
--- /dev/null
+++ b/dom.js
@@ -0,0 +1,56 @@
+function addText(){
+document.getElementById("para1").textContent="We are Coders!";
+}
+
+function changeText(){
+    document.getElementById("para1").innerText="Developers for life!"
+   
+}
+
+function addImg(){
+    let image = new Image();
+    image.src="img1.jpg";
+    document.getElementById("para2").appendChild(image);
+}
+/*function addImg(){
+    let x = document.createElement("img");
+    x.setAttribute("src","img1.jpg");
+    document.body.appendChild(x);
+
+}*/
+
+function changeColor(){
+    document.getElementById("para1").style.color="Blue";
+}
+
+function changeFont(){
+    document.getElementById("para1").style.fontSize="40px";
+}
+
+function hideImage(){
+    document.getElementById("para2").textContent="";
+}
+
+
+
+
+/*var a;
+function show_hide() 
+{
+if (a===1)
+    {
+    document.getElementById("image").style.display="inline";
+    return a=0;
+    }
+        else
+        {
+        document.getElementById("image").style.display="none";
+        return a=1;
+        }
+
+}
+*/
+
+
+
+
diff --git a/js-dom.html b/js-dom.html
new file mode 100644
index 0000000..1b1ff71
--- /dev/null
+++ b/js-dom.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>DOM Lab</title>
+        <link rel="stylesheet" href="dom.css">
+    </head>
+<body>
+<p id="para1"> </p>
+
+<button type="button" onclick="addText()">Add Text</button>
+<button type="button" onclick="changeText()">Change Text</button>
+<button type="button" onclick="addImg()">Add Image</button>
+<button type="button" onclick="changeColor()">Change Color</button>
+<button type="button" onclick="changeFont()">Change Font</button>
+<button type="button" onclick="hideImage()">Hide Image</button>
+
+<p id="para2"></p>
+
+
+<!--<img id="image" src="img1.jpg" alt="Coding image" width="300" height="225">-->
+
+
+
+<!--<div>
+    <button onclick="show_hide()">Click to show and hide image</button>
+</div>
+-->
+
+<!--
+<p id="img"></p>
+<script>
+function hide_image() {
+    let x = document.images[0].src;
+    document.getElementById("img").innerHTML=x;
+
+   var image = document.getElementById("myImg").src;
+  document.getElementById("dummy").innerHTML = image;
+}
+<button type="button">Click Me if you want to hide the image!</button>
+
+</script>
+-->
+<script src="dom.js"></script>
+</body>
+
+</html>
