diff --git a/todoslist project/todoslist project/index.html b/todoslist project/todoslist project/index.html
new file mode 100644
index 0000000..227742d
--- /dev/null
+++ b/todoslist project/todoslist project/index.html	
@@ -0,0 +1,32 @@
+
+<!DOCTYPE HTML>
+<html>
+    
+    <head>
+        <title>To-Do's List</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    
+    <body>
+        <div class="container">
+            <h1>To-do list</h1>
+            
+            <div class="add-elements">
+                <input id="add" type="text" placeholder="add an element">
+                <button id="btn">Add</button>
+            </div>
+            
+            <div class="element-list">
+                <ul id="list">
+                    <li>add some work</li>
+                    <li>add some work</li>
+                </ul>
+            </div>
+            
+        </div>
+        
+        <script src="script.js"></script>
+    </body>
+    
+</html>
diff --git a/todoslist project/todoslist project/script.js b/todoslist project/todoslist project/script.js
new file mode 100644
index 0000000..1b88320
--- /dev/null
+++ b/todoslist project/todoslist project/script.js	
@@ -0,0 +1,26 @@
+
+const input = document.querySelector("#add");
+const  btn = document.querySelector("#btn");
+const list = document.querySelector("#list");
+var el = document.getElementsByTagName('li');
+
+btn.onclick = function(){
+    
+    var txt = input.value;
+    if(txt ==''){
+        alert('you must write something');
+    }else{
+        li = document.createElement('li');
+    li.innerHTML = txt;
+    list.insertBefore(li,list.childNodes[0]);
+    input.value = '';
+    }
+    
+};
+
+
+list.onclick = function(ev){
+    if(ev.target.tagName == 'LI'){
+         ev.target.classList.toggle('checked');
+    }
+};
diff --git a/todoslist project/todoslist project/style.css b/todoslist project/todoslist project/style.css
new file mode 100644
index 0000000..b9b25f1
--- /dev/null
+++ b/todoslist project/todoslist project/style.css	
@@ -0,0 +1,75 @@
+
+@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    outline: 0;
+}
+body
+{
+    background: #f6d365
+}
+
+.container
+{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    background-color: #fafafa;
+    box-shadow: 0 2px 8px rgba(0,0,0,.16);
+    width: 460px;
+    height: 680px;
+    text-align: center;
+    font-family: 'Nunito',sans-serif;
+   
+}
+h1
+{
+    margin: 12px 0;
+}
+.add-elements{
+    margin: 12px 0;
+    
+}
+input{
+    padding: 6px 4px;
+    width: 70%;
+}
+button{
+    padding: 7px 14px;
+    background-color: #00b0ff;
+    border: none;
+    border-radius: 4px;
+    color: #fafafa;
+
+}
+.element-list{
+    height: 550px;
+    overflow-y: scroll
+}
+ul{
+    padding: 15px;
+   
+}
+li{
+    list-style: none;
+    padding: 10px 5px;
+    background-color: #fff;
+    margin: 12px 0;
+    box-shadow: 0 2px 8px rgba(0,0,0,.16);
+    border-radius: 3px;
+    transition: .4s;
+}
+button:hover{
+    background-color: #1565c0;
+}
+
+li:hover{
+    background-color: #e0e0e0;
+}
+
+.checked{
+    text-decoration: line-through;
+    background-color: #e0e0e0;
+}
