Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const notesGrid = document.getElementById('notesGrid');
+ const newNoteBtn = document.getElementById('newNote');
+ const toggleViewBtn = document.getElementById('toggleView');
+ const noteTemplate = document.getElementById('noteTemplate').content;
+
+ // Load saved notes from localStorage
+ loadNotes();
+
+ newNoteBtn.addEventListener('click', createNewNote);
+ toggleViewBtn.addEventListener('click', toggleView);
+
+ function createNewNote() {
+ const noteClone = document.importNode(noteTemplate, true);
+ const noteElement = noteClone.querySelector('.note-card');
+
+ // Add event listeners for edit and delete
+ noteElement.querySelector('.edit-btn').addEventListener('click', () => editNote(noteElement));
+ noteElement.querySelector('.delete-btn').addEventListener('click', () => deleteNote(noteElement));
+
+ notesGrid.appendChild(noteElement);
+ saveNotes();
+ }
+
+ function editNote(noteElement) {
+ const title = noteElement.querySelector('.note-title');
+ const content = noteElement.querySelector('.note-content');
+
+ title.contentEditable = true;
+ content.contentEditable = true;
+
+ title.focus();
+
+ // Save on blur
+ title.addEventListener('blur', saveNotes);
+ content.addEventListener('blur', saveNotes);
+ }
+
+ function deleteNote(noteElement) {
+ noteElement.remove();
+ saveNotes();
+ }
+
+ function toggleView() {
+ notesGrid.classList.toggle('grid-view');
+ notesGrid.classList.toggle('list-view');
+ toggleViewBtn.textContent = notesGrid.classList.contains('grid-view') ? 'List View' : 'Grid View';
+ }
+
+ function saveNotes() {
+ const notes = [];
+ document.querySelectorAll('.note-card').forEach(note => {
+ notes.push({
+ title: note.querySelector('.note-title').textContent,
+ content: note.querySelector('.note-content').innerHTML
+ });
+ });
+ localStorage.setItem('notes', JSON.stringify(notes));
+ }
+
+ function loadNotes() {
+ const savedNotes = JSON.parse(localStorage.getItem('notes')) || [];
+ savedNotes.forEach(noteData => {
+ const noteClone = document.importNode(noteTemplate, true);
+ const noteElement = noteClone.querySelector('.note-card');
+
+ noteElement.querySelector('.note-title').textContent = noteData.title;
+ noteElement.querySelector('.note-content').innerHTML = noteData.content;
+
+ // Add event listeners
+ noteElement.querySelector('.edit-btn').addEventListener('click', () => editNote(noteElement));
+ noteElement.querySelector('.delete-btn').addEventListener('click', () => deleteNote(noteElement));
+
+ notesGrid.appendChild(noteElement);
+ });
+ }
+ });