├── js
├── addTodo.js
└── script.js
├── .gitattributes
├── img
├── logo.png
├── 1.svg
├── 2.svg
├── 3.svg
└── 4.svg
├── screenshot2.png
├── README.md
├── index.html
└── css
└── style.css
/js/addTodo.js:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * linguist-vendored
2 | *.js linguist-vendored=false
--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdulrahim-ramadan/space-js-ToDo/HEAD/img/logo.png
--------------------------------------------------------------------------------
/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdulrahim-ramadan/space-js-ToDo/HEAD/screenshot2.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # space js ToDo ⭐
2 |
3 | Space JS ToDo is a simple web-based todo list application built with HTML, CSS, and JavaScript. It provides a minimalistic interface for managing your tasks efficiently.
4 |
5 | ## Featuress
6 |
7 | - **Add and Remove Tasks:** Easily add new tasks to your todo list and remove them when completed.
8 | - **Mark Tasks as Complete:** Mark tasks as complete by checking them off from the list.
9 | - **Persistent Storage:** Your todo list is saved locally in the browser's storage, ensuring your tasks are preserved even after refreshing the page.
10 | - **Responsive Design:** The application is responsive and works seamlessly across different devices and screen sizes.
11 |
12 | ## Live Demo
13 |
14 | Check out the live demo of Space JS ToDo [here](https://abdulrahim-ramadan.github.io/space-js-ToDo/).
15 |
16 | ## Screenshots
17 |
18 | 
19 |
20 | ## Usage
21 |
22 | 1. **Clone the Repository:**
23 |
24 | ```bash
25 | git clone https://github.com/abdulrahim-ramadan/space-js-ToDo.git
26 | ```
27 |
28 | 2. **Open `index.html` in Your Browser:**
29 |
30 | Navigate to the project directory and open the `index.html` file in your preferred web browser to start using the application.
31 |
32 | 3. **Add and Manage Tasks:**
33 |
34 | - To add a new task, type the task in the input field and press Enter.
35 | - To mark a task as complete, click on the checkbox next to the task.
36 | - To remove a task, click on the delete button next to the task.
37 |
38 | ## Contributing
39 |
40 | Contributions are welcome! If you have any ideas, suggestions, or bug fixes, please open an issue or submit a pull request.
41 |
42 | ## License
43 |
44 | This project is licensed under the [MIT License](LICENSE).
45 |
46 |
47 | #Please ⭐ the repo to support our project
48 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 |
2 | const todoinput = document.querySelector('.todo-input')
3 | const todoBtn =document.querySelector('.todo-btn')
4 | const todoResult =document.querySelector('.todo-result')
5 |
6 | function addTodo(e) {
7 |
8 | e.preventDefault();
9 |
10 |
11 |
12 | // create li
13 | const todoLi = document.createElement('li');
14 | todoLi.classList.add('my-2', 'p-3', 'border', 'rounded',"list-unstyled")
15 |
16 |
17 | // create h4
18 | const todoTitle = document.createElement('h4')
19 | todoTitle.innerText = todoinput.value
20 | todoinput.value = ''
21 | todoTitle.classList.add("mian-op",'d-inline-block')
22 |
23 | todoLi.appendChild(todoTitle);
24 |
25 |
26 |
27 | // create div
28 | const todoAction = document.createElement('div')
29 | todoAction.classList.add("mian-btn",'d-inline-block', 'float-end')
30 |
31 |
32 |
33 | // add btn
34 | const btnComplete = document.createElement('button')
35 | btnComplete.classList.add('btn','btn-primary')
36 | btnComplete.innerHTML = ''
37 | todoAction.appendChild(btnComplete);
38 |
39 |
40 | // btn 2
41 | const btnDelete = document.createElement('button')
42 | btnDelete.classList.add('btn','btn-danger')
43 | btnDelete.innerHTML = ''
44 | todoAction.appendChild(btnDelete)
45 |
46 |
47 |
48 | todoLi.appendChild(todoAction)
49 |
50 | todoResult.appendChild(todoLi)
51 |
52 | }
53 |
54 |
55 |
56 |
57 |
58 | function todoToggle(e){
59 | const item = e.target
60 |
61 | if (item.classList[1]=='fa-check'){
62 | const todo_li = item.parentElement.parentElement.parentElement
63 | todo_li.childNodes[0].classList.toggle('completed')
64 | }
65 |
66 | else if (item.classList[1]=='fa-trash-can'){
67 | item.parentElement.parentElement.parentElement.classList.add('deleted')
68 |
69 | }
70 |
71 | }
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | todoBtn.addEventListener('click',addTodo)
80 | todoResult.addEventListener('click',todoToggle)
--------------------------------------------------------------------------------
/img/1.svg:
--------------------------------------------------------------------------------
1 |
5 |
6 |
--------------------------------------------------------------------------------
/img/2.svg:
--------------------------------------------------------------------------------
1 |
5 |
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | space__Jss__ToDo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
Start Todo App
44 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |