-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
70 lines (51 loc) · 1.8 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
const addButton = document.querySelector("#add");
const updateLSData = () => {
const textAreaData = document.querySelectorAll("textarea");
const notes = [];
textAreaData.forEach((note) => {
return notes.push(note.value);
})
localStorage.setItem("notes", JSON.stringify(notes));
}
const addNewNote = (text = '') => {
const note = document.createElement('div');
note.classList.add('note');
const htmlData = `
<div class="operation">
<button class="edit"> <i class="fas fa-edit"></i> </button>
<button class="delete"> <i class="fas fa-trash-alt"></i> </button>
</div>
<div class="main ${text ? "" : "hidden"}"></div>
<textarea class="${text ? "hidden" : ""}"></textarea>
`;
note.insertAdjacentHTML('afterbegin',htmlData);
//Getting the referances
const editButton = note.querySelector(".edit");
const delButton = note.querySelector(".delete");
const mainDiv = note.querySelector(".main");
const textArea = note.querySelector("textarea");
//Deleting the Note
delButton.addEventListener('click', () => {
note.remove();
updateLSData();
})
//Toggle using Edit button the Note
textArea.value = text;
mainDiv.innerHTML = text;
editButton.addEventListener('click', () => {
mainDiv.classList.toggle("hidden");
textArea.classList.toggle("hidden");
})
textArea.addEventListener('change', (event) => {
const value = event.target.value;
mainDiv.innerHTML = value;
updateLSData();
})
document.body.appendChild(note)
}
//Getting data from LocalStorage
const notes = JSON.parse(localStorage.getItem('notes'));
if(notes){
notes.forEach((note) => addNewNote(note))
}
addButton.addEventListener("click", () => addNewNote());