├── README.md
├── app.js
├── github.svg
├── index.html
├── instagram.svg
├── linkedin.svg
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # to-do-webpage


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | //Select DOM
  2 | const todoInput = document.querySelector(".todo-input");
  3 | const todoButton = document.querySelector(".todo-button");
  4 | const todoList = document.querySelector(".todo-list");
  5 | const filterOption = document.querySelector(".filter-todo");
  6 | 
  7 | //Event Listeners
  8 | document.addEventListener("DOMContentLoaded", getTodos);
  9 | todoButton.addEventListener("click", addTodo);
 10 | todoList.addEventListener("click", deleteTodo);
 11 | filterOption.addEventListener("click", filterTodo);
 12 | 
 13 | //Functions
 14 | function getItemFromLocalStorage() {
 15 |   const todos = JSON.parse(localStorage.getItem("todos")) || [];
 16 | 
 17 |   return todos;
 18 | }
 19 | 
 20 | function addTodo(e) {
 21 |   //Prevent natural behaviour
 22 |   e.preventDefault();
 23 |   if (todoInput.value.trim() === "") {
 24 |     //alert("Fill the box");
 25 |     openmodal("red", "Please enter a Task!");
 26 |     return;
 27 |   }
 28 | 
 29 |   // alert("Duplicate task")
 30 |   if(isDuplicate(todoInput.value)){
 31 |     openmodal('red','This Task is already added!');
 32 |     return;
 33 |   }
 34 | 
 35 | 
 36 |   //Create todo div
 37 |   const todoDiv = document.createElement("div");
 38 |   todoDiv.classList.add("todo");
 39 |   //Create list
 40 |   const newTodo = document.createElement("li");
 41 |   newTodo.innerText = todoInput.value;
 42 | 
 43 |   let newTodoItem = {
 44 |     id: Math.round(Math.random() * 100), //id for selection
 45 |     task: todoInput.value,
 46 |     status: "incomplete",
 47 |   };
 48 |   todoDiv.setAttribute("key", newTodoItem.id);
 49 | 
 50 |   //Save to local - do this last
 51 |   //Save to local
 52 |   saveLocalTodos(newTodoItem);
 53 |   //
 54 |   newTodo.classList.add("todo-item");
 55 |   newTodo.classList.add("todo")
 56 |   todoDiv.appendChild(newTodo);
 57 |   todoInput.value = "";
 58 |   const edit = document.createElement("div");
 59 |   edit.innerHTML =
 60 |     ` <form class="editform">
 61 |     <input type="text" placeholder=` +
 62 |     `"${newTodoItem.task}"` +
 63 |     `id="` +
 64 |     `edit-${newTodoItem.id}` +
 65 |     `" required />
 66 |     <div class="editDiv" style="margin:auto;">
 67 |     <button id="editBtn-` +
 68 |     `${newTodoItem.id}` +
 69 |     `" type="submit">
 70 |       <i class="fas fa-plus-square"></i>
 71 |     </button>
 72 |   </div>
 73 |   </form>`;
 74 |   edit.classList.add("hide");
 75 |   todoDiv.appendChild(edit);
 76 |   //Create Completed Button
 77 |   const completedButton = document.createElement("button");
 78 |   completedButton.innerHTML = `<i class="fas fa-check"></i>`;
 79 |   completedButton.classList.add("complete-btn");
 80 |   todoDiv.appendChild(completedButton);
 81 |   //Create edit button
 82 |   const editButton = document.createElement("button");
 83 |   editButton.innerHTML = `<i class="fas fa-pen"></i>`;
 84 |   editButton.classList.add("edit-btn");
 85 |   editButton.addEventListener("click", () => editTodo(newTodoItem, todoDiv));
 86 |   todoDiv.appendChild(editButton);
 87 |   //Create trash button
 88 |   const trashButton = document.createElement("button");
 89 |   trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
 90 |   trashButton.classList.add("trash-btn");
 91 |   todoDiv.appendChild(trashButton);
 92 |   //attach final Todo
 93 |   todoList.appendChild(todoDiv);
 94 | }
 95 | 
 96 | function deleteTodo(e) {
 97 |   const item = e.target;
 98 |   const todo = item.parentElement;
 99 |   const id = todo.getAttribute("key");
100 | 
101 |   if (item.classList[0] === "trash-btn") {
102 |     // e.target.parentElement.remove();
103 |     todo.classList.add("fall");
104 |     //at the end
105 |     removeLocalTodos(id);
106 |     todo.addEventListener("transitionend", (e) => {
107 |       todo.remove();
108 |     });
109 |   }
110 |   if (item.classList[0] === "complete-btn") {
111 |     todo.classList.toggle("completed");
112 |     let status = "";
113 |     if (todo.classList.contains("completed")) {
114 |       status = "completed";
115 |     }
116 |     saveStatus(id, status);
117 |   }
118 |   //Prevent natural behaviour
119 |   e.preventDefault();
120 |   if (todoInput.value === "") {
121 |     alert("Fill the box");
122 |     return;
123 |   }
124 |   //Create todo div
125 |   const todoDiv = document.createElement("div");
126 |   todoDiv.classList.add("todo");
127 |   //Create list
128 |   const newTodo = document.createElement("li");
129 |   newTodo.innerText = todoInput.value;
130 |   //Save to local - do this last
131 |   //Save to local
132 |   saveLocalTodos(todoInput.value);
133 |   //
134 |   newTodo.classList.add("todo-item");
135 |   todoDiv.appendChild(newTodo);
136 |   todoInput.value = "";
137 |   //Create Completed Button
138 |   const completedButton = document.createElement("button");
139 |   completedButton.innerHTML = `<i class="fas fa-check"></i>`;
140 |   completedButton.classList.add("complete-btn");
141 |   todoDiv.appendChild(completedButton);
142 |   //Create trash button
143 |   const trashButton = document.createElement("button");
144 |   trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
145 |   trashButton.classList.add("trash-btn");
146 |   todoDiv.appendChild(trashButton);
147 |   //attach final Todo
148 |   todoList.appendChild(todoDiv);
149 | }
150 | 
151 | function deleteTodo(e) {
152 |   const item = e.target;
153 | 
154 |   if (item.classList[0] === "trash-btn") {
155 |     // e.target.parentElement.remove();
156 |     const todo = item.parentElement;
157 |     todo.classList.add("fall");
158 |     //at the end
159 |     removeLocalTodos(todo);
160 |     todo.addEventListener("transitionend", (e) => {
161 |       todo.remove();
162 |     });
163 |   }
164 |   if (item.classList[0] === "complete-btn") {
165 |     const todo = item.parentElement;
166 |     todo.classList.toggle("completed");
167 |     const status = "completed";
168 |     const id = todo.getAttribute("key");
169 |     saveStatus(id, status);
170 |   }
171 | }
172 | 
173 | //save the status of the task -> and persist by saving it to the localstorage
174 | function saveStatus(id, status) {
175 |   const todos = getItemFromLocalStorage();
176 |   const intId = Number(id);
177 |   const newTodo = todos.find((todo) => todo.id === intId);
178 |   const newStatus =
179 |     newTodo.status === "incomplete" ? "completed" : "incomplete";
180 |   const todoIndex = todos.indexOf(newTodo);
181 |   todos.splice(todoIndex, 1);
182 |   newTodo.status = newStatus;
183 |   todos.splice(todoIndex, 0, newTodo);
184 |   localStorage.setItem("todos", JSON.stringify(todos));
185 | }
186 | 
187 | function filterTodo(e) {
188 |   const todos = todoList.childNodes;
189 |   todos.forEach((todo) => {
190 |     // console.log(e.target.value);
191 | 
192 |     if (
193 |       e.target.value === "completed" &&
194 |       todo.classList.contains("completed")
195 |     ) {
196 |       todo.style.display = "flex";
197 |     } else if (
198 |       e.target.value === "completed" &&
199 |       !todo.classList.contains("completed")
200 |     ) {
201 |       todo.style.display = "none";
202 |     } else if (
203 |       e.target.value === "incomplete" &&
204 |       !todo.classList.contains("completed")
205 |     ) {
206 |       todo.style.display = "flex";
207 |     } else if (
208 |       e.target.value === "incomplete" &&
209 |       !todo.classList.contains("incomplete")
210 |     ) {
211 |       todo.style.display = "none";
212 |     } else {
213 |       todo.style.display = "flex";
214 |     }
215 |   });
216 | }
217 | 
218 | //save the task to the local storage
219 | function saveLocalTodos(todo) {
220 |   let todos = getItemFromLocalStorage();
221 |   todos.push(todo);
222 |   localStorage.setItem("todos", JSON.stringify(todos));
223 | }
224 | 
225 | //function to delete a task
226 | function removeLocalTodos(id) {
227 |   const intId = Number(id);
228 |   let todos = getItemFromLocalStorage();
229 |   const newTodo = todos.filter((todo) => todo.id !== intId);
230 | 
231 |   localStorage.setItem("todos", JSON.stringify(newTodo));
232 | }
233 | 
234 | //function to toggle display
235 | function editTodo(todo, todoDiv) {
236 |   for (let i = 0; i < todoDiv.children.length; i++) {
237 |     if (i == 1) {
238 |       todoDiv.children[i].classList.remove("hide");
239 |     } else {
240 |       todoDiv.children[i].classList.add("hide");
241 |     }
242 |   }
243 |   const editBtn = document.getElementById(`editBtn-` + `${todo.id}`);
244 |   editBtn.addEventListener("click", () => editTask(todo, todoDiv));
245 | }
246 | 
247 | function editTask(todo, todoDiv) {
248 |   let todos = getItemFromLocalStorage();
249 |   const editInput = document.getElementById(`edit-` + `${todo.id}`).value;
250 |   if (editInput === "") {
251 |     //alert("Fill the box");
252 |     openmodal("red", "Fill the box");
253 |     return;
254 |   }
255 |   todos.forEach((t) => {
256 |     if (t.id == todo.id) {
257 |       t.task = editInput;
258 |     }
259 |   });
260 |   localStorage.setItem("todos", JSON.stringify(todos));
261 |   todoDiv.children[0].innerText = editInput;
262 | }
263 | 
264 | function isDuplicate(){
265 |   let todos = getItemFromLocalStorage();
266 |   let tasks = [];
267 | 
268 |   for (var i = 0; i < todos.length; i++){
269 |     tasks.push(todos[i].task);
270 |   }
271 |   
272 |   return tasks.includes(todoInput.value);
273 | }
274 | 
275 | function getTodos() {
276 |   let todos = getItemFromLocalStorage();
277 |   todos.forEach(function (todo) {
278 |     //Create todo div
279 |     const todoDiv = document.createElement("div");
280 |     todoDiv.classList.add("todo");
281 |     if (todo.status === "completed") {
282 |       todoDiv.classList.add("completed");
283 |     }
284 |     todoDiv.setAttribute("key", todo.id);
285 |     //Create list
286 |     const newTodo = document.createElement("li");
287 |     newTodo.innerText = todo.task;
288 |     newTodo.classList.add("todo-item");
289 |     todoDiv.appendChild(newTodo);
290 |     //Create Completed Button
291 |     const completedButton = document.createElement("button");
292 |     completedButton.innerHTML = `<i class="fas fa-check"></i>`;
293 |     completedButton.classList.add("complete-btn");
294 |     todoDiv.appendChild(completedButton);
295 |     //Create trash button
296 |     const trashButton = document.createElement("button");
297 |     trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
298 |     trashButton.classList.add("trash-btn");
299 |     todoDiv.appendChild(trashButton);
300 |     //attach final Todo
301 |     todoList.appendChild(todoDiv);
302 |   });
303 | }
304 | 
305 | 
306 | function saveLocalTodos(todo) {
307 |   let todos;
308 |   if (localStorage.getItem("todos") === null) {
309 |     todos = [];
310 |   } else {
311 |     todos = JSON.parse(localStorage.getItem("todos"));
312 |   }
313 |   todos.push(todo);
314 |   localStorage.setItem("todos", JSON.stringify(todos));
315 | }
316 | function removeLocalTodos(todo) {
317 |   let todos;
318 |   if (localStorage.getItem("todos") === null) {
319 |     todos = [];
320 |   } else {
321 |     todos = JSON.parse(localStorage.getItem("todos"));
322 |   }
323 |   const todoIndex = todo.children[0].innerText;
324 |   todos.splice(todos.indexOf(todoIndex), 1);
325 |   localStorage.setItem("todos", JSON.stringify(todos));
326 | }
327 | 
328 | function getTodos() {
329 |   let todos;
330 |   if (localStorage.getItem("todos") === null) {
331 |     todos = [];
332 |   } else {
333 |     todos = JSON.parse(localStorage.getItem("todos"));
334 |   }
335 |   todos.forEach(function (todo) {
336 |     //Create todo div
337 |     const todoDiv = document.createElement("div");
338 |     todoDiv.classList.add("todo");
339 |     if (todo.status == "completed") {
340 |       todoDiv.classList.toggle("completed");
341 |     }
342 |     //Create list
343 |     const newTodo = document.createElement("li");
344 |     newTodo.innerText = todo.task;
345 |     newTodo.classList.add("todo-item");
346 |     todoDiv.appendChild(newTodo);
347 |     todoInput.value = "";
348 |     //input box
349 |     const edit = document.createElement("div");
350 |     edit.innerHTML =
351 |       ` <form class="editform">
352 |     <input type="text" placeholder=` +
353 |       `"${todo.task}"` +
354 |       `id="` +
355 |       `edit-${todo.id}` +
356 |       `" required />
357 |     <div class="editDiv" style="margin:auto;">
358 |     <button id="editBtn-` +
359 |       `${todo.id}` +
360 |       `" type="submit">
361 |       <i class="fas fa-plus-square"></i>
362 |     </button>
363 |   </div>
364 |   </form>`;
365 |     edit.classList.add("hide");
366 |     todoDiv.appendChild(edit);
367 |     //Create Completed Button
368 |     const completedButton = document.createElement("button");
369 |     completedButton.innerHTML = `<i class="fas fa-check"></i>`;
370 |     completedButton.classList.add("complete-btn");
371 |     todoDiv.appendChild(completedButton);
372 |     //Create edit button
373 |     const editButton = document.createElement("button");
374 |     editButton.innerHTML = `<i class="fas fa-pen"></i>`;
375 |     editButton.classList.add("edit-btn");
376 |     editButton.addEventListener("click", () => editTodo(todo, todoDiv));
377 |     todoDiv.appendChild(editButton);
378 |     //Create trash button
379 |     const trashButton = document.createElement("button");
380 |     trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
381 |     trashButton.classList.add("trash-btn");
382 |     todoDiv.setAttribute("key", todo.id);
383 |     todoDiv.appendChild(trashButton);
384 |     //attach final Todo
385 |     todoList.appendChild(todoDiv);
386 |   });
387 | }
388 | 
389 | function deleteAll() {
390 |   [...document.getElementsByClassName("todo")].map((n) => n && n.remove());
391 |   localStorage.removeItem("todos");
392 |   document.getElementById("confirmation_box").classList.add("hide");
393 | }
394 | 
395 | function openmodal(color, message) {
396 |   //pass color as either 'red' (for error), 'blue' for info and 'green' for success
397 |   console.log("in");
398 |   document.getElementById("content").classList.add(color);
399 |   document.getElementById("modal-text").innerText = message;
400 |   document.getElementById("Modal").classList.add("true");
401 | }
402 | function closemodal() {
403 |   document.getElementById("Modal").classList.remove("true");
404 | }
405 | 
406 | var today = new Date();
407 | var date = today.toString();
408 | document.getElementById("d1").innerHTML = date;
409 | function show_alert() {
410 |   if (localStorage.getItem("todos") === null) {
411 |     let html='Please add items first';
412 |     console.log(html);
413 |   } 
414 |   else{
415 |     document.getElementById("confirmation_box").classList.remove("hide");
416 |   }
417 |   
418 | }
419 | function goback() {
420 |   document.getElementById("confirmation_box").classList.add("hide");
421 | }


