-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
109 lines (101 loc) · 2.75 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
const lista = document.getElementById('lista');
const inputDescricao = document.getElementById('inputDescricao');
const btAdd = document.getElementById('btAdd');
const taskUrl = 'https://parseapi.back4app.com/classes/Task';
const headers = {
'X-Parse-Application-Id': '3SdZd5k0Ej6FRosb1GuUacNfvvpRcxxUK8X9BdJf',
'X-Parse-REST-API-Key': '0m2jn1SjzvJhfzFr3llg17XwlVfsrHmidh8GuBIv',
};
const renderizaLista = (lista, tarefas) => {
lista.innerHTML = '';
tarefas.forEach((tarefa) => {
const itemText = document.createTextNode(
`${tarefa.description} (${tarefa.done}) `
);
const buttonDelete = document.createElement('button');
buttonDelete.innerHTML = 'X';
buttonDelete.onclick = () => deleteTask(tarefa.objectId);
const buttonUpdate = document.createElement('input');
buttonUpdate.type = 'checkbox';
buttonUpdate.checked = tarefa.done;
buttonUpdate.onclick = () => updateTask(tarefa);
const listItem = document.createElement('li');
if (tarefa.done === true) {
listItem.style.textDecoration = "line-through";
}
listItem.appendChild(itemText);
listItem.appendChild(buttonDelete);
listItem.appendChild(buttonUpdate);
lista.appendChild(listItem);
});
};
const getTasks = () => {
fetch(taskUrl, { headers: headers })
.then((res) => res.json())
.then((data) => {
renderizaLista(lista, data.results);
});
};
const handleBtAddClick = () => {
const description = inputDescricao.value;
if (!description) {
alert('É necessário digitar uma descrição!');
return;
}
btAdd.disabled = true;
fetch(taskUrl, {
method: 'POST',
headers: {
...headers,
'Content-Type': 'application/json',
},
body: JSON.stringify({ description: description }),
})
.then((res) => res.json())
.then((data) => {
getTasks();
btAdd.disabled = false;
inputDescricao.value = '';
inputDescricao.focus();
console.log('data', data);
})
.catch((err) => {
btAdd.disabled = false;
console.log(err);
});
};
const deleteTask = (id) => {
fetch(`${taskUrl}/${id}`, {
method: 'DELETE',
headers: headers,
})
.then((res) => res.json())
.then((data) => {
getTasks();
console.log('data', data);
})
.catch((err) => {
console.log(err);
});
};
const updateTask = (task) => {
fetch(`${taskUrl}/${task.objectId}`, {
method: 'PUT',
headers: headers,
headers: {
...headers,
'Content-Type': 'application/json',
},
body: JSON.stringify({ done: !task.done }),
})
.then((res) => res.json())
.then((data) => {
getTasks();
console.log('data', data);
})
.catch((err) => {
console.log(err);
});
};
getTasks();
btAdd.onclick = handleBtAddClick;