Skip to content

Commit 1a7b514

Browse files
PBJIPBJI
authored
Merge pull request #912 from harshalhonde21/master
Added the todo and todo folder a dynamic todo app with best UI and dyanamic project
2 parents 610c542 + 1368b5f commit 1a7b514

File tree

4 files changed

+334
-0
lines changed

4 files changed

+334
-0
lines changed

‎ToDoList/harshalhonde21/To-Do/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# To-Do
2+
3+
"To-Do" is a web-based project that offers users the ability to create, manage, and organize their tasks and to-do lists. "To-Do" help users to stay organized and productive.
4+
5+
![Screenshot (86)](https://github.com/Infinite-Null/Javascript-projects/assets/97950192/efef1e04-0cdc-4898-91af-b9f4803c3118)
6+
![Screenshot (87)](https://github.com/Infinite-Null/Javascript-projects/assets/97950192/6d50d1ab-305d-44c6-9161-58295cf8d9ff)
7+
![Screenshot (88)](https://github.com/Infinite-Null/Javascript-projects/assets/97950192/28ccc9ce-0a33-4aac-a5e4-70e6d9d92a43)
8+
9+
10+
## Instruction
11+
12+
1. **Add Todo**: By tapping on add todo button a popup will appear by which you will be able to create new todo
13+
14+
2. **Delete Todo**: By tapping on cross icon on right side of every todo you will be able to delete the todo.
15+
16+
## Technologies Used
17+
18+
This project was built using HTML, CSS, and JavaScript.
19+
20+
## Installation
21+
22+
You don't need to install anything to use this To-Do. Just open the HTML file in your web browser, and you're good to go!
23+
24+
## Getting Started
25+
26+
1. Download index.html, style.css and script.js.
27+
2. Open the "index.html" file in your web browser.
28+
3. Start managing your todo.
29+
30+
## Contributions
31+
32+
- 1. [[Infinite-Null](https://github.com/Infinite-Null)]
33+
If you'd like to contribute to this todo project or suggest improvements, please feel free to open an issue or create a pull request on the GitHub repository.
34+

‎ToDoList/harshalhonde21/To-Do/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="style.css" />
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Todo</title>
8+
</head>
9+
<body>
10+
<div class="popupbackground noneDisplay">
11+
<div class="popup">
12+
<h1 class="popupheading">Enter your <br/><span class="popupheading2">Todo...</span></h1>
13+
<input class="popupinput"/>
14+
<div class="buttonContainer"><button class="cancelbutton" onclick="removePopup()">Cancel</button><button class="createbutton" onclick="addTodo()">Add</button></div>
15+
</div>
16+
</div>
17+
<p class="heading">List of things <br/><span class="heading2">Todo...</span></p>
18+
<div class="EachTodo">Watch Anime<button class="deletebutton">X</button></div>
19+
<button class="addbutton" onclick="displayPopup()">Add Todo</button>
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎ToDoList/harshalhonde21/To-Do/script.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const popup = document.getElementsByClassName("popupbackground");
2+
const input = document.getElementsByClassName("popupinput");
3+
const mainBody = document.getElementsByTagName("body");
4+
5+
// Load existing todos from local storage on page load
6+
document.addEventListener("DOMContentLoaded", function () {
7+
loadTodos();
8+
});
9+
10+
function displayPopup() {
11+
popup[0].classList.remove("noneDisplay");
12+
}
13+
14+
function removePopup() {
15+
popup[0].classList.add("noneDisplay");
16+
}
17+
18+
function addTodo() {
19+
if (input[0].value === "") {
20+
alert("Please enter something");
21+
} else {
22+
const todoText = input[0].value;
23+
const uniqueId = Date.now(); // Generate a unique ID
24+
const todoItem = { id: uniqueId, text: todoText };
25+
addTodoToLocalStorage(todoItem); // Add to local storage
26+
createTodoElement(todoItem); // Create a new todo element on the page
27+
input[0].value = "";
28+
removePopup();
29+
}
30+
}
31+
32+
mainBody[0].addEventListener("click", function (e) {
33+
if (e.target.classList.value === "deletebutton") {
34+
const todoDiv = e.target.parentElement;
35+
const todoId = todoDiv.dataset.id; // Get the unique ID from the data attribute
36+
removeTodoFromLocalStorage(todoId); // Remove from local storage
37+
todoDiv.remove();
38+
}
39+
});
40+
41+
function addTodoToLocalStorage(todoItem) {
42+
let todos = getTodosFromLocalStorage();
43+
todos.push(todoItem);
44+
localStorage.setItem("todos", JSON.stringify(todos));
45+
}
46+
47+
function removeTodoFromLocalStorage(todoId) {
48+
let todos = getTodosFromLocalStorage();
49+
todos = todos.filter((todo) => todo.id !== parseInt(todoId)); // Convert to integer for comparison
50+
localStorage.setItem("todos", JSON.stringify(todos));
51+
}
52+
53+
function loadTodos() {
54+
const todos = getTodosFromLocalStorage();
55+
todos.forEach((todoItem) => {
56+
createTodoElement(todoItem);
57+
});
58+
}
59+
60+
function getTodosFromLocalStorage() {
61+
const todosJSON = localStorage.getItem("todos");
62+
return todosJSON ? JSON.parse(todosJSON) : [];
63+
}
64+
65+
function createTodoElement(todoItem) {
66+
const div = document.createElement("div");
67+
const button = document.createElement("button");
68+
button.classList.add("deletebutton");
69+
button.innerHTML = "X";
70+
div.classList.add("EachTodo");
71+
div.dataset.id = todoItem.id; // Set the unique ID as a data attribute
72+
div.innerHTML = todoItem.text;
73+
div.appendChild(button);
74+
mainBody[0].appendChild(div);
75+
}

‎ToDoList/harshalhonde21/To-Do/style.css‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
body{
2+
background-color: rgb(242, 242, 242);
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
color: rgb(0, 0, 0);
7+
}
8+
.popupbackground{
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
z-index: 100;
13+
position: absolute;
14+
background-color: #d5a5a590;
15+
height: 100vh;
16+
width: 100vw;
17+
backdrop-filter: blur(5px);
18+
}
19+
.popup{
20+
padding: 20px;
21+
height: 300px;
22+
min-width: 300px;
23+
width: 50vw;
24+
max-width: 700px;
25+
background-color: rgb(255, 255, 255);
26+
border-radius: 10px;
27+
}
28+
.popupheading{
29+
margin: 0px;
30+
font-size: 40px;
31+
font-weight: 700;
32+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
33+
}
34+
.popupheading2{
35+
color: rgb(233, 183, 113);
36+
font-size: 80px;
37+
font-weight: 100;
38+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
39+
}
40+
.popupinput{
41+
padding: 10px;
42+
font-size: 30px;
43+
width: 90%;
44+
margin: 5px;
45+
border-radius: 10px;
46+
border: 3px solid rgb(87, 87, 87);
47+
}
48+
.createbutton{
49+
margin-top: 20px;
50+
border-radius: 10px;
51+
font-size: 16px;
52+
color: #ffffff;
53+
font-weight: 200;
54+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
55+
background-color: rgb(37, 101, 184);
56+
height: 60px;
57+
width: 150px;
58+
outline: none;
59+
border: 0px solid transparent;
60+
transition: 0.5s;
61+
}
62+
.buttonContainer{
63+
display: flex;
64+
justify-content: space-around;
65+
}
66+
.cancelbutton{
67+
margin-top: 20px;
68+
border-radius: 10px;
69+
font-size: 16px;
70+
color: #ffffff;
71+
font-weight: 200;
72+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
73+
background-color: rgb(254, 117, 107);
74+
height: 60px;
75+
width: 150px;
76+
outline: none;
77+
border: 0px solid transparent;
78+
transition: 0.5s;
79+
}
80+
.cancelbutton:hover{
81+
color: #ffffff;
82+
scale: 1.1;
83+
transition: 0.5s;
84+
}
85+
.createbutton:hover{
86+
color: #ffffff;
87+
scale: 1.1;
88+
transition: 0.5s;
89+
}
90+
.noneDisplay{
91+
display: none;
92+
}
93+
.heading{
94+
margin: 0px;
95+
font-size: 100px;
96+
font-weight: 700;
97+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
98+
}
99+
.heading2{
100+
color: rgb(233, 183, 113);
101+
font-size: 200px;
102+
font-weight: 100;
103+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
104+
}
105+
.addbutton{
106+
border-radius: 10px;
107+
font-size: 16px;
108+
color: #ffffff;
109+
font-weight: 200;
110+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
111+
background-color: rgb(95, 123, 163);
112+
position: fixed;
113+
bottom: -10px;
114+
right: 0;
115+
height: 70px;
116+
width: 150px;
117+
outline: none;
118+
margin: 30px;
119+
border: 0px solid transparent;
120+
box-shadow:0px 0px 30px 2px rgba(0, 0, 0, 0.518);
121+
transition: 0.5s;
122+
}
123+
.addbutton:hover{
124+
color: #000;
125+
background-color: aliceblue;
126+
scale: 1.1;
127+
transition: 0.5s;
128+
}
129+
::-webkit-scrollbar-track
130+
{
131+
-webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 0.3);
132+
background-color: #f4f4f4;
133+
}
134+
::-webkit-scrollbar
135+
{
136+
width: 2px;
137+
background-color: #F5F5F5;
138+
}
139+
140+
::-webkit-scrollbar-thumb
141+
{
142+
background-color: #000000;
143+
border: 0px solid #555555;
144+
}
145+
146+
.EachTodo{
147+
animation: downTotop;
148+
animation-duration: 0.7s;
149+
animation-timing-function: ease-out;
150+
margin-top: 20px;
151+
margin-bottom: 20px;
152+
display: flex;
153+
padding-left: 30px;
154+
align-items: center;
155+
justify-content: space-between;
156+
background-color: rgb(216, 149, 209);
157+
box-shadow:0px 0px 60px 0px rgba(0, 0, 0, 0.221);
158+
border-radius: 20px;
159+
width: 90%;
160+
font-size: 25px;
161+
max-width: 650px;
162+
min-width: 320px;
163+
color: #474747;
164+
border: 2px solid black;
165+
font-family: Verdana, Geneva, Tahoma, sans-serif;
166+
}
167+
.deletebutton{
168+
background-color:rgb(236, 10, 240);
169+
outline: none;
170+
border: 0px solid transparent;
171+
height: 100px;
172+
border-top-right-radius:20px;
173+
border-bottom-right-radius:20px;
174+
width: 100px;
175+
font-weight: 700;
176+
font-size: 29px;
177+
color: #3e3e3e;
178+
transition: 0.5s;
179+
}
180+
.deletebutton:hover{
181+
background-color:rgb(204, 0, 255);
182+
width: 150px;
183+
}
184+
185+
186+
@media screen and (max-width:600px) {
187+
.heading{
188+
margin: 0px;
189+
font-size: 15vw;
190+
font-weight: 700;
191+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
192+
}
193+
.heading2{
194+
color: rgb(233, 183, 113);
195+
font-size: 20vw;
196+
font-weight: 100;
197+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
198+
}
199+
}
200+
@keyframes downTotop {
201+
from {translate: 0px 100px;opacity: 0;}
202+
to {translate: 0px 0px;opacity: 1;}
203+
}

0 commit comments

Comments
 (0)