Skip to content

Commit 5f3d087

Browse files
gulshanSharma11gulshanSharma11
committed
Added all JS projects
1 parent 9eca383 commit 5f3d087

6 files changed

Lines changed: 180 additions & 0 deletions

File tree

‎todo-List/images/checked.png‎

2.34 KB
Loading

‎todo-List/images/icon.png‎

4.26 KB
Loading

‎todo-List/images/unchecked.png‎

2.13 KB
Loading

‎todo-List/index.html‎

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

‎todo-List/script.js‎

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

‎todo-List/style.css‎

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

0 commit comments

Comments
 (0)