-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
82 lines (73 loc) · 2.09 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
let todoInput = document.getElementById("todo-input");
let addBtn = document.getElementById("add-btn");
let itemList = document.getElementById("todo-item-list");
let inputData;
let inputDataArr = [];
function setLocalStorage() {
localStorage.setItem("todoInput", JSON.stringify(inputDataArr));
}
function getLocalStorage() {
if (localStorage.getItem("todoInput")) {
inputDataArr = JSON.parse(localStorage.getItem("todoInput"));
buildUI();
} else {
console.log("no data");
}
}
function buildUI() {
itemList.textContent=""
inputDataArr.forEach((item) => {
//create DOM elements now
let li = document.createElement("li");
let spanEl = document.createElement("span");
li.appendChild(spanEl);
spanEl.innerText = item;
li.style.cssText = "animation-name : slideIn;";
itemList.appendChild(li);
todoInput.value = "";
todoInput.focus();
//create trash btn
let trashBtn = document.createElement("i");
trashBtn.classList.add("fas", "fa-trash");
li.appendChild(trashBtn);
//create edit button
let editBtn = document.createElement("i");
editBtn.classList.add("fas", "fa-edit");
li.appendChild(editBtn);
});
}
//step 2
//add items
function addItems(event) {
inputData = todoInput.value;
inputDataArr.push(inputData);
//set to Local storage
setLocalStorage();
buildUI();
//get from local storage
}
function deleteItems(event) {
if (event.target.classList[1] === "fa-trash") {
let item = event.target.parentElement;
item.classList.add("slideOut");
item.addEventListener("transitionend", function () {
item.remove();
});
}
}
function editItem(event) {
if (event.target.classList[1] === "fa-edit") {
let editedValue = prompt("please add new twxt");
let item = event.target.parentElement;
let spanEl = item.querySelector("span");
spanEl.innerText = editedValue;
console.log(spanEl);
}
}
//step 1
//add an event listener to the button
addBtn.addEventListener("click", addItems);
itemList.addEventListener("click", deleteItems);
itemList.addEventListener("click", editItem);
//
getLocalStorage();