2 |
3 |
4 | 
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 |
--------------------------------------------------------------------------------
/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 | })
--------------------------------------------------------------------------------