Skip to content

Commit 460528c

Browse files
0Carvalh00Carvalh0
committed
feat: refazendo estilização
1 parent e90f5c6 commit 460528c

File tree

7 files changed

+259
-260
lines changed

7 files changed

+259
-260
lines changed

‎index.html

+32-25
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,69 @@
66

77
<link
88
rel="shortcut icon"
9-
href="public/images/favicon.png"
9+
href="public/icon/favicon.ico"
1010
type="image/x-icon"
1111
/>
12-
<title>To do List</title>
13-
14-
<link rel="stylesheet" href="./src/styles/reset.css" />
12+
<title>QuickTask</title>
1513

14+
<!-- CSS -->
1615
<link rel="stylesheet" href="./src/styles/index.css" />
1716

18-
<link rel="preconnect" href="https://fonts.googleapis.com" />
19-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
20-
<link
21-
href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap"
22-
rel="stylesheet"
23-
/>
24-
17+
<!-- BIBLIOTECAS -->
2518
<script
2619
src="https://kit.fontawesome.com/9bfb2428d0.js"
2720
crossorigin="anonymous"
2821
defer
2922
></script>
3023

24+
<!-- JAVASCRIPT -->
3125
<script src="./src/scripts/toDoListScript.js" defer></script>
3226
</head>
3327

3428
<body>
35-
<main>
36-
<form class="todoapp" id="add-form">
37-
<h1 class="todoapp-title title">To Do List</h1>
38-
<div class="todoapp-boxTextAdd">
29+
<main class="todoapp">
30+
<form class="todoapp__form todoapp__form--add" id="add-form">
31+
<h1 class="todoapp__title">Quick<strong>Task</strong></h1>
32+
<div class="todoapp__input-container">
3933
<input
4034
type="text"
4135
name="itask"
42-
placeholder="Digite a sua tarefa:"
36+
placeholder="Adicionar nova tarefa"
37+
class="todoapp__input todoapp__input--add"
4338
id="todoapp-addTask"
4439
/>
45-
<button type="submit" class="todo-button" id="button-Add">
46-
<i class="fa-solid fa-plus"></i>
47-
</button>
40+
<button
41+
type="submit"
42+
class="todoapp__button todoapp__button--add fa-solid fa-plus"
43+
id="button-Add"
44+
></button>
4845
</div>
49-
<ul class="tasksList-listTasks"></ul>
46+
<ul class="todoapp__tasks-list"></ul>
5047
</form>
51-
<form class="todoapp hide" id="edit-form">
52-
<div class="todoapp-boxTextAdd">
48+
49+
<form class="todoapp__form todoapp__form--edit hide" id="edit-form">
50+
<div class="todoapp__input-container">
5351
<input
5452
type="text"
5553
name="itask"
5654
placeholder="Edite a sua tarefa:"
55+
class="todoapp__input todoapp__input--edit"
5756
id="todoapp-editTask"
5857
/>
59-
<button type="submit" class="todo-button" id="button-Edit">
58+
<button
59+
type="submit"
60+
class="todoapp__button todoapp__button--edit"
61+
id="button-Edit"
62+
>
6063
<i class="fa-solid fa-pen-to-square"></i>
6164
</button>
6265
</div>
63-
<button type="button" class="todo-button" id="button-Cancel">
64-
<i class="fa-solid fa-xmark"></i>
66+
<button
67+
type="button"
68+
class="todoapp__button todoapp__button--cancel"
69+
id="button-Cancel"
70+
>
71+
<i class="fa-solid fa-xmark"></i>Cancelar
6572
</button>
6673
</form>
6774
</main>

‎public/icon/favicon.ico

49.6 KB
Binary file not shown.

‎public/images/favicon.png

-694 Bytes
Binary file not shown.

‎src/scripts/toDoListScript.js

+45-59
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const formAdd = document.querySelector("#add-form");
22
const formEdit = document.querySelector("#edit-form");
3-
const tasksList = document.querySelector(".tasksList-listTasks");
3+
const tasksList = document.querySelector(".todoapp__tasks-list");
44
const textBoxAdd = document.querySelector("#todoapp-addTask");
55
const textBoxEdit = document.querySelector("#todoapp-editTask");
66
const btnAdd = document.querySelector("#button-Add");
@@ -9,14 +9,13 @@ let toDoStorage = [];
99

1010
let oldInputValue;
1111