--------------------------------------------------------------------------------
/github.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 | 
 7 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
 8 |     <title>To-Do List</title>
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
10 |     <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" />
11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
12 | 
13 |     <link rel="stylesheet" href="style.css" />
14 | </head>
15 | 
16 | <body>
17 |     <header>
18 |         <div class="main_heading">
19 |             <h1>To-Do List</h1>
20 |         </div>
21 |     </header>
22 | 
23 | 
24 |     <div class="modal red" id="Modal">
25 |         <div class="content" id="content">
26 |             <span id="modal-text">
27 |         Some Text
28 |       </span>
29 |             <button onclick="closemodal()" class="modal-btn">x</button>
30 |         </div>
31 |     </div>
32 |     <span class="todayDate">Day <span id="d1"></span></span>
33 |     <form class="todoform">
34 |         <input type="text" placeholder="Add a new Task .." class="todo-input" required />
35 |         <div class="abc">
36 |             <button class="todo-button" type="submit">
37 |       <i class="fas fa-plus-square"></i>
38 |     </button>
39 |             <div class="select">
40 |                 <select name="todos" class="filter-todo " style="color:black;">
41 |         <option value="all" style="color:black;">All</option>
42 |         <option value="completed" style="color:black;">Completed</option>
43 |         <option value="incomplete" style="color:black;">Incomplete</option>
44 |       </select>
45 |             </div>
46 |         </div>
47 |     </form>
48 |     <div class="todo-container">
49 |         <ul class="todo-list"></ul>
50 |     </div>
51 |     <button class="delete-all" onclick="show_alert()">Delete All Tasks</button>
52 | 
53 |     <div class="confirmation_box hide " id="confirmation_box">
54 |         <div class="optbox_header">
55 |             <i class="fas fa-times" onclick="goback()"></i>
56 |         </div>
57 |         <p>Are you sure you want to delete all tasks?</p>
58 |         <div class="option_box">
59 |             <div class="proceed" onclick="deleteAll();">Yes</div>
60 |             <div class="donot_proceed" onclick="goback()">No</div>
61 |         </div>
62 |     </div>
63 | 
64 |     <footer class="footer">
65 |         <div class="social-media">
66 |             <!-- instagram -->
67 |             <a class="link" href="https://instagram.com/sayanmandal0009?igshid=NGExMmI2YTkyZg==" target="_blank" rel="noopener noreferrer"><img class="social-icon" src="instagram.svg" alt="instagram" /></a>
68 |             <!-- linkedin -->
69 |             <a class="link" href="https://www.linkedin.com/in/sayan-mandal-b07283204/" target="_blank" rel="noopener noreferrer"><img class="social-icon" src="linkedin.svg" alt="linkedin" /></a>
70 |             
71 |             <!-- github -->
72 |             <a class="link" href="https://github.com/sayanmanda" target="_blank" rel="noopener noreferrer"><img class="social-icon" src="github.svg" alt="Github" /></a>
73 | 
74 |         </div>
75 |         <p class="footer-desc">This project is done by <strong>Sayan Mandal</strong> </a>
76 |         </p>
77 |     </footer>
78 | 
79 |     <script src="app.js"></script>
80 | 
81 | </body>
82 | 
83 | </html>


