Skip to content

Commit 3c7f0f8

Browse files
VaibhavSuryavanshi93VaibhavSuryavanshi93
committed
adding to-do project
1 parent ccabab6 commit 3c7f0f8

File tree

9 files changed

+218
-0
lines changed

9 files changed

+218
-0
lines changed

‎Index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,3 +148,6 @@
148148
|[Interactive Pricing Component](https://github.com/Ahsan-Ehtesham/Web-dev-mini-projects/tree/ahsan/Interactive%20Pricing%20Component)| Interactive Pricing Component using HTML, CSS and JS
149149
|[Typing champ](https://github.com/FaizaAbdullah-code/Web-dev-mini-projects/tree/faiza/Typing-champ)| One page website for speed checking using HTML, CSS and JS.
150150
|[Height Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Height%20Converter)|Webpage used to converting one form of height to other.
151+
|[Animated-rainbow](https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects/tree/main/Animated-rainbow) | it is a animated rainbow .
152+
153+
|[To-do](https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects/tree/main/To-do) it's a to-do web.

‎To-do/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# To-do
2+
A to-do list is a concise tool for organizing tasks, prioritizing work, and boosting productivity by providing a clear roadmap for completing activities.
3+
4+
### Use of the Project:
5+
A to-do project succinctly organizes tasks, streamlining prioritization and workflow for efficient project management.
6+
7+
### Used Technologies
8+
* HTML5
9+
* CSS3
10+
* JavaScript
11+
12+
13+
#### Steps to Use:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/VaibhavSuryavanshi93/To-do
21+
```
22+
23+
- Go to the directory
24+
- Run the to-do file
25+
- Start Doing..!!
26+
---
27+
28+
## Screenshots
29+
![to-do](to-do.png)
30+

‎To-do/checked.png

22.3 KB
Loading

‎To-do/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>Document</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="todo.png" alt=""></h2>
13+
<div class="row">
14+
<input type="text" id="input-box" placeholder="Please add your text here..">
15+
<button onclick="addTask()" class="add">Add</button>
16+
</div>
17+
<ul id="list-container">
18+
</ul>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
23+
</body>
24+
</html>

‎To-do/script.js

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

‎To-do/style.css

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

‎To-do/to-do.png

197 KB
Loading

‎To-do/todo.png

239 KB
Loading

‎To-do/uncheck.png

2.38 KB
Loading

0 commit comments

Comments
 (0)