-
-
Notifications
You must be signed in to change notification settings - Fork 23
/
script.js
114 lines (99 loc) · 3.92 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
document.addEventListener('DOMContentLoaded', () => {
const noteTitle = document.getElementById('note-title');
const noteContent = document.getElementById('note-content');
const addNoteButton = document.getElementById('add-note');
const notesContainer = document.getElementById('notes-container');
let notes = JSON.parse(localStorage.getItem('notes')) || [];
let isEditing = false;
let editingIndex = null;
const saveNotes = () => {
localStorage.setItem('notes', JSON.stringify(notes));
};
const renderNotes = () => {
notesContainer.innerHTML = '';
notes.forEach((note, index) => {
// Ensure note has a position property
if (!note.position) {
note.position = { left: '0px', top: '0px' };
}
const noteElement = document.createElement('div');
noteElement.classList.add('note');
noteElement.setAttribute('data-index', index);
noteElement.style.left = note.position.left;
noteElement.style.top = note.position.top;
noteElement.style.transform = `translate(${note.position.left}, ${note.position.top})`;
noteElement.innerHTML = `
<div class="note-title">${note.title}</div>
<div class="note-content">${note.content}</div>
<div class="note-buttons">
<button class="edit-button" onclick="editNote(${index})">Edit</button>
<button class="delete-button" onclick="deleteNote(${index})">Delete</button>
</div>
`;
notesContainer.appendChild(noteElement);
makeDraggable(noteElement);
});
};
const addNote = () => {
const title = noteTitle.value.trim();
const content = noteContent.value.trim();
if (title && content) {
if (isEditing) {
notes[editingIndex] = {
...notes[editingIndex],
title,
content
};
isEditing = false;
editingIndex = null;
addNoteButton.textContent = 'Add Note';
} else {
notes.push({
title,
content,
position: { left: '0px', top: '0px' }
});
}
saveNotes();
renderNotes();
noteTitle.value = '';
noteContent.value = '';
}
};
window.editNote = (index) => {
const note = notes[index];
noteTitle.value = note.title;
noteContent.value = note.content;
isEditing = true;
editingIndex = index;
addNoteButton.textContent = 'Update Note';
};
window.deleteNote = (index) => {
notes.splice(index, 1);
saveNotes();
renderNotes();
};
const makeDraggable = (element) => {
interact(element)
.draggable({
onmove: (event) => {
const target = event.target;
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.transform = `translate(${x}px, ${y}px)`;
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: (event) => {
const index = event.target.getAttribute('data-index');
const x = event.target.getAttribute('data-x');
const y = event.target.getAttribute('data-y');
notes[index].position.left = `${x}px`;
notes[index].position.top = `${y}px`;
saveNotes();
}
});
};
addNoteButton.addEventListener('click', addNote);
renderNotes();
});