diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c4dbd44
--- /dev/null
+++ b/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Courses</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+</head>
+<body>
+    <header>
+       <nav class="navbar navbar-expand-lg bg-primary navbar-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">Navbar</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+                <a class="nav-link active" aria-current="page" href="#">Home</a>
+                <a class="nav-link" href="#">Features</a>
+                <a class="nav-link" href="#">Pricing</a>
+                <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+            </div>
+            </div>
+        </div>
+        </nav>
+    </header>
+    <div class="container mt-5 col-6">
+        <div class="input-group mb-4">
+            <input type="text" id="inputtext"class="form-control" placeholder="Chapter Name" aria-label="Recipient's username" aria-describedby="button-addon2">
+            <button class="btn btn-outline-success" type="button" id="add" id="button-addon2">Add</button>
+        </div>
+        <ul class="list-group" id="parentlist" >
+            
+            <li class="list-group-item d-flex justify-content-between my-2" id="list"><h4 class="flex-grow-1">Chapter1 </h4>
+                <button class="btn btn-warning mx-5" onclick="editchapter(this)" >Edit</button>
+                <button class="btn btn-danger  " onclick="removechapter(this)">Remove</button></li>
+          </ul>
+    </div>
+    <script>
+        // to add an element into list
+        let addBtn=document.getElementById("add");
+        addBtn.addEventListener('click',addchapter);
+        let parentlist=document.getElementById('parentlist');
+        function addchapter(e)
+        {
+            //to remove the empty message if there is
+            //to  get the entered input
+            let currentInput=document.getElementById('inputtext');
+            if(currentInput.value=='')
+            {
+                alert('you have not entered the task');//empty task cannot be inserted
+            }
+            // console.log(currentInput.value);
+            //to create the li element
+            else{
+                if(parentlist.children[0].className=="emptyMsg alert alert-danger")
+                {
+                    parentlist.children[0].remove();
+                }
+                let newli=document.createElement('li');
+            // newli.classList.add("list-group-item");
+            newli.className="list-group-item d-flex justify-content-between my-2";
+            newli.id='list';
+            //adding text to li element
+            newli.innerHTML=`<h4 class="flex-grow-1">${currentInput.value} </h4>
+                <button class="btn btn-warning mx-5" onclick="editchapter(this)" >Edit</button>
+                <button class="btn btn-danger " onclick="removechapter(this)" >Remove</button>`;
+            //to append the created element into ul
+            parentlist.appendChild(newli);
+            currentInput.value='';//cleraing the input field
+            }
+        }
+        //to remove the element
+       function removechapter(currentElement)
+       {
+            currentElement.parentElement.remove();//removing the parent element
+            if(parentlist.children.length<=0)
+            {
+                let newmsg=document.createElement('h4');
+                newmsg.textContent="Nothing is here please add a chapter! "// to give message if there are no element
+                parentlist.appendChild(newmsg);//append message to parent
+                newmsg.className='emptyMsg alert alert-danger';//styling
+            }
+       }
+       //to edit the element
+       function editchapter(currentElement)
+       {
+            if(currentElement.textContent=='Done')
+            {
+                currentElement.textContent='Edit';
+                currentChapter=currentElement.previousElementSibling.value;
+                let currentheading=document.createElement('h4');
+                currentheading.textContent= currentChapter;
+                currentheading.className='flex-grow-1';
+                currentElement.parentElement.replaceChild( currentheading,currentElement.previousElementSibling);
+            }
+            else{
+            currentElement.textContent='Done';
+            currentChapter=currentElement.previousElementSibling.textContent;
+            let currentInput=document.createElement('input');
+            currentInput.value= currentChapter;
+            currentInput.placeholder="Chapter Name"
+            currentInput.className="form-control";
+            currentElement.parentElement.replaceChild(currentInput,currentElement.previousElementSibling);
+            }
+            
+       }
+    </script>
+</body>
+</html>
\ No newline at end of file
