diff --git a/JavaScript/todolist/index.html b/JavaScript/todolist/index.html
new file mode 100644
index 00000000..0d989250
--- /dev/null
+++ b/JavaScript/todolist/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
diff --git a/JavaScript/todolist/index.js b/JavaScript/todolist/index.js
new file mode 100644
index 00000000..487802d2
--- /dev/null
+++ b/JavaScript/todolist/index.js
@@ -0,0 +1,36 @@
+
+var completetaskholder=document.getElementById('completed-tasks');
+function newtask(){
+ var inputValue = document.getElementById("task").value;
+ var li = document.createElement("li");
+ var t = document.createTextNode(inputValue);
+ li.appendChild(t);
+ if (inputValue === '') {
+ alert("You must write something!");
+ return;
+ } else {
+ console.log(inputValue);
+ }
+ document.getElementById("task").value = "";
+
+
+ var checkBox=document.createElement("input")
+ checkBox.type="checkbox";
+ checkBox.classList='checked';
+ checkBox.onclick= completeItem;
+ li.appendChild(checkBox);
+ var prtask=document.getElementById('myUL')
+ prtask.append(li);
+ li.onclick = removeItem;
+
+}
+function removeItem(e) {
+ e.target.remove();
+ }
+
+
+ function completeItem(e){
+ var listItem=this.parentNode;
+completetaskholder.appendChild(listItem);
+console.log(completetaskholder)
+ }
\ No newline at end of file
diff --git a/JavaScript/todolist/style.css b/JavaScript/todolist/style.css
new file mode 100644
index 00000000..6da947e9
--- /dev/null
+++ b/JavaScript/todolist/style.css
@@ -0,0 +1,98 @@
+*{
+ padding: 0px;
+ box-sizing: border-box;
+ }
+
+body{
+ background: -webkit-linear-gradient(left, #25c481, #25b7c4);
+ background: linear-gradient(to right, #25c481, #25b7c4);
+ font-family: 'Roboto', sans-serif;
+}
+.header{
+ margin:auto;
+ width:500px;
+
+height:fit-content;
+
+ margin-top: 20px;
+}
+
+.todo
+{
+ font-family: Helvetica;
+ color: white;
+}
+
+.addBtn:hover {
+ background: brown;
+ color: white;
+ }
+
+
+
+
+h2,h4{
+ text-align: center;
+}
+.list{
+margin: auto;
+width: fit-content;
+}
+
+.list input{
+
+ padding: 10px;
+ width:300px;
+ margin-top:20px;
+ font-family: 'Times New Roman', Times, serif;
+ border-radius: 4px;
+ border: 1px solid black;
+}
+
+.list button{
+ padding: 10px;
+ width:100px;
+ cursor: pointer;
+ margin-top:20px;
+ font-family: 'Times New Roman', Times, serif;
+ background-color: #B404AE;
+ border: none;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Style the list items */
+ ul li {
+ cursor: pointer;
+ position: relative;
+ margin: 10px;
+ padding: 12px 8px 12px 40px;
+ list-style-type: upper-roman;
+ background: #eee;
+ font-size: 18px;
+ transition: 0.2s;
+
+
+ }
+ li > input[type="checkbox"] {
+ margin: 0 10px;
+ position: relative;
+ float: left;
+ top:5px;
+ }
+
+
+ #completed-tasks li{
+ background-color: greenyellow;
+ }
+
+ h3{
+ margin-top: 30px;
+ }
+
+ hr{
+ margin: 20px;
+ }