-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
63 lines (49 loc) · 2.04 KB
/
main.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
function editPost(e) {
inputField.value = e.target.parentElement.previousElementSibling.innerHTML;
e.target.parentElement.previousElementSibling.previousElementSibling.parentElement.remove()
};
function addListenersToEditButtons(){
const buttonCollection = document.querySelectorAll(".edit__btn");
console.log(buttonCollection, 'btn');
const lastButton = buttonCollection[buttonCollection.length - 1];
lastButton.addEventListener("click", editPost);
}
function deletePost(eventObject) {
const buttonClicked = eventObject.target;
const todoItem = buttonClicked.parentNode.parentNode.parentNode;
todoItem.remove();
}
function addListenersToDeleteButtons() {
const buttonCollection = document.querySelectorAll(".delete__btn");
const lastButton = buttonCollection[buttonCollection.length - 1];
lastButton.addEventListener("click", deletePost);
}
function showTodoOnTheScreen(todo) {
const listOfTodo = document.querySelector("#todo__list");
const li = document.createElement("li");
li.classList.add("todo__section--todoItem");
li.innerHTML = `<div class="Todo-div">
<input class="todo__checkbox" type="checkbox" />
<span class="todo__text"> ${todo} </span>
<div class="todo__actions--wrapper">
<button id="edit_btn" class="todo__actions edit__btn">
edit
</button>
<button id="delete_btn" class="todo__actions delete__btn">
delete
</button>
</div>
</div>`;
listOfTodo.appendChild(li);
addListenersToDeleteButtons();
addListenersToEditButtons();
}
function todoFormSumbitHandler(eventObject) {
eventObject.preventDefault();
inputField = document.querySelector("#todo__input");
const todoValue = inputField.value;
showTodoOnTheScreen(todoValue);
inputField.value = ""
}
const todoForm = document.getElementById("form");
todoForm.addEventListener("submit", todoFormSumbitHandler);