├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 |

To-Do-List-JavaScript

2 | 3 | 4 | ![chrome-capture-2023-1-26 (1)](https://user-images.githubusercontent.com/77020164/221394835-eb92ac02-53e3-42bf-96ac-b5114eb543a6.gif) 5 | 6 | ## About The Project 7 | 8 | The To-Do List project is a simple web application that allows users to create and manage a list of tasks they need to complete. With a clean and intuitive interface, users can quickly add, edit, and delete tasks, as well as mark tasks as complete. 9 | This project is built with JavaScript and is a great example of a basic web application using DOM manipulation and event listeners. 10 | 11 | 12 | ## Blog 13 | 14 | Check out our project blog post for more information on the development process and our thoughts on the To Do List project: 15 | 16 | * [To Do List Using JS](https://www.codingninjas.com/codestudio/library/building-a-todo-list-using-javascript?utm_source=github&utm_medium=organic&utm_campaign=blog-building-a-todo-list-using-javascript) 17 | 18 | 19 | 20 | ## Getting Started 21 | 22 | To get a local copy up and running follow these simple example steps. 23 | 24 | ### Installation 25 | 26 | To run this application locally, you need to clone this repository to your local machine. You can do this by running the following command in your terminal: 27 | 1. Clone the repo `https://github.com/CodeStudio-Content/To-Do-List-JavaScript.git` 28 | 2. `cd To-Do-List-JavaScript` 29 | 30 | 31 | ## Usage 32 | 33 | - Open the index.html file in your browser 34 | 35 | ### 1. Adding a task 36 | To add a task to the to-do list, simply enter the task description in the input field at the top of the page and press the "Add" button. The task will be added to the list. 37 | 38 | ### 2. Updating a task 39 | To update a task, click on the task you want to update. This will open a modal window where you can edit the task description. Once you have made your changes, click the "Save" button to update the task. 40 | 41 | ### 3. Completing a task 42 | To mark a task as complete, simply click the checkbox next to the task description. The task will be crossed out to indicate that it has been completed. 43 | 44 | ### 4. Deleting a task 45 | To delete a task, click the "Delete" button next to the task you want to delete. This will remove the task from the to-do list. 46 | 47 | 48 | ## Requirements 49 | 50 | - HTML 51 | - CSS 52 | - Javascript 53 | 54 | 55 | ## Files 56 | 57 | * `index.html` : 58 | This is the main file that contains the html code for the To-Do List. 59 | * `style.css` : 60 | This file contains the styling for the To-Do List. 61 | * `script.js` : 62 | This file contains the logic for the To-Do List, including adding, editing, and deleting tasks, and filtering the task list. 63 | 64 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Todo App

18 |
19 |
20 |
21 | 22 | 23 |
24 |
25 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // access input field 2 | const input = document.querySelector('#todo-input'); 3 | 4 | // Listening to click event from "Add" button. 5 | document.querySelector('#submit').addEventListener('click', () => { 6 | // value of the input field 7 | const inputData = input.value; 8 | input.value = ""; 9 | 10 | // creating todo item element 11 | const todo_el = document.createElement('div'); 12 | todo_el.classList.add('todo-item'); 13 | 14 | const todo_content_el = document.createElement('div'); 15 | todo_el.appendChild(todo_content_el); 16 | 17 | const todo_input_el = document.createElement('input'); 18 | todo_input_el.classList.add('text'); 19 | todo_input_el.type = 'text'; 20 | todo_input_el.value = inputData; 21 | todo_input_el.setAttribute('readonly', 'readonly'); 22 | 23 | todo_content_el.appendChild(todo_input_el); 24 | 25 | const todo_actions_el = document.createElement('div'); 26 | todo_actions_el.classList.add('action-items'); 27 | 28 | const todo_done_el = document.createElement('i'); 29 | todo_done_el.classList.add('fa-solid'); 30 | todo_done_el.classList.add('fa-check'); 31 | 32 | const todo_edit_el = document.createElement('i'); 33 | todo_edit_el.classList.add('fa-solid'); 34 | todo_edit_el.classList.add('fa-pen-to-square'); 35 | todo_edit_el.classList.add('edit'); 36 | 37 | const todo_delete_el = document.createElement('i'); 38 | todo_delete_el.classList.add('fa-solid'); 39 | todo_delete_el.classList.add('fa-trash'); 40 | 41 | todo_actions_el.appendChild(todo_done_el) 42 | todo_actions_el.appendChild(todo_edit_el); 43 | todo_actions_el.appendChild(todo_delete_el); 44 | 45 | todo_el.appendChild(todo_actions_el); 46 | console.log(todo_el) 47 | // add the todo-item to lists 48 | document.querySelector('.todo-lists').appendChild(todo_el); 49 | 50 | // done functionality 51 | todo_done_el.addEventListener('click', () => { 52 | todo_input_el.classList.add('done') 53 | todo_el.removeChild(todo_actions_el); 54 | }) 55 | 56 | // edit functionality 57 | todo_edit_el.addEventListener('click', (e) => { 58 | if (todo_edit_el.classList.contains("edit")) { 59 | todo_edit_el.classList.remove("edit"); 60 | todo_edit_el.classList.remove("fa-pen-to-square"); 61 | todo_edit_el.classList.add("fa-x"); 62 | todo_edit_el.classList.add("save"); 63 | todo_input_el.removeAttribute("readonly"); 64 | todo_input_el.focus(); 65 | } else { 66 | todo_edit_el.classList.remove("save"); 67 | todo_edit_el.classList.remove("fa-x"); 68 | todo_edit_el.classList.add("fa-pen-to-square"); 69 | todo_edit_el.classList.add("edit"); 70 | todo_input_el.setAttribute("readonly", "readonly"); 71 | } 72 | }); 73 | 74 | // delete functionality 75 | todo_delete_el.addEventListener('click', (e) => { 76 | console.log(todo_el); 77 | document.querySelector('.todo-lists').removeChild(todo_el); 78 | }); 79 | }) -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body { 11 | background: #e55c8a; 12 | } 13 | 14 | .main-container { 15 | display: flex; 16 | width: 100vw; 17 | height: 100vh; 18 | align-items: center; 19 | justify-content: center; 20 | overflow: hidden; 21 | } 22 | 23 | .ta-wrapper { 24 | background: #3c424a; 25 | color: white; 26 | padding: 20px; 27 | border-radius: 4px; 28 | box-shadow: 0 0 7px 7px rgb(0 0 0 / 20%); 29 | min-height: 300px; 30 | } 31 | 32 | .heading h1 { 33 | text-align: center; 34 | color: white; 35 | font-size: 40px; 36 | margin-bottom: 10px; 37 | } 38 | 39 | .input-wrapper { 40 | margin-bottom: 20px; 41 | } 42 | .input-wrapper input { 43 | outline: none; 44 | border: 0; 45 | background: rgba(0,0,0,0.3); 46 | padding: 10px; 47 | color: white; 48 | width: 500px; 49 | } 50 | .input-wrapper button { 51 | background: #e55c8a; 52 | color: white; 53 | border: 0; 54 | padding: 10px; 55 | font-weight: bold; 56 | border-radius: 2px; 57 | cursor: pointer; 58 | } 59 | .todo-item { 60 | display: flex; 61 | align-items: center; 62 | justify-content: space-between; 63 | margin-bottom: 10px; 64 | border-bottom: 1px solid rgba(0,0,0,0.2); 65 | padding-bottom: 10px; 66 | } 67 | .todo-item input { 68 | background: transparent; 69 | border: navajowhite; 70 | color: white; 71 | outline: none; 72 | } 73 | .todo-item i{ 74 | color: #e55c8a; 75 | background: transparent; 76 | border: 1px solid; 77 | border-radius: 50%; 78 | padding: 6px; 79 | cursor: pointer; 80 | transition: 0.2s ease-in-out; 81 | margin-left: 5px; 82 | } 83 | .todo-item button:hover { 84 | color: white; 85 | } 86 | .done { 87 | text-decoration: line-through; 88 | } 89 | .fa-x { 90 | padding: 6px 8px !important; 91 | } --------------------------------------------------------------------------------