Skip to content

Commit e2e248d

Browse files
LazycoderAayuLazycoderAayu
authored
Merge pull request #1 from LazycoderAayu/files-upload
Add files via upload
2 parents c48b3a6 + 106c881 commit e2e248d

File tree

6 files changed

+166
-0
lines changed

6 files changed

+166
-0
lines changed

‎checked.png‎

30.2 KB
Loading

‎index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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 App</title>
7+
<link rel="stylesheet" href="style.css">
8+
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="todo-app">
13+
<h2>To-Do List <img src="todo.png"></h2>
14+
<div class="row">
15+
<input type="text" id="input-box" placeholder="Add a new task">
16+
<button onclick="addTask()">Add</button>
17+
</div>
18+
<ul id="list-Container">
19+
<!-- <li class="checked">Task 1</li>
20+
<li>Task 2</li>
21+
<li>Task 3</li> -->
22+
</ul>
23+
</div>
24+
25+
</div>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎script.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const inputBox = document.getElementById("input-box");
2+
const listContainer = document.getElementById("list-Container");
3+
4+
function addTask(){
5+
if(inputBox.value === ''){
6+
alert("Please enter a task");
7+
}
8+
else{
9+
let li = document.createElement("li");
10+
li.innerHTML = inputBox.value;
11+
listContainer.appendChild(li);
12+
let span = document.createElement("span");
13+
span.innerHTML = "\u00D7";
14+
li.appendChild(span);
15+
}
16+
inputBox.value = '';
17+
saveData()
18+
}
19+
20+
listContainer.addEventListener('click', function(e){
21+
if(e.target.tagName === 'LI'){
22+
e.target.classList.toggle('checked');
23+
saveData()
24+
}
25+
else if(e.target.tagName === 'SPAN'){
26+
e.target.parentElement.remove();
27+
saveData()
28+
}
29+
}, false);
30+
31+
function saveData(){
32+
localStorage.setItem('data', listContainer.innerHTML);
33+
}
34+
function showTask(){
35+
listContainer.innerHTML = localStorage.getItem('data');
36+
}
37+
showTask();

‎style.css‎

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

‎todo.png‎

37.6 KB
Loading

‎unchecked.png‎

101 KB
Loading

0 commit comments

Comments
 (0)