12-
// LOCAL STORAGE
13-
14-
if (localStorage.getItem("arrayTasks") == "") {
15-
localStorage.removeItem("arrayTasks");
12+
if (!localStorage.getItem("arrayTasks")) {
13+
localStorage.setItem("arrayTasks", JSON.stringify([]));
1614
}
1715

1816
document.addEventListener("DOMContentLoaded", () => {
19-
toDoStorage = JSON.parse(localStorage.getItem("arrayTasks"));
17+
const storedTasks = localStorage.getItem("arrayTasks");
18+
toDoStorage = storedTasks ? JSON.parse(storedTasks) : [];
2019

2120
toDoStorage.forEach((element) => {
2221
saveToDo(element);
@@ -28,88 +27,77 @@ document.addEventListener("DOMContentLoaded", () => {
2827
document.addEventListener("click", (e) => {
2928
const targetEl = e.target;
3029
const parentEl = targetEl.closest("li");
31-
const pEl = targetEl.closest("div").querySelector("p");
30+
const parentDiv = targetEl.closest("div");
31+
const pEl = parentDiv ? parentDiv.querySelector("p") : null;
3232
let taskTitle;
3333

3434
if (parentEl && parentEl.querySelector("p")) {
3535
taskTitle = parentEl.querySelector("p").innerHTML;
3636
}
3737

38-
if (targetEl.classList.contains("tasksList-taskCheck")) {
38+
if (targetEl.classList.contains("todoapp__task-check")) {
3939
targetEl.querySelector("i").classList.toggle("fa-check");
4040
pEl.classList.toggle("done");
4141

4242
toDoStorage.forEach((element) => {
43-
if (element.taskTitle == pEl.innerHTML) {
43+
if (element.taskTitle === pEl.innerHTML) {
4444
element.isChecked = !element.isChecked;
4545
}
4646
});
4747
localStorage.setItem("arrayTasks", JSON.stringify(toDoStorage));
4848
}
4949

50-
if (targetEl.classList.contains("tasksList-taskRemove")) {
50+
if (targetEl.classList.contains("todoapp__button--removeTask")) {
5151
toDoStorage = toDoStorage.filter(
5252
(element) => element.taskTitle !== taskTitle
5353
);
5454
localStorage.setItem("arrayTasks", JSON.stringify(toDoStorage));
55-
5655
parentEl.remove();
5756
}
5857

59-
if (targetEl.classList.contains("tasksList-taskEdit")) {
58+
if (targetEl.classList.contains("todoapp__button--editTask")) {
59+
oldInputValue = taskTitle; // Definindo o valor aqui
6060
toggleForms();
61-
6261
textBoxEdit.value = taskTitle;
63-
oldInputValue = taskTitle;
6462
}
6563
});
6664

6765
// CREATE TASK
6866

6967
const saveToDo = (element) => {
68+
const li = document.createElement("li");
69+
li.className = "todoapp__task";
70+
71+
const leftSide = document.createElement("div");
72+
leftSide.className = "task-LeftSide";
73+
74+
const checkSpan = document.createElement("span");
75+
checkSpan.className = "todoapp__task-check";
76+
checkSpan.innerHTML = `<i class='fa-solid ${
77+
element.isChecked ? "fa-check" : ""
78+
}'></i>`;
79+
80+
const p = document.createElement("p");
81+
p.className = "todoapp__task-name";
7082
if (element.isChecked) {
71-
tasksList.innerHTML += `
72-
<li class="tasksList-task">
73-
<div class="task-LeftSide">
74-
<span class="tasksList-taskCheck">
75-
<i class='fa-solid fa-check'></i>
76-
</span>
77-
<p class="tasksList-taskName done">${element.taskTitle}</p>
78-
</div>
79-
<div class="task-RightSide">
80-
<button
81-
type="button"
82-
class="todo-button fa-solid fa-pen-to-square tasksList-taskEdit"
83-
></button>
84-
<button
85-
type="button"
86-
class="todo-button fa-solid fa-trash tasksList-taskRemove"
87-
></button>
88-
</div>
89-
</li>
90-
`;
91-
} else {
92-
tasksList.innerHTML += `
93-
<li class="tasksList-task">
94-
<div class="task-LeftSide">
95-
<span class="tasksList-taskCheck">
96-
<i class='fa-solid'></i>
97-
</span>
98-
<p class="tasksList-taskName">${element.taskTitle}</p>
99-
</div>
100-
<div class="task-RightSide">
101-
<button
102-
type="button"
103-
class="todo-button fa-solid fa-pen-to-square tasksList-taskEdit"
104-
></button>
105-
<button
106-
type="button"
107-
class="todo-button fa-solid fa-trash tasksList-taskRemove"
108-
></button>
109-
</div>
110-
</li>
111-
`;
83+
p.classList.add("done");
11284
}
85+
p.innerText = element.taskTitle;
86+
87+
leftSide.appendChild(checkSpan);
88+
leftSide.appendChild(p);
89+
90+
const rightSide = document.createElement("div");
91+
rightSide.className = "task-RightSide";
92+
rightSide.innerHTML = `
93+
<button type="button" class="todoapp__button fa-solid fa-pen-to-square todoapp__button--editTask"></button>
94+
<button type="button" class="todoapp__button fa-solid fa-trash todoapp__button--removeTask"></button>
95+
`;
96+
97+
li.appendChild(leftSide);
98+
li.appendChild(rightSide);
99+
100+
tasksList.appendChild(li);
113101
};
114102

115103
formAdd.addEventListener("submit", (e) => {
@@ -141,7 +129,7 @@ const toggleForms = () => {
141129
};
142130

143131
const updateToDo = (text) => {
144-
const allTasks = document.querySelectorAll(".tasksList-task");
132+
const allTasks = document.querySelectorAll(".todoapp__task");
145133

146134
allTasks.forEach((task) => {
147135
let taskText = task.querySelector("p");
@@ -150,9 +138,8 @@ const updateToDo = (text) => {
150138
taskText.innerText = text;
151139

152140
toDoStorage.forEach((objTask, indexTask) => {
153-
if (toDoStorage[indexTask].taskTitle == oldInputValue) {
141+
if (toDoStorage[indexTask].taskTitle === oldInputValue) {
154142
objTask.taskTitle = text;
155-
156143
localStorage.setItem("arrayTasks", JSON.stringify(toDoStorage));
157144
}
158145
});
@@ -174,6 +161,5 @@ formEdit.addEventListener("submit", (e) => {
174161

175162
btnCancelEdit.addEventListener("click", (e) => {
176163
e.preventDefault();
177-
178164
toggleForms();
179165
});

0 commit comments

Comments
 (0)