├── README.md
├── code.css
├── code.js
├── img
    ├── 1.png
    ├── 2.png
    └── 3.png
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/devpayoub/To-Do-List)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/devpayoub/To-Do-List?style=social)
 5 |   <br />
 6 |   <br />
 7 | 
 8 |   <h2 align="center">To Do List</h2>
 9 | 
10 |   To Do List ,<br />  will be able to add new tasks to be done, delete tasks, mark tasks after completion, we will have a drop-down menu to filter our tasks on basis of completed or incomplete tasks.
11 |     <br /><a href="https://certificate-generator.celebritytravel.net/list/"><strong>➥ Live Demo</strong></a>
12 | 
13 | </div>
14 | 
15 | <br />
16 | 
17 | ## Demo Screeshots
18 | ### To Do List
19 | 
20 | ![Desktop Demo](./img/1.png "Desktop Demo")
21 | 
22 | ### To Do List
23 | 
24 | ![Desktop Demo](./img/2.png "Desktop Demo")
25 | 
26 | ### To Do List
27 | 
28 | ![Desktop Demo](./img/3.png "Desktop Demo")
29 | 
30 | ### Prerequistes
31 | 
32 | <p>
33 |   Basics of HTML, CSS and JS (specially DOM Manipulations)</br>
34 | </br>
35 | </p>
36 | 
37 | ### Contact
38 | 
39 | If you want to contact with me you can reach me at [Facebook](https://www.facebook.com/EminemTB).
40 | 
41 | ## Credits :
42 | ```
43 | This Script is free to distribute, modify and use with the condition that credit is provided to the creator (@devpayoub) and is not for commercial use.
44 | Email : trabelsi.ayoub1998@gmail.com
45 | ```
46 | 


--------------------------------------------------------------------------------
/code.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
 2 | * {
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   box-sizing: border-box;
 6 |   font-family: "Outfit", sans-serif;
 7 | }
 8 | .container {
 9 |   position: absolute;
10 |   left: 50%;
11 |   top: 50%;
12 |   transform: translate(-50%, -50%);
13 |   box-shadow: 7px 7px 33px 0 rgba(0, 0, 0, 0.25),
14 |     -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
15 |   min-height: 180px;
16 |   min-width: 300px;
17 |   max-width: 300px;
18 |   padding: 20px;
19 |   border-radius: 12px;
20 |   overflow-wrap: break-word;
21 | }
22 | input[type="text"] {
23 |   padding: 8px;
24 |   border: 1px solid goldenrod;
25 |   border-radius: 5px;
26 |   width: 180px;
27 | }
28 | button[type="button"] {
29 |   padding: 10px;
30 |   background-color: goldenrod;
31 |   color: white;
32 |   border: none;
33 |   width: 60px;
34 |   border-radius: 4px;
35 |   cursor: pointer;
36 |   gap: 10px;
37 | }
38 | .add-center {
39 |   margin-top: 10px;
40 |   display: flex;
41 |   justify-content: center;
42 | }
43 | #list-data {
44 |   margin-top: 10px;
45 | }
46 | .task-item {
47 |   padding: 10px;
48 |   background-color: Fuchsia;
49 |   color: white;
50 |   margin-top: 5px;
51 |   border-radius: 4px;
52 |   border: 2px solid pink; /* Add a pink border */
53 |   overflow-wrap: break-word;
54 | }
55 | body {
56 |   background-color: #f0f0f0;
57 | }
58 | 
59 | .dark-theme {
60 |   background-color: #333;
61 |   color: #fff;
62 | }
63 | 
64 | /* Your existing styles remain unchanged */
65 | 
66 | .input-container {
67 |   display: flex;
68 |   gap: 10px;
69 |   margin-bottom: 10px;
70 | }
71 | 
72 | .input-container label {
73 |   flex-shrink: 0;
74 | }
75 | 
76 | .button-container {
77 |   display: flex;
78 |   justify-content: center;
79 |   align-items: center;
80 |   margin-top: 10px;
81 | }
82 | 
83 | #list-data {
84 |   margin-top: 20px;
85 | }
86 | 
87 | h4 {
88 |   background-color: goldenrod;
89 |   color: rgb(0, 0, 0);
90 |   border: none;
91 |   width: 265px;
92 |   border-radius: 4px;
93 |   margin-top: 30px; /* Add margin to create space between tasks and name */
94 |   text-align: center;
95 | }
96 | 


