-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
84 lines (75 loc) · 2.93 KB
/
script.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
var input = document.querySelector(".input")
var adicionar = document.querySelector(".adicionar")
var qtdTarefas = document.querySelector(".num_tarefas")
var listaTarefas = document.querySelector(".todo_list__tarefa")
var mainContainer = document.querySelector(".todo_list")
var errorElement = document.querySelector(".erro")
var errorMessage = document.querySelector(".erro > p")
var errorElement
var maxLista = 6
adicionar.addEventListener('click', function(){
var tamLista = document.querySelectorAll(".tarefa")
var textInput = input.value
if (tamLista.length < maxLista && textInput.length >= 6) {
criarTarefa(textInput)
adicionar.classList.add("spin")
setTimeout(()=>{
adicionar.classList.remove("spin")
}, 100)
input.value = "" //clear input
}
else {
if (errorElement.classList.contains("invisible")) {
errorElement.classList.remove("invisible")
errorElement.classList.add("full")
setTimeout(()=>{
errorElement.classList.remove("full")
}, 250)
if (textInput.length < 6)
errorMessage.innerHTML = "Insira no mínimo 6 caracteres."
else {
errorMessage.innerHTML = "A lista de tarefas está cheia!"
}
setTimeout(()=>{
errorElement.classList.add("invisible")
}, 5000)
} else return
}
tamLista = document.querySelectorAll(".tarefa") //refresh
qtdTarefas.innerHTML = `${tamLista.length}`
})
var criarTarefa = (text)=> {
var itemLista = document.createElement("li")
var checkbox = document.createElement("input")
var nomeTarefa = document.createElement("p")
var removeBtn = document.createElement("button")
var trashIcon = document.createElement("span")
nomeTarefa.append(`${text}`)
checkbox.setAttribute("type", "checkbox")
removeBtn.classList.add("remover")
removeBtn.addEventListener('click', function(event){
removerTarefa(event)
})
itemLista.classList.add("tarefa")
trashIcon.classList.add("material-symbols-outlined")
trashIcon.innerHTML = "delete"
checkbox.classList.add("done")
checkbox.addEventListener('change', function(event){
if (event.currentTarget.checked == true) {
itemLista.classList.add("concluido")
} else {
itemLista.classList.remove("concluido")
}
})
removeBtn.appendChild(trashIcon)
itemLista.appendChild(checkbox)
itemLista.appendChild(nomeTarefa)
itemLista.appendChild(removeBtn)
listaTarefas.appendChild(itemLista)
}
var removerTarefa = (event)=>{
var elementoClicado = event.currentTarget.parentElement
elementoClicado.remove()
var tamLista = document.querySelectorAll(".tarefa")
qtdTarefas.innerHTML = `${tamLista.length}`
}