Skip to content

Commit f60d0b8

Browse files
AkashKobalAkashKobal
committed
to do list
1 parent 8ddf01d commit f60d0b8

File tree

7 files changed

+208
-0
lines changed

7 files changed

+208
-0
lines changed

‎13. To Do List/images/checked.png‎

2.34 KB
Loading

‎13. To Do List/images/icon.png‎

4.26 KB
Loading

‎13. To Do List/images/unchecked.png‎

2.13 KB
Loading

‎13. To Do List/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>To Do List</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script defer src="script.js"></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="todo-app">
13+
<h2>To-Do List</h2> <img class="image" src="images/icon.png" alt="download from github">
14+
<div class="row">
15+
<input type="text" id="inputBox" placeholder="Add your task">
16+
<button onclick="addTask()">Add</button>
17+
</div>
18+
<ul id="list-container">
19+
<!-- <li class="checked">Task 1</li>
20+
<li >Task 1</li>
21+
<li >Task 1</li>
22+
<li >Task 1</li> -->
23+
24+
</ul>
25+
</div>
26+
</div>
27+
</body>
28+
</html>

‎13. To Do List/output.png‎

609 KB
Loading

‎13. To Do List/script.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const inputBox = document.getElementById("inputBox");
2+
const listContainer = document.getElementById("list-container");
3+
4+
function addTask(){
5+
if(inputBox.value === ""){
6+
alert("Your must add some task!");
7+
}
8+
else{
9+
let li = document.createElement("li");
10+
li.innerHTML = inputBox.value;
11+
listContainer.appendChild(li);
12+
13+
// add cross icon to delete the task
14+
let span = document.createElement("span")
15+
span.innerHTML = "\u00d7"; // cross icon
16+
17+
li.appendChild(span);
18+
19+
20+
21+
}
22+
inputBox.value = ""
23+
saveData(); // this function is called when ever we update the task and save the data
24+
}
25+
26+
27+
// check and uncheck the task
28+
29+
listContainer.addEventListener("click",function(e){
30+
if(e.target.tagName === "LI"){
31+
e.target.classList.toggle("checked");
32+
saveData(); // this function is called when ever we update the task and save the data
33+
34+
}
35+
36+
// delete the checked task
37+
else if(e.target.tagName === "SPAN"){
38+
e.target.parentElement.remove();
39+
saveData(); // this function is called when ever we update the task and save the data
40+
41+
42+
}
43+
}, false);
44+
45+
46+
// store the task in our browser so that when ever we open the browser task should be there
47+
function saveData(){
48+
localStorage.setItem("data",listContainer.innerHTML); //(name, data)
49+
}
50+
51+
// display the data when ever we open our website again
52+
function showData(){
53+
listContainer.innerHTML = localStorage.getItem("data");
54+
}
55+
showData();

‎13. To Do List/style.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'poppins', sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
min-height: 100vh;
10+
background:linear-gradient(135deg, #5e86d6, #980ebb);
11+
padding:10px;
12+
}
13+
.todo-app{
14+
width: 100%;
15+
max-width: 540px;
16+
background: #fff;
17+
margin: 100px auto 20px;
18+
padding: 40px 30px 70px;
19+
border-radius: 10px;
20+
display: flex;
21+
flex-direction: column;
22+
23+
}
24+
.todo-app h2{
25+
color: #002765;
26+
display: flex;
27+
align-items: center;
28+
margin-bottom: 20px;
29+
30+
}
31+
32+
.image{
33+
width: 30px;
34+
margin-left: 130px;
35+
margin-bottom: 20px;
36+
margin-top: -50PX;
37+
38+
}
39+
.row{
40+
display: flex;
41+
align-items: center;
42+
justify-content: space-between;
43+
background: #edeff0;
44+
border-radius: 30px;
45+
padding-left: 20px;
46+
margin-bottom: 25px;
47+
}
48+
input{
49+
flex: 1;
50+
border: none;
51+
outline: none;
52+
background: transparent;
53+
padding: 10px;
54+
}
55+
button{
56+
border: none;
57+
outline: none;
58+
padding: 16px 50px;
59+
background:#5e86d6;
60+
color: #fff;
61+
font-size: 16px;
62+
cursor: pointer;
63+
border-radius: 40px;
64+
65+
}
66+
button:hover{
67+
background-color: #002765c2;
68+
}
69+
ul li{
70+
list-style: none;
71+
background: transparent;
72+
padding: 15px 44px;
73+
margin-bottom: 10px;
74+
border-radius: 10px;
75+
display: flex;
76+
align-items: center;
77+
justify-content: space-between;
78+
position: relative;
79+
transition: 0.5s;
80+
cursor: pointer;
81+
82+
}
83+
ul li::before{
84+
content: "";
85+
position: absolute;
86+
height: 28px;
87+
width: 28px;
88+
border-radius: 50%;
89+
background-image: url(images/unchecked.png);
90+
background-size: cover;
91+
background-position: center;
92+
top: 12px;
93+
left: 8px;
94+
95+
}
96+
/* .list-container{
97+
position: absolute;
98+
left: 10px;
99+
margin-left: 50px;
100+
} */
101+
ul li.checked{
102+
color: #555;
103+
text-decoration: line-through;
104+
105+
}
106+
ul li.checked::before{
107+
background-image: url(images/checked.png);
108+
}
109+
ul li span{
110+
position: absolute;
111+
right: 0;
112+
top: 5px;
113+
width: 40px;
114+
height: 40px;
115+
font-size: 22px;
116+
color: #555;
117+
line-height: 40px;
118+
text-align: center;
119+
border-radius: 50%;
120+
121+
}
122+
ul li span:hover{
123+
background-color: #5555553f;
124+
125+
}

0 commit comments

Comments
 (0)