--------------------------------------------------------------------------------
/code.js:
--------------------------------------------------------------------------------
  1 | var items_arr = [];
  2 | 
  3 | function addToList() {
  4 |   let items = document.getElementById("task").value.toString();
  5 |   if (items) {
  6 |     items_arr = sessionStorage.getItem("task_arr")
  7 |       ? JSON.parse(sessionStorage.getItem("task_arr"))
  8 |       : [];
  9 |     const uuid = crypto.randomUUID();
 10 |     items_arr.push({ item: items, uuid: uuid });
 11 |     sessionStorage.setItem("task_arr", JSON.stringify(items_arr));
 12 |     document.getElementById("task").value = "";
 13 |     listItems(items, uuid);
 14 |   }
 15 | }
 16 | 
 17 | function listItems(items, uuid) {
 18 |   const taskContainer = document.createElement("div");
 19 |   taskContainer.id = `${uuid}`;
 20 |   taskContainer.style.cssText =
 21 |     "padding: 10px; background-color: Fuchsia; color: white; margin-top: 5px; border-radius: 4px;";
 22 | 
 23 |   const taskData = document.createElement("span");
 24 |   taskData.innerHTML = items;
 25 |   taskContainer.appendChild(taskData);
 26 | 
 27 |   const editButton = document.createElement("i");
 28 |   const deleteButton = document.createElement("i");
 29 | 
 30 |   editButton.className = "fas fa-edit";
 31 |   editButton.style.cssText =
 32 |     "float: right; cursor: pointer; position: relative; right: 5px;";
 33 | 
 34 |   deleteButton.className = "fas fa-trash";
 35 |   deleteButton.style.cssText =
 36 |     "float: right; cursor: pointer; position: relative; left: 2px;";
 37 | 
 38 |   editButton.addEventListener("click", function () {
 39 |     var inputChecker = taskContainer.getElementsByTagName("input");
 40 |     if (inputChecker?.[0]?.style?.color != "white") {
 41 |       const editContent = document.createElement("input");
 42 |       const editDone = document.createElement("button");
 43 | 
 44 |       editContent.style.cssText =
 45 |         "background-color: Fuchsia; color: white; border: 1px solid goldenrod; border-radius: 5px; padding: 5px; margin-top: 5px;";
 46 |       editContent.value = items;
 47 | 
 48 |       editDone.style.cssText =
 49 |         "background-color: goldenrod;color: white;border: none; padding: 5px; border-radius: 3px; margin-left: 4px; cursor: pointer;";
 50 |       editDone.innerHTML = "Done";
 51 | 
 52 |       editDone.addEventListener("click", function () {
 53 |         taskData.innerHTML = editContent.value;
 54 |         editContent.remove();
 55 |         editDone.remove();
 56 |         items_arr = JSON.parse(sessionStorage.getItem("task_arr"));
 57 |         for (let i = 0; i < items_arr.length; i++) {
 58 |           if (items_arr[i].uuid === taskContainer.id) {
 59 |             items_arr[i].item = editContent.value;
 60 |             sessionStorage.setItem("task_arr", JSON.stringify(items_arr));
 61 |             break;
 62 |           }
 63 |         }
 64 |       });
 65 | 
 66 |       taskContainer.appendChild(editContent);
 67 |       taskContainer.appendChild(editDone);
 68 |     }
 69 |   });
 70 | 
 71 |   deleteButton.addEventListener("click", function () {
 72 |     taskContainer.remove();
 73 |     items_arr = JSON.parse(sessionStorage.getItem("task_arr"));
 74 |     for (let i = 0; i < items_arr.length; i++) {
 75 |       if (items_arr[i].uuid === taskContainer.id) {
 76 |         items_arr.splice(i, 1);
 77 |         sessionStorage.setItem("task_arr", JSON.stringify(items_arr));
 78 |         break;
 79 |       }
 80 |     }
 81 |     sessionStorage.setItem("task_arr", JSON.stringify(items_arr));
 82 |   });
 83 | 
 84 |   taskContainer.appendChild(deleteButton);
 85 |   taskContainer.appendChild(editButton);
 86 |   document.getElementById("list-data").appendChild(taskContainer);
 87 | }
 88 | 
 89 | function toggleTheme() {
 90 |   var themeIcon = document.getElementById("themeIcon");
 91 |   document.body.classList.toggle("dark-theme");
 92 | 
 93 |   if (document.body.classList.contains("dark-theme")) {
 94 |     themeIcon.className = "fas fa-moon";
 95 |   } else {
 96 |     themeIcon.className = "fas fa-sun";
 97 |   }
 98 | }
 99 | 
100 | window.onload = function () {
101 |   items_arr = sessionStorage.getItem("task_arr")
102 |     ? JSON.parse(sessionStorage.getItem("task_arr"))
103 |     : [];
104 | 
105 |   if (items_arr.length > 0) {
106 |     for (let item of items_arr) {
107 |       listItems(item.item, item.uuid);
108 |     }
109 |   }
110 | };
111 | ``
112 | 


--------------------------------------------------------------------------------
/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/To-Do-List/de4c060a6f23cfb1ddb7b6bba985f7019f2041db/img/1.png


--------------------------------------------------------------------------------
/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/To-Do-List/de4c060a6f23cfb1ddb7b6bba985f7019f2041db/img/2.png


--------------------------------------------------------------------------------
/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/To-Do-List/de4c060a6f23cfb1ddb7b6bba985f7019f2041db/img/3.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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</title>
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 8 |     <link rel="stylesheet" href="code.css" />
 9 |     <script src="code.js"></script>
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       
14 |       <form>
15 |         <div class="input-container">
16 |           <label for="task">Tasks: </label>
17 |           <input id="task" type="text" />
18 |           <button type="button" onclick="toggleTheme()">
19 |             <i id="themeIcon" class="fas fa-sun"></i>
20 |           </button>
21 |         </div>
22 |         <div class="button-container">
23 |           <button type="button" onclick="addToList()">+ Add</button>
24 |         </div>
25 |       </form>
26 |       
27 |       <div id="list-data"></div>
28 |       <h4>Developed By @devpayoub</h4>
29 |     </div>
30 |   </body>
31 | </html>
32 | 


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