├── README.md ├── code.css ├── code.js ├── img ├── 1.png ├── 2.png └── 3.png └── index.html /README.md: -------------------------------------------------------------------------------- 1 |
33 | Basics of HTML, CSS and JS (specially DOM Manipulations) 34 | 35 |
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 | 2 | 3 | 4 | 5 | 6 |