diff --git a/assignments/todo_list/script.js b/assignments/todo_list/script.js
index e69de29..4eff483 100644
--- a/assignments/todo_list/script.js
+++ b/assignments/todo_list/script.js
@@ -0,0 +1,32 @@
+const completed_task=document.querySelectorAll('button')[0]
+const pending_task=document.querySelectorAll('button')[1]
+
+function completed_work(){
+fetch("https://jsonplaceholder.typicode.com/todos")
+.then(Response=>Response.json())
+.then(json =>{
+let li=`| ITEM ID | TASK |
|---|
`
+json.forEach(todo => {
+ if (todo.completed==true){
+ li+=`| ${todo.id} | ${todo.title} |
`
+ }
+});
+document.getElementById("table1").innerHTML = li;
+})
+}
+
+function pending_work(){
+ fetch("https://jsonplaceholder.typicode.com/todos")
+ .then(Response=>Response.json())
+ .then(json =>{
+ let li=`| ITEM ID | TASK |
|---|
`
+ json.forEach(todo => {
+ if (todo.completed==false){
+ li+=`| ${todo.id} | ${todo.title} |
`
+ }
+ });
+ document.getElementById("table2").innerHTML = li;
+ })
+}
+completed_task.addEventListener("click",completed_work)
+pending_task.addEventListener("click",pending_work)
\ No newline at end of file
diff --git a/assignments/todo_list/style_sheet.css b/assignments/todo_list/style_sheet.css
new file mode 100644
index 0000000..b9e11ac
--- /dev/null
+++ b/assignments/todo_list/style_sheet.css
@@ -0,0 +1,54 @@
+h1 {
+ width: 30% ;
+ height: 50px;
+ margin: 50px 0px 50px 450px;
+ padding: 15px;
+ background-color: rgb(165, 103, 103);
+ color: white;
+ text-align: center;
+ border-radius: 15px;
+}
+
+button:hover {
+ color: black;
+}
+
+td:hover{
+ color: black;
+}
+
+button {
+ display: inline-block;
+ width: 30%;
+ height: 60px;
+ margin: 10px 100px 10px 100px ;
+ padding: 10px;
+ background-color: rgb(165, 103, 103);
+ color: white;
+ text-align: center;
+ border-radius: 15px;
+ font-size: 30px;
+
+}
+
+table {
+ display: inline-block;
+ background-color: rgb(165, 103, 103);
+ color: white;
+ border: 8px solid white;
+ border-radius: 8px;
+ margin: 5px;
+ padding: 10px;
+ vertical-align: top;
+}
+
+td {
+ font-size: 20px;
+ padding: 5px;
+ text-align: left;
+}
+
+th {
+ font-size: 25px;
+}
+
diff --git a/assignments/todo_list/todo.html b/assignments/todo_list/todo.html
index 8f6fac5..6341089 100644
--- a/assignments/todo_list/todo.html
+++ b/assignments/todo_list/todo.html
@@ -1,13 +1,18 @@
Todo List
+
-
-
+
TODO LIST
+
+
+
+