-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
64 lines (44 loc) · 1.6 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
const addBtn = document.querySelector('.add');
const noteArray = JSON.parse(localStorage.getItem('notes')) || []
if (noteArray) {
noteArray.forEach(note => addNote(note))
}
addBtn.addEventListener('click', () => addNote());
function addNote(text="") {
const notesEl = document.createElement('div');
notesEl.classList.add('notes');
notesEl.innerHTML = `
<div class="tools">
<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>
`;
const editBtn = notesEl.querySelector('.edit');
const deleteBtn = notesEl.querySelector('.delete');
const main = notesEl.querySelector('.main');
const textArea = notesEl.querySelector('textarea');
main.innerHTML = text;
textArea.value = text;
deleteBtn.addEventListener('click', () => {
notesEl.remove();
updateLocalStorage()
})
editBtn.addEventListener('click', () => {
main.classList.toggle('hidden')
textArea.classList.toggle('hidden')
})
textArea.addEventListener('input', (e) => {
const {value} = e.target;
main.innerHTML = value;
updateLocalStorage()
})
document.body.appendChild(notesEl);
}
function updateLocalStorage() {
const noteList = document.querySelectorAll('textarea')
const noteArray = []
noteList.forEach(note => noteArray.push(note.value))
localStorage.setItem('notes', JSON.stringify(noteArray))
}