--------------------------------------------------------------------------------
/instagram.svg:
--------------------------------------------------------------------------------
1 | <svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="SVGID_1_" gradientTransform="matrix(0 -1.982 -1.844 0 -132.522 -51.077)" gradientUnits="userSpaceOnUse" x1="-37.106" x2="-26.555" y1="-72.705" y2="-84.047"><stop offset="0" stop-color="#fd5"/><stop offset=".5" stop-color="#ff543e"/><stop offset="1" stop-color="#c837ab"/></linearGradient><path d="m1.5 1.633c-1.886 1.959-1.5 4.04-1.5 10.362 0 5.25-.916 10.513 3.878 11.752 1.497.385 14.761.385 16.256-.002 1.996-.515 3.62-2.134 3.842-4.957.031-.394.031-13.185-.001-13.587-.236-3.007-2.087-4.74-4.526-5.091-.559-.081-.671-.105-3.539-.11-10.173.005-12.403-.448-14.41 1.633z" fill="url(#SVGID_1_)"/><path d="m11.998 3.139c-3.631 0-7.079-.323-8.396 3.057-.544 1.396-.465 3.209-.465 5.805 0 2.278-.073 4.419.465 5.804 1.314 3.382 4.79 3.058 8.394 3.058 3.477 0 7.062.362 8.395-3.058.545-1.41.465-3.196.465-5.804 0-3.462.191-5.697-1.488-7.375-1.7-1.7-3.999-1.487-7.374-1.487zm-.794 1.597c7.574-.012 8.538-.854 8.006 10.843-.189 4.137-3.339 3.683-7.211 3.683-7.06 0-7.263-.202-7.263-7.265 0-7.145.56-7.257 6.468-7.263zm5.524 1.471c-.587 0-1.063.476-1.063 1.063s.476 1.063 1.063 1.063 1.063-.476 1.063-1.063-.476-1.063-1.063-1.063zm-4.73 1.243c-2.513 0-4.55 2.038-4.55 4.551s2.037 4.55 4.55 4.55 4.549-2.037 4.549-4.55-2.036-4.551-4.549-4.551zm0 1.597c3.905 0 3.91 5.908 0 5.908-3.904 0-3.91-5.908 0-5.908z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/linkedin.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m437 0h-362c-41.398438 0-75 34.601562-75 76v361c0 41.398438 33.601562 75 75 75h362c41.398438 0 75-33.601562 75-75v-361c0-41.398438-33.601562-76-75-76zm0 0" fill="#25d9f8"/><path d="m512 76v361c0 41.398438-33.601562 75-75 75h-181v-512h181c41.398438 0 75 34.601562 75 76zm0 0" fill="#00c0f1"/><g fill="#ececf1"><path d="m121 196h60v211h-60zm0 0"/><path d="m121 106h60v60h-60zm0 0"/><path d="m391 275.800781v131.199219h-60v-121c0-16.5-13.5-30-30-30s-30 13.5-30 30v121h-60v-211h60v11.398438c15.601562-5.097657 25.800781-11.398438 45-11.398438 40.800781 0 75 36.597656 75 79.800781zm0 0"/></g><path d="m391 275.800781v131.199219h-60v-121c0-16.5-13.5-30-30-30s-30 13.5-30 30v121h-15v-211h15v11.398438c15.601562-5.097657 25.800781-11.398438 45-11.398438 40.800781 0 75 36.597656 75 79.800781zm0 0" fill="#e2e2e7"/></svg>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Roboto+Slab&family=Ubuntu:wght@400;500&display=swap");
  2 | @keyframes slideInFromLeft {
  3 |     0% {
  4 |         transform: translateX(-100%);
  5 |     }
  6 |     100% {
  7 |         transform: translateX(0);
  8 |     }
  9 | }
 10 | 
 11 | @keyframes expand {
 12 |     from {
 13 |         transform: scale(0);
 14 |         opacity: 0;
 15 |         background: #f0e006;
 16 |     }
 17 | }
 18 | 
 19 | @media screen and (min-width: 40.5em) {
 20 |     .product-img {
 21 |         width: 50%;
 22 |         float: left;
 23 |     }
 24 | }
 25 | 
 26 | :root {
 27 |     --black: rgb(0, 0, 0);
 28 |     --blue: rgb(62, 12, 243);
 29 |     --backgroundGreen: rgb(116, 121, 255);
 30 |     --white: rgb(255, 255, 255);
 31 |     --blue: rgb(21, 17, 255);
 32 | }
 33 | 
 34 | html {
 35 |     height: 100%;
 36 | }
 37 | 
 38 | .hide {
 39 |     display: none;
 40 | }
 41 | 
 42 | .column {
 43 |     width: 100%;
 44 | }
 45 | 
 46 | body {
 47 |     margin: 0;
 48 |     padding: 0;
 49 |     min-height: 100%;
 50 |     box-sizing: border-box;
 51 |     display: flex;
 52 |     flex-direction: column;
 53 |     animation: 1s ease-out 0s 1 slideInFromLeft;
 54 | }
 55 | 
 56 | body {
 57 |     background-color: rgb(237 206 206);
 58 | }
 59 | 
 60 | header {
 61 |     letter-spacing: -1px;
 62 |     background: rgb(111, 108, 221);
 63 |     background: linear-gradient(90deg, rgb(181, 132, 241) 0%, rgb(103, 67, 231) 50%, rgb(148, 132, 241) 100%);
 64 |     color: black;
 65 |     border-radius: 10px;
 66 |     padding: 0%;
 67 |     box-shadow: rgb(80, 78, 78) 5px 5px 20px;
 68 | }
 69 | 
 70 | header,
 71 | form {
 72 |     min-height: 10vh;
 73 |     display: flex;
 74 |     flex-wrap: wrap;
 75 |     justify-content: center;
 76 |     align-items: center;
 77 |     margin: 2rem;
 78 |     border-radius: 5px;
 79 | }
 80 | 
 81 | form input,
 82 | form button,
 83 | .delete-all {
 84 |     padding: 10px 20px;
 85 |     margin: 1rem;
 86 |     font-size: 2rem;
 87 |     outline: none;
 88 |     width: fit-content;
 89 |     background-color: white;
 90 |     border-radius: 5px;
 91 |     border: none;
 92 |     box-shadow: rgb(170, 169, 169) 5px 5px 20px;
 93 | }
 94 | 
 95 | form button:hover {
 96 |     background: #5f4dc5;
 97 |     color: var(--white);
 98 | }
 99 | 
