diff --git a/.gitignore b/.gitignore
index 32859b6..e69de29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +0,0 @@
-./script.js
-./style.css
\ No newline at end of file
diff --git a/index.html b/index.html
index 61b6e04..6d13f9c 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <title>Todo List</title>
-  <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Todo List</title>
+    <link rel="stylesheet" type="text/css" href="style2.css">
 </head>
+
 <body>
-  <div class="container">
-    <h1>Todo List</h1>
-    <form id="todoForm">
-      <input type="text" id="todoInput" placeholder="Enter a task">
-      <button type="submit">Add</button>
-    </form>
-    <ul id="todoList"></ul>
-  </div>
+    <div class="container">
+        <h1>Todo List</h1>
+        <form id="todoForm">
+            <input type="text" id="todoInput" placeholder="Enter a task">
+            <span onclick="additem()" id="submit" class="add">Add</span>
+        </form>
+        <ul id="todoList">
 
-  <script src="script.js"></script>
+        </ul>
+    </div>
+
+    <script src="script.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..01a13c7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,22 @@
+const input = document.getElementById("todoInput");
+const list = document.getElementById("todoList");
+
+// add new task
+function additem() {
+    if (input.value == "") {
+        alert("please add your tasks")
+    } else {
+        let li = document.createElement("li");
+        li.innerHTML = input.value;
+        list.appendChild(li);
+
+    }
+    input.value = "";
+}
+
+// check the complete task
+list.addEventListener('click', function(ev) {
+    if (ev.target.tagName === 'LI') {
+        ev.target.classList.toggle('checked');
+    }
+}, false);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4520afe
--- /dev/null
+++ b/style.css
@@ -0,0 +1,53 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 50vh;
+    background-color: lightgrey;
+    color: black;
+}
+
+ul li {
+    font-size: 30px;
+    font-weight: 20px;
+    list-style: none;
+    top: 10px;
+    padding: 12px 12px;
+    right: -25px;
+    user-select: none;
+    cursor: pointer;
+    position: relative;
+}
+
+ul li::before {
+    content: '';
+    position: absolute;
+    height: 30px;
+    width: 30px;
+    left: -20px;
+    background-image: url(unchecked.png);
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+}
+
+ul li.checked {
+    text-decoration: line-through;
+}
+
+ul li.checked {
+    content: '';
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    left: -20px;
+    background-image: url(check.png);
+    background-position: center;
+    background-size: cover;
+}
\ No newline at end of file
