Skip to content

Commit 6d2c58c

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1703 from Abhilasha-Sagar/main
[SSoC 2.0] To-Do List
2 parents dd25a6c + ef2a29e commit 6d2c58c

6 files changed

Lines changed: 182 additions & 0 deletions

File tree

‎Projects/To-do list/To-Do-Img/images/checked.png‎

2.34 KB
Loading

‎Projects/To-do list/To-Do-Img/images/icon.png‎

4.26 KB
Loading

‎Projects/To-do list/To-Do-Img/images/unchecked.png‎

2.13 KB
Loading

‎Projects/To-do list/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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="icon" href="./To-Do-Img/images/icon.png" type="image/icon type"/>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="todo-app">
13+
<h2>To-Do List <img src="./To-Do-Img/images/icon.png" alt="to-do list image"/></h2>
14+
<div class="row">
15+
<input type="text" id="input-box" placeholder="Add your text"/>
16+
<button id="btn" onclick="addTask()">Add</button>
17+
</div>
18+
<ul id="list-container">
19+
</ul>
20+
</div>
21+
</div>
22+
<script src="script.js"></script>
23+
</body>
24+
</html>

‎Projects/To-do list/script.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const inputBox=document.getElementById("input-box");
2+
const listContainer=document.getElementById("list-container");
3+
4+
document.addEventListener("keypress",(event)=>{
5+
let key = event.keyCode ? event.keyCode : event.which;
6+
if(key === 13){
7+
addTask();
8+
}
9+
})
10+
11+
function addTask(){
12+
if(inputBox.value === ''){
13+
alert("You must write something!");
14+
}
15+
else{
16+
let li = document.createElement("li");
17+
li.innerHTML = inputBox.value;
18+
listContainer.appendChild(li);
19+
let span = document.createElement("span");
20+
span.innerHTML = "\u00d7";
21+
li.appendChild(span);
22+
}
23+
inputBox.value="";
24+
saveData();
25+
}
26+
27+
listContainer.addEventListener("click",function(e){
28+
if(e.target.tagName === "LI"){
29+
e.target.classList.toggle("checked");
30+
saveData();
31+
}
32+
33+
else if(e.target.tagName === "SPAN"){
34+
e.target.parentElement.remove();
35+
saveData();
36+
}
37+
},false);
38+
39+
function saveData(){
40+
localStorage.setItem("data",listContainer.innerHTML);
41+
}
42+
function showTask(){
43+
listContainer.innerHTML=localStorage.getItem("data");
44+
}
45+
46+
showTask();

‎Projects/To-do list/style.css‎

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

0 commit comments

Comments
 (0)