├── public ├── site preview.png ├── style.css └── app.js ├── README.md ├── LICENSE └── index.html /public/site preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/To-Do-List/HEAD/public/site preview.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🛫 Hazrat Ali 2 | 3 | # 🚁 Programmer || Software Engineering 4 | 5 | 6 | # Todo-list 7 | list your deily tasks 8 | 9 | [see live]() 10 | 11 | 12 | 13 | # author 14 | [Hazrat Ali]() 15 | 16 | [MIT LICENSE](LICENSE) 17 | 18 | -------------------------------------------------------------------------------- /public/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Playwrite+ES:wght@100..400&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); 2 | /* Style css */ 3 | body ul, 4 | div, 5 | button, 6 | h1 { 7 | font-family: "Rubik", sans-serif; 8 | color: rgb(0, 0, 0); 9 | } 10 | 11 | .head { 12 | font-family: "Playwrite ES", cursive; 13 | } 14 | 15 | ul li { 16 | /* background-color: rgb(32, 133, 227); */ 17 | margin: 10px 10px; 18 | border-radius: 10px; 19 | padding: 10px 10px; 20 | color: rgb(0, 0, 0); 21 | } 22 | 23 | li button { 24 | background: #d9534f; 25 | border: none; 26 | color: white; 27 | padding: 5px 10px; 28 | border-radius: 5px; 29 | cursor: pointer; 30 | margin-left: 8px; 31 | ; 32 | margin: 10px 10px; 33 | } 34 | 35 | li button:hover { 36 | background: #c9302c; 37 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Hazrat Ali 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Basic To-Do List 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |

To-Do List

20 |
21 |
22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 |
34 | 35 |
36 |

your tasks

37 |
    38 |
    39 |
    40 |
    41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/app.js: -------------------------------------------------------------------------------- 1 | // saving on local storage 2 | function saveTasksToLocalStorage(tasks) { 3 | localStorage.setItem('tasks', JSON.stringify(tasks)); 4 | } 5 | // App js 6 | // function to get tasks from local storage 7 | function getTasksFromLocalStorage() { 8 | const tasks = localStorage.getItem('tasks'); 9 | return tasks ? JSON.parse(tasks) : []; 10 | } 11 | 12 | // function to render tasks 13 | function renderTasks(tasks) { 14 | const todoList = document.getElementById("todo-list"); 15 | todoList.innerHTML = ''; 16 | 17 | tasks.forEach((task, index) => { 18 | // create a new list item 19 | const li = document.createElement("li"); 20 | li.innerHTML = `

    ${task.name}

    ${task.task}`; 21 | 22 | // create a delete button 23 | const deleteBtn = document.createElement("button"); 24 | deleteBtn.textContent = "Delete"; 25 | deleteBtn.addEventListener("click", function () { 26 | // remove the list item from the DOM 27 | li.remove(); 28 | // removing the task from local storage 29 | const tasks = getTasksFromLocalStorage(); 30 | tasks.splice(index, 1); 31 | saveTasksToLocalStorage(tasks); 32 | renderTasks(tasks); 33 | }); 34 | 35 | // Append the delete button to the list item 36 | li.appendChild(deleteBtn); 37 | 38 | // for random color on li 39 | const colors = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#FF5733', '#33FFF5', '#FF3380', '#FF8C33', '#33FF8C', '#8C33FF']; 40 | const randomColor = colors[Math.floor(Math.random() * colors.length)]; 41 | li.style.backgroundColor = randomColor; 42 | 43 | // Append the list item to the task list 44 | todoList.appendChild(li); 45 | }); 46 | } 47 | 48 | // Load tasks from local storage when the page loads 49 | document.addEventListener("DOMContentLoaded", function () { 50 | const tasks = getTasksFromLocalStorage(); 51 | renderTasks(tasks); 52 | }); 53 | 54 | // Add task form submission event 55 | document.getElementById("todo-form").addEventListener("submit", function (e) { 56 | e.preventDefault(); 57 | 58 | // Get the input values 59 | const input = document.getElementById("todo-input"); 60 | const newTask = input.value.trim(); 61 | const todoName = document.getElementById("todo-name"); 62 | const newTaskName = todoName.value.trim(); 63 | 64 | if (newTask && newTaskName) { 65 | // Create a task object 66 | const task = { name: newTaskName, task: newTask }; 67 | 68 | // Save the new task to local storage 69 | const tasks = getTasksFromLocalStorage(); 70 | tasks.push(task); 71 | saveTasksToLocalStorage(tasks); 72 | 73 | // Render tasks to include the new task 74 | renderTasks(tasks); 75 | 76 | // Clear the input fields 77 | input.value = ""; 78 | todoName.value = ""; 79 | } 80 | }); 81 | --------------------------------------------------------------------------------