Hugging Face's logo

Spaces:
JsMaulin
/
Lista-de-Tarefas
No application file

App Files Community
JsMaulin commited on
Commit
c9623cb
•
1 Parent(s): bbcbd70

Upload 5 files

Browse files
Files changed (5) hide show
  1. to-do-list/img/bg.png +0 -0
  2. to-do-list/img/iconfavs2.ico +0 -0
  3. to-do-list/index.html +34 -0
  4. to-do-list/script.js +124 -0
  5. to-do-list/style.css +182 -0
to-do-list/img/bg.png ADDED
to-do-list/img/iconfavs2.ico ADDED
to-do-list/index.html ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-Br">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>To Do List | jsMaulin</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="shortcut icon" href="img/iconfavs2.ico" type="image/x-icon">
9
+ </head>
10
+ <body>
11
+
12
+ </div>
13
+ <div class="container">
14
+ <h1 class="title">TO DO LIST</h1>
15
+ <div class="new-task-container">
16
+ <input
17
+ type="text"
18
+ class="new-task-input"
19
+ placeholder="Adicione uma tarefa 📃"
20
+ />
21
+
22
+
23
+ <button class="new-task-button">Adicionar</button>
24
+ </div>
25
+
26
+
27
+ <div class="tasks-container"></div>
28
+ </div>
29
+
30
+ <script src="https://kit.fontawesome.com/f04b321fc3.js" crossorigin="anonymous"></script>
31
+
32
+ <script src="./script.js"></script>
33
+ </body>
34
+ </html>
to-do-list/script.js ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ const inputElement = document.querySelector(".new-task-input");
3
+ const addTaskButton = document.querySelector(".new-task-button");
4
+
5
+ const tasksContainer = document.querySelector(".tasks-container");
6
+
7
+ const validateInput = () => inputElement.value.trim().length >0 // Se o valor da string for > que 0 então vai retornar positivo, se for < que 0 mai retornar negativo
8
+
9
+ const handleAddTask = () => {
10
+ const inputIsValid = validateInput();
11
+
12
+ console.log(inputIsValid);
13
+
14
+ if (!inputIsValid) {
15
+ return inputElement.classList.add("error");
16
+ }
17
+
18
+ const taskItemContainer = document.createElement("div");
19
+ taskItemContainer.classList.add("task-item");
20
+
21
+ const taskContent = document.createElement("p");
22
+ taskContent.innerText = inputElement.value;
23
+
24
+ taskContent.addEventListener("click", () => handleClick(taskContent));
25
+
26
+ const deleteItem = document.createElement("i");
27
+ deleteItem.classList.add("fa-solid")
28
+ deleteItem.classList.add("fa-trash")
29
+
30
+ deleteItem.addEventListener("click", () =>
31
+ handleDeleteClick(taskItemContainer, taskContent));
32
+
33
+ taskItemContainer.appendChild(taskContent);
34
+ taskItemContainer.appendChild(deleteItem)
35
+
36
+ tasksContainer.appendChild(taskItemContainer);
37
+
38
+ inputElement.value = "";
39
+
40
+ updateLocalStorage()
41
+ };
42
+
43
+ const handleClick = (taskContent) =>{ //Listar a tarefa como concluida com clique do usuario
44
+ const tasks = tasksContainer.childNodes;
45
+
46
+ for (const task of tasks) {
47
+ const currentTaskIsBeingClicked = task.firstChild.isSameNode(taskContent)
48
+
49
+ if (currentTaskIsBeingClicked) {
50
+ task.firstChild.classList.toggle("completed");
51
+ }
52
+ }
53
+
54
+ updateLocalStorage()
55
+ }
56
+
57
+ const handleDeleteClick = (taskItemContainer, taskContent) => { //Deletar a tarefa com clique do usuario
58
+ const tasks = tasksContainer.childNodes;
59
+
60
+ for (const task of tasks) {
61
+ const currentTaskIsBeingClicked = task.firstChild.isSameNode(taskContent)
62
+ if (currentTaskIsBeingClicked) {
63
+ taskItemContainer.remove();
64
+ }
65
+ }
66
+
67
+ updateLocalStorage()
68
+ };
69
+
70
+ const handleInputChange = () => {
71
+ const inputIsValid = validateInput();
72
+ if (inputIsValid) {
73
+ return inputElement.classList.remove("error");
74
+ }
75
+ };
76
+
77
+ const updateLocalStorage = () => {
78
+ const tasks = tasksContainer.childNodes;
79
+
80
+ const localStorageTasks = [...tasks].map(task => {
81
+ const content = task.firstChild;
82
+ const isCompleted = content.classList.contains("completed")
83
+
84
+ return { description: content.innerText, isCompleted };
85
+ });
86
+
87
+ localStorage.setItem("tasks", JSON.stringify(localStorageTasks));
88
+ };
89
+
90
+ const refreshTasksUsingLocalStorage = () => {
91
+ const tasksFromLocalStorage = JSON.parse(localStorage.getItem("tasks"));
92
+
93
+ for (const task of tasksFromLocalStorage) {
94
+ const taskItemContainer = document.createElement("div");
95
+ taskItemContainer.classList.add("task-item");
96
+
97
+ const taskContent = document.createElement("p");
98
+ taskContent.innerText = task.description;
99
+ if (task.isCompleted) {
100
+ taskContent.classList.add("completed");
101
+ }
102
+
103
+ taskContent.addEventListener("click", () => handleClick(taskContent));
104
+
105
+ const deleteItem = document.createElement("i");
106
+ deleteItem.classList.add("fa-solid")
107
+ deleteItem.classList.add("fa-trash")
108
+
109
+ deleteItem.addEventListener("click", () =>
110
+ handleDeleteClick(taskItemContainer, taskContent));
111
+
112
+ taskItemContainer.appendChild(taskContent);
113
+ taskItemContainer.appendChild(deleteItem)
114
+
115
+ tasksContainer.appendChild(taskItemContainer);
116
+
117
+ }
118
+ };
119
+
120
+ refreshTasksUsingLocalStorage();
121
+
122
+ addTaskButton.addEventListener("click", () => handleAddTask());
123
+
124
+ inputElement.addEventListener("change", () => handleInputChange());
to-do-list/style.css ADDED
@@ -0,0 +1,182 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *{
2
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ body{
9
+ background-image: url(img/bg.png);
10
+ background-repeat: no-repeat;
11
+ width: -350px -350px;
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ margin-top: 150px;
16
+ }
17
+
18
+
19
+ .container {
20
+ background-color: rgba(0, 0, 0, 0.363);
21
+ border: 4px solid rgba(255, 255, 255, 0.747);
22
+ border-radius: 22px;
23
+ padding: 20px 20px;
24
+ width: 450px;
25
+ box-shadow: rgba(0, 0, 0, 0.89) 25px 25px 35px -10px;
26
+ text-align: center;
27
+ color: white;
28
+ transition: transform 0.8s;
29
+ }
30
+
31
+ .container:hover{
32
+ transform: scale(1.03);
33
+ }
34
+
35
+
36
+ .new-task-container{
37
+ color: rgb(255, 255, 255);
38
+ margin-top: 20px;
39
+ background-color: rgba(255, 255, 255, 0.075);
40
+ padding: 30px 30px;
41
+ border-radius: 22px;
42
+ height: 95px;
43
+ display: flex;
44
+ box-shadow: rgba(0, 0, 0, 0.842) 30px 30px 30px -10px;
45
+ transition: transform 0.6s;
46
+ outline: none;
47
+ }
48
+
49
+ .new-task-container:hover{
50
+ transform: scale(1.07);
51
+ }
52
+
53
+ .new-task-container input{
54
+ color: rgb(255, 255, 255);
55
+ flex: 3;
56
+ font-size: 19px;
57
+ border: 1px solid rgba(255, 0, 0, 0);
58
+ border-radius: 7px;
59
+ padding: 20px 20px;
60
+ font-weight: 300;
61
+ text-align: center;
62
+ display: flex;
63
+ background: rgba(0, 0, 0, 0.164);
64
+ outline: none;
65
+ box-shadow: rgba(0, 0, 0, 0.623) 30px 30px 30px -10px;
66
+ transition: transform 0.6s;
67
+ outline: none;
68
+ }
69
+
70
+ .new-task-container input:hover{
71
+ transform: scale(1.05);
72
+ }
73
+
74
+
75
+
76
+ .new-task-container input:focus{
77
+ outline: none;
78
+ border-color: rgba(255, 255, 255, 0.452);
79
+ }
80
+
81
+ .new-task-button{
82
+ color: rgb(255, 255, 255);
83
+ flex: 1;
84
+ border-radius: 7px;
85
+ font-weight: 100;
86
+ height: 33px;
87
+ background-color: rgba(255, 255, 255, 0.199);
88
+ border: 1px solid rgba(255, 255, 255, 0);
89
+ font-size: 1rem;
90
+ margin-left: 12px;
91
+ cursor: pointer;
92
+ transition: transform 0.8s;
93
+ text-shadow: black 10px 10px 10px;
94
+ box-shadow: rgb(0, 0, 0) 30px 30px 30px -10px;
95
+ }
96
+
97
+ .new-task-button:hover{
98
+ transform: scale(1.09);
99
+ }
100
+
101
+ .tasks-container {
102
+ color: white;
103
+ background-color: rgba(255, 255, 255, 0.075);
104
+ padding: 30px 20px;
105
+ margin-top: 60px;
106
+ border-radius: 15px;
107
+ width: 100%;
108
+ font-size: 20px;
109
+ font-weight: 300;
110
+ box-shadow: rgba(0, 0, 0, 0.815) 30px 30px 30px -10px;
111
+ transition: transform 0.5s;
112
+ cursor:normal;
113
+ text-shadow: rgba(0, 0, 0, 0.76) 10px 10px 10px;
114
+ align-items: self-start;
115
+
116
+ }
117
+
118
+ .tasks-container:hover{
119
+ transform: scale(1.06);
120
+ }
121
+
122
+ .task-item {
123
+ display: flex;
124
+ justify-content: space-between;
125
+ margin-bottom: 6px;
126
+ margin-top: 6px;
127
+ }
128
+
129
+ .task-item i{
130
+ color: rgba(255, 255, 255, 0.719);
131
+ transition: transform 0.5s;
132
+ cursor: pointer;
133
+ }
134
+
135
+ .task-item i:hover{
136
+ transform: scale(1.5);
137
+ }
138
+
139
+
140
+
141
+ .new-task-input::placeholder{
142
+ color: rgb(255, 255, 255);
143
+ font-size: 20px;
144
+ }
145
+
146
+ .title{
147
+ padding: 10px;
148
+ background-color: rgba(255, 255, 255, 0.075);
149
+ border-radius: 19px;
150
+ transition: transform 0.8s;
151
+ cursor: normal;
152
+ box-shadow: rgba(0, 0, 0, 0.842) 30px 30px 30px -10px;
153
+ text-shadow: rgba(0, 0, 0, 0.76) 10px 10px 10px;
154
+ }
155
+
156
+ .title:hover{
157
+ transform: scale(1.08);
158
+ }
159
+
160
+
161
+
162
+
163
+
164
+ /* Utilities */
165
+
166
+ .error{
167
+ border-radius: 9px;
168
+ color: rgb(255, 0, 0) !important;
169
+ border: 2px solid rgb(255, 20, 20) !important;
170
+
171
+ }
172
+
173
+ .error::placeholder{
174
+ color: rgb(175, 26, 26) !important;
175
+ }
176
+
177
+ .completed{
178
+ text-decoration: line-through rgba(255, 30, 0, 0.945);
179
+ text-decoration-thickness: 3px;
180
+ text-shadow: black 10px 10px 10px;
181
+ cursor: normal;
182
+ }