From c88d3c4f0ac7d02aa8014b4a58d0b625f4776585 Mon Sep 17 00:00:00 2001 From: divyank12singh Date: Tue, 14 Dec 2021 22:50:50 +0530 Subject: [PATCH] Todo_list_with_actual_api_submission --- assignments/todo_list/script.js | 32 ++++++++++++++++ assignments/todo_list/style_sheet.css | 54 +++++++++++++++++++++++++++ assignments/todo_list/todo.html | 11 ++++-- 3 files changed, 94 insertions(+), 3 deletions(-) create mode 100644 assignments/todo_list/style_sheet.css 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 IDTASK` +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 IDTASK` + 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

+ + +
+
- \ No newline at end of file + + \ No newline at end of file