100 | .delete-all {
101 |     background-color: red;
102 |     color: white;
103 |     width: 200px;
104 |     margin: auto auto 1.5rem;
105 | }
106 | 
107 | .delete-all:hover {
108 |     background-color: rgb(207, 2, 2);
109 | }
110 | 
111 | .todo-container {
112 |     display: flex;
113 |     justify-content: center;
114 |     align-items: center;
115 | }
116 | 
117 | .todo-list {
118 |     min-width: 40%;
119 |     list-style: none;
120 |     padding-left: 40px;
121 |     padding-right: 40px;
122 | }
123 | 
124 | .todo {
125 |     margin: 0.5rem;
126 |     background: #FFF;
127 |     font-size: 2rem;
128 |     color: var(--black);
129 |     display: flex;
130 |     justify-content: space-between;
131 |     align-items: center;
132 |     transition: all 0.5s ease;
133 |     outline: none;
134 |     border-radius: 5px;
135 |     animation: expand .5s ease-in-out;
136 | }
137 | 
138 | .main_heading h1 {
139 |     font-family: "Lobster", cursive;
140 |     font-size: 8rem;
141 | }
142 | 
143 | .filter-todo {
144 |     padding: 1rem;
145 | }
146 | 
147 | .todo li {
148 |     flex: 1;
149 | }
150 | 
151 | .trash-btn,
152 | .complete-btn {
153 |     background: red;
154 |     color: #FFFFFF;
155 |     border: none;
156 |     padding: 2rem;
157 |     cursor: pointer;
158 |     font-size: 1rem;
159 | }
160 | 
161 | .complete-btn {
162 |     background-color: #55acee;
163 |     color: #FFF;
164 | }
165 | 
166 | .edit-btn {
167 |     border: none;
168 |     padding: 2rem;
169 |     cursor: pointer;
170 |     font-size: 1rem;
171 | }
172 | 
173 | .todo-item {
174 |     padding: 0rem 0.5rem;
175 |     line-break: anywhere;
176 | }
177 | 
178 | .fa-trash,
179 | .fa-check {
180 |     pointer-events: none;
181 | }
182 | 
183 | .fall {
184 |     transform: translateY(10rem) rotateZ(20deg);
185 |     opacity: 0;
186 | }
187 | 
188 | .completed {
189 |     text-decoration: line-through;
190 |     opacity: 0.5;
191 | }
192 | 
193 | 
194 | /*CUSTOM SELECTOR */
195 | 
196 | select {
197 |     -webkit-appearance: none;
198 |     -moz-appearance: none;
199 |     -ms-appearance: none;
200 |     appearance: none;
201 |     outline: 0;
202 |     box-shadow: none;
203 |     border: 0 !important;
204 |     background-image: none;
205 |     border-radius: 5px;
206 |     background-color: #55acee;
207 |     cursor: pointer;
208 | }
209 | 
210 | 
211 | /* Custom Select */
212 | 
213 | .select {
214 |     display: flex;
215 |     align-items: center;
216 |     justify-content: center;
217 |     margin: 1rem;
218 |     overflow: hidden;
219 |     background-color: #55acee;
220 |     outline: none;
221 |     color: #1511ff;
222 |     font-family: "Poppins", sans-serif;
223 |     width: 12rem;
224 |     border-radius: 5px;
225 |     box-shadow: rgb(170, 169, 169) 5px 5px 20px;
226 | }
227 | 
228 | .abc {
229 |     display: flex;
230 |     flex-direction: row;
231 | }
232 | 
233 | .todoform {
234 |     display: flex;
235 |     flex-direction: row;
236 | }
237 | 
238 | .footer {
239 |     margin-top: auto;
240 |     width: 100%;
241 |     background-color: #645bae;
242 |     text-align: center;
243 |     padding: 1rem;
244 |     font-family: "Lobster", cursive;
245 | }
246 | 
247 | @media only screen and (max-width: 440px) {
248 |     .abc {
249 |         flex-direction: column;
250 |     }
251 |     .todoform {
252 |         flex-direction: column;
253 |     }
254 | }
255 | 
256 | 
257 | /* Arrow */
258 | 
259 | 
260 | /* Transition  */
261 | 
262 | .select:hover::after {
263 |     background-color: #f7fffe;
264 |     color: #1511ff;
265 | }
266 | 
267 | 
268 | /* Footer */
269 | 
270 | .footer h3 {
271 |     margin-block-start: 0;
272 |     margin-block-end: 0;
273 |     color: #FFF;
274 |     height: 3.5rem;
275 | }
276 | 
277 | .social-icon {
278 |     width: 4.5rem;
279 |     margin: 1rem 0.5rem;
280 |     padding: 1rem;
281 |     border-radius: 1rem;
282 | }
283 | 
284 | .footer-desc {
285 |     color: white;
286 |     font-size: 0.9em;
287 | }
288 | 
289 | .modal {
290 |     display: none;
291 |     position: fixed;
292 |     z-index: 9;
293 |     color: white;
294 |     opacity: 1;
295 |     top: 1;
296 |     height: fit-content;
297 | }
298 | 
299 | .true {
300 |     display: block;
301 | }
302 | 
303 | .content {
304 |     position: fixed;
305 |     top: 10px;
306 |     left: 10px;
307 |     padding: 10px;
308 |     animation-name: slideIn;
309 |     animation-duration: 0.4s;
310 |     width: fit-content;
311 |     margin: auto;
312 | }
313 | 
314 | .green {
315 |     background-color: rgb(118, 76, 165);
316 | }
317 | 
318 | .red {
319 |     background-color: red;
320 |     border-radius: 0.25em;
321 |     font-family: 'Poppins';
322 | }
323 | 
324 | .blue {
325 |     background-color: rgb(47, 47, 167);
326 | }
327 | 
328 | .modal-btn {
329 |     background-color: white;
330 |     color: black;
331 |     box-shadow: none;
332 |     border: 0.1em solid white;
333 |     padding: 0.02em 0.68em;
334 |     margin: 0 0 0.03em 0.5em;
335 |     border-radius: 0.25em;
336 |     font-size: 0.9em;
337 |     font-weight: bold;
338 | }
339 | 
340 | .modal-btn:hover {
341 |     background-color: rgb(112, 112, 112);
342 |     color: white;
343 | }
344 | 
345 | @keyframes slideIn {
346 |     from {
347 |         top: -300px;
348 |         opacity: 0
349 |     }
350 |     to {
351 |         top: 0;
352 |         opacity: 1
353 |     }
354 | }
355 | 
356 | .todayDate {
357 |     display: block;
358 |     text-align: center;
359 |     font-weight: bold;
360 | }
361 | 
362 | .confirmation_box {
363 |     width: 700px;
364 |     height: 300px;
365 |     background: #f7fffe;
366 |     position: relative;
367 |     left: 420px;
368 |     bottom: 280px;
369 |     border-radius: 20px;
370 | }
371 | 
372 | .optbox_header {
373 |     background: linear-gradient(90deg, rgb(181, 132, 241) 0%, rgb(103, 67, 231) 50%, rgb(148, 132, 241) 100%);
374 |     height: 40px;
375 |     border-top-left-radius: 20px;
376 |     border-top-right-radius: 20px;
377 | }
378 | 
379 | .confirmation_box p {
380 |     position: relative;
381 |     left: 85px;
382 |     top: 20px;
383 |     font-size: 3.4rem;
384 |     font-family: "Lobster", cursive;
385 | }
386 | 
387 | .proceed {
388 |     background: linear-gradient(90deg, rgb(181, 132, 241) 0%, rgb(103, 67, 231) 50%, rgb(148, 132, 241) 100%);
389 |     height: 60px;
390 |     width: 180px;
391 |     border-radius: 10px;
392 |     font-family: "Lobster", cursive;
393 |     position: relative;
394 |     left: 20px;
395 |     box-shadow: 10px 10px 10px rgba(132, 131, 131, 0.537);
396 |     text-align: center;
397 |     line-height: 60px;
398 |     font-size: 2.2rem;
399 | }
400 | 
401 | .donot_proceed {
402 |     background: linear-gradient(90deg, rgb(181, 132, 241) 0%, rgb(103, 67, 231) 50%, rgb(148, 132, 241) 100%);
403 |     height: 60px;
404 |     width: 180px;
405 |     border-radius: 10px;
406 |     font-family: "Lobster", cursive;
407 |     position: relative;
408 |     left: 20px;
409 |     box-shadow: 10px 10px 10px rgba(132, 131, 131, 0.537);
410 |     text-align: center;
411 |     line-height: 60px;
412 |     font-size: 2.2rem;
413 | }
414 | 
415 | .option_box {
416 |     display: flex;
417 |     justify-content: space-between;
418 |     width: 500px;
419 |     position: relative;
420 |     left: 70px;
421 |     top: 50px;
422 | }
423 | 
424 | .proceed:hover {
425 |     box-shadow: 10px 10px 10px rgb(132, 131, 131);
426 |     cursor: pointer;
427 |     height: 65px;
428 |     width: 200px;
429 |     font-size: 2.8rem;
430 | }
431 | 
432 | .donot_proceed:hover {
433 |     box-shadow: 10px 10px 10px rgb(132, 131, 131);
434 |     cursor: pointer;
435 |     height: 65px;
436 |     width: 200px;
437 |     font-size: 2.8rem;
438 | }
439 | 
440 | .optbox_header i {
441 |     font-size: 3rem;
442 |     color: #FFF;
443 |     position: relative;
444 |     width: 28px;
445 |     height: 26px;
446 |     border: none;
447 |     left: 665px;
448 |     top: 5px;
449 | }
450 | 
451 | .optbox_header i:hover {
452 |     cursor: pointer;
453 |     color: black;
454 | }
455 | 
456 | @media only screen and (max-width: 440px) {
457 |     .confirmation_box {
458 |         width: 300px;
459 |         height: 300px;
460 |         background: #f7fffe;
461 |         position: relative;
462 |         left: 30px;
463 |         bottom: 280px;
464 |         border-radius: 20px;
465 |     }
466 |     .optbox_header {
467 |         background: linear-gradient(90deg, rgb(181, 132, 241) 0%, rgb(103, 67, 231) 50%, rgb(148, 132, 241) 100%);
468 |         height: 40px;
469 |         border-top-left-radius: 20px;
470 |         border-top-right-radius: 20px;
471 |     }
472 |     .confirmation_box p {
473 |         position: relative;
474 |         left: 5px;
475 |         top: 20px;
476 |         font-size: 2rem;
477 |         font-family: "Lobster", cursive;
478 |         text-align: center;
479 |     }
480 |     .proceed {
481 |         background: linear-gradient(90deg, rgb(181, 132, 241) 0%, rgb(103, 67, 231) 50%, rgb(148, 132, 241) 100%);
482 |         height: 60px;
483 |         width: 90px;
484 |         border-radius: 10px;
485 |         font-family: "Lobster", cursive;
486 |         position: relative;
487 |         left: 20px;
488 |         box-shadow: 10px 10px 10px rgba(132, 131, 131, 0.537);
489 |         text-align: center;
490 |         line-height: 60px;
491 |         font-size: 2.2rem;
492 |     }
493 |     .donot_proceed {
494 |         background: linear-gradient(90deg, rgb(181, 132, 241) 0%, rgb(103, 67, 231) 50%, rgb(148, 132, 241) 100%);
495 |         height: 60px;
496 |         width: 90px;
497 |         border-radius: 10px;
498 |         font-family: "Lobster", cursive;
499 |         position: relative;
500 |         left: 20px;
501 |         box-shadow: 10px 10px 10px rgba(132, 131, 131, 0.537);
502 |         text-align: center;
503 |         line-height: 60px;
504 |         font-size: 2.2rem;
505 |     }
506 |     .option_box {
507 |         display: flex;
508 |         justify-content: space-between;
509 |         width: 250px;
510 |         position: relative;
511 |         left: 0px;
512 |         top: 50px;
513 |     }
514 |     .proceed:hover {
515 |         box-shadow: 10px 10px 10px rgb(132, 131, 131);
516 |         cursor: pointer;
517 |         height: 65px;
518 |         width: 95px;
519 |         font-size: 2.8rem;
520 |     }
521 |     .donot_proceed:hover {
522 |         box-shadow: 10px 10px 10px rgb(132, 131, 131);
523 |         cursor: pointer;
524 |         height: 65px;
525 |         width: 95px;
526 |         font-size: 2.8rem;
527 |     }
528 |     .optbox_header i {
529 |         font-size: 3rem;
530 |         color: #FFF;
531 |         position: relative;
532 |         width: 28px;
533 |         height: 26px;
534 |         border: none;
535 |         left: 255px;
536 |         top: 5px;
537 |     }
538 |     .optbox_header i:hover {
539 |         cursor: pointer;
540 |         color: black;
541 |     }
542 | }


--------------------------------------------------------------------------------