Skip to content

Commit cf696a4

Browse files
mayankrawat99mayankrawat99
authored
Merge pull request #1 from mayankrawat99/mayankrawat99-patch-1
Add Simple Todo List with Local Storage Support
2 parents ff1cc91 + b8b50b2 commit cf696a4

File tree

3 files changed

+195
-0
lines changed

3 files changed

+195
-0
lines changed

‎to-do-app/style.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
2+
*{
3+
font-family: poppins;
4+
margin: 0;
5+
padding: 0;
6+
}body {
7+
margin: 0;
8+
padding: 0;
9+
height: 100vh;
10+
background: #7BD3EA; /* Light gray background */
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
font-family: 'Poppins', sans-serif;
15+
color: #174d4d; /* Dark text color */
16+
}
17+
18+
.container {
19+
background-color: #f5f5dc;
20+
border-radius: 12px;
21+
padding: 4%;
22+
box-shadow: 6px 7px 9px 0px #496b5f, inset 3px 3px 9px 3px #d5c9c9e6;
23+
24+
position: absolute;
25+
top:10%
26+
27+
}
28+
h1{text-align: center;}
29+
.spa{
30+
display: grid;
31+
grid-template-columns:315px 98px 73px;
32+
justify-content: space-around;
33+
gap: 10px;
34+
row-gap: 10px;
35+
margin: 10px 0;
36+
text-overflow: ellipsis;
37+
38+
}
39+
.todocontent button{
40+
color: #ffffc7;
41+
background: #f76565;
42+
border:none;
43+
font-size: 12px;
44+
border-radius: 20px;
45+
cursor: pointer;
46+
box-shadow: 3px 3px 6px #496b5f,
47+
-3px -3px 6px #ffffff;
48+
height: 30px;
49+
50+
}
51+
#addbtn{
52+
color: #ffffc7;
53+
background: #67dc92;
54+
border: none;
55+
border-radius: 14px;
56+
padding: 6px 10px;
57+
box-shadow: 3px 3px 6px #496b5f,
58+
-3px -3px 6px #fdfdeedc;
59+
cursor: pointer;
60+
}
61+
62+
.todocontent{
63+
padding:2px ;
64+
font-size: 14px;
65+
66+
67+
}
68+
input[type="text"]{
69+
color: #174d4d;
70+
outline: none;
71+
border-radius: 14px;
72+
border: none;
73+
padding: 0 12px;
74+
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.307);
75+
}
76+
input[type="date"]{
77+
padding: 0 10px;
78+
color: #174d4d;
79+
outline: none;
80+
border-radius: 14px;
81+
border:none;
82+
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.307);
83+
84+
85+
}
86+
span {
87+
overflow-x: clip;
88+
text-overflow: ellipsis;
89+
}
90+
91+
@media ( width <= 575px) {
92+
.spa{
93+
display: grid;
94+
grid-template-columns: 200px 100px;
95+
grid-template-rows: auto;
96+
97+
}
98+
99+
100+
101+
}
102+
@media ( width <= 375px) {
103+
.spa{
104+
display: grid;
105+
grid-template-columns: 200px ;
106+
107+
align-items: stretch;
108+
}
109+
button{
110+
width: 100px;
111+
margin:6px 0 0 50px;
112+
}
113+
114+
}
115+

‎to-do-app/todo.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
5+
rel="stylesheet">
6+
<link rel="stylesheet" href="style.css">
7+
<meta charset="UTF-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>Document</title>
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
<h1>Todo List</h1>
15+
<div class="spa gap">
16+
<input id="todo" type="text" placeholder="Enter todo here....">
17+
<input type="date" id="datelist">
18+
<button id="addbtn" onclick="addtodo()">Add</button></div>
19+
<div class="todocontent"></div>
20+
</div>
21+
<script src="todo.js"></script>
22+
</body>
23+
</html>

‎to-do-app/todo.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
let todolist=[{ item: "Sample Item", duedate: "2023-07-07" },{ item: "Sample Item", duedate: "2023-07-07" }]
3+
4+
5+
window.onload = function(){
6+
7+
let storeddata =localStorage.getItem("data");
8+
if (storeddata) {
9+
todolist = JSON.parse(storeddata);
10+
displayitem();}
11+
}
12+
function addtodo(){
13+
let toditem= document.getElementById("todo")
14+
let itemdate= document.getElementById("datelist")
15+
let date = itemdate.value
16+
let tod = toditem.value
17+
18+
if(tod!=""){
19+
todolist.push({item:tod,duedate:date});}
20+
21+
else{
22+
alert("Add some item")
23+
}
24+
toditem.value =""
25+
savetolocalstorage();
26+
displayitem();
27+
}
28+
29+
function savetolocalstorage() {
30+
localStorage.setItem("data",JSON.stringify(todolist))
31+
}
32+
33+
34+
function displayitem(){
35+
36+
37+
let cont = document.querySelector(".todocontent")
38+
date=""
39+
40+
cont.innerHTML=""
41+
for (let i = 0; i <todolist.length; i++) {
42+
let newItem = document.createElement("div");
43+
newItem.className ="spa"
44+
let{duedate,item} = todolist[i]
45+
newItem.innerHTML = `<span>${item}</span> <span>${duedate}</span> <button onclick="deleteitem(${i})">Delete</button>`;
46+
cont.appendChild(newItem);
47+
48+
49+
50+
51+
}}
52+
function deleteitem(i) {
53+
todolist.splice(i,1)
54+
savetolocalstorage()
55+
displayitem()
56+
}
57+

0 commit comments

Comments
 (0)