Browser Storage (localStorage, sessionStorage)

// HTML:
// <div id="notes-app">
//   <h2>Quick Notes</h2>
//   <div class="status"></div>
//   <div class="note-form">
//     <textarea id="note-content" placeholder="Write your note here..."></textarea>
//     <button id="save-note">Save Note</button>
//   </div>
//   <div id="notes-list"></div>
// </div>

// JavaScript
document.addEventListener('DOMContentLoaded', function() {
    const noteContent = document.getElementById('note-content');
    const saveNoteBtn = document.getElementById('save-note');
    const notesList = document.getElementById('notes-list');
    const statusDiv = document.querySelector('.status');
    
    // Storage keys
    const NOTES_KEY = 'quick_notes';
    const PENDING_SYNC_KEY = 'notes_pending_sync';
    
    // Check online status and update UI
    function updateOnlineStatus() {
        if (navigator.onLine) {
            statusDiv.textContent = 'Online - Changes will sync when possible';
            statusDiv.className = 'status online';
            
            // Try to sync pending changes
            syncPendingChanges();
        } else {
            statusDiv.textContent = 'Offline - Changes saved locally';
            statusDiv.className = 'status offline';
        }
    }
    
    // Load notes from localStorage
    function loadNotes() {
        const savedNotes = localStorage.getItem(NOTES_KEY);
        return savedNotes ? JSON.parse(savedNotes) : [];
    }
    
    // Save notes to localStorage
    function saveNotes(notes) {
        localStorage.setItem(NOTES_KEY, JSON.stringify(notes));
    }
    
    // Render notes to the UI
    function renderNotes() {
        const notes = loadNotes();
        
        if (notes.length === 0) {
            notesList.innerHTML = '
No notes yet. Create your first note!
';
            return;
        }
        
        let html = '';
        notes.forEach((note, index) => {
            html += `
                

                    
${note.content.replace(/\n/g, '
')}
                    

                        ${new Date(note.timestamp).toLocaleString()}
                        

                            Edit
                            Delete
                        
                    
                
            `;
        });
        
        notesList.innerHTML = html;
        
        // Add event listeners to buttons
        notesList.querySelectorAll('.edit-note').forEach(button => {
            button.addEventListener('click', handleEditNote);
        });
        
        notesList.querySelectorAll('.delete-note').forEach(button => {
            button.addEventListener('click', handleDeleteNote);
        });
    }
    
    // Add a new note
    function addNote(content) {
        const notes = loadNotes();
        
        const newNote = {
            id: Date.now().toString(),
            content: content,
            timestamp: new Date().toISOString(),
            pendingSync: true
        };
        
        notes.unshift(newNote);
        saveNotes(notes);
        
        // Add to pending sync if online
        addToPendingSync('add', newNote);
        
        // Clear the input
        noteContent.value = '';
        
        // Render updated notes
        renderNotes();
    }
    
    // Handle editing a note
    function handleEditNote(event) {
        const noteItem = event.target.closest('.note-item');
        const index = parseInt(noteItem.dataset.index);
        const notes = loadNotes();
        
        if (index >= 0 && index < notes.length) {
            // Set the textarea content to the note content
            noteContent.value = notes[index].content;
            
            // Change the save button to update mode
            saveNoteBtn.textContent = 'Update Note';
            saveNoteBtn.dataset.mode = 'update';
            saveNoteBtn.dataset.index = index;
            
            // Focus the textarea
            noteContent.focus();
        }
    }
    
    // Handle deleting a note
    function handleDeleteNote(event) {
        const noteItem = event.target.closest('.note-item');
        const index = parseInt(noteItem.dataset.index);
        const notes = loadNotes();
        
        if (index >= 0 && index < notes.length) {
            // Confirm deletion
            if (confirm('Are you sure you want to delete this note?')) {
                const deletedNote = notes[index];
                
                // Remove the note
                notes.splice(index, 1);
                saveNotes(notes);
                
                // Add to pending sync
                addToPendingSync('delete', deletedNote);
                
                // Render updated notes
                renderNotes();
            }
        }
    }
    
    // Add operation to pending sync
    function addToPendingSync(operation, note) {
        if (!navigator.onLine) return;
        
        const pendingSync = JSON.parse(localStorage.getItem(PENDING_SYNC_KEY) || '[]');
        
        pendingSync.push({
            operation: operation,
            note: note,
            timestamp: new Date().toISOString()
        });
        
        localStorage.setItem(PENDING_SYNC_KEY, JSON.stringify(pendingSync));
    }
    
    // Sync pending changes with server
    function syncPendingChanges() {
        if (!navigator.onLine) return;
        
        const pendingSync = JSON.parse(localStorage.getItem(PENDING_SYNC_KEY) || '[]');
        
        if (pendingSync.length === 0) return;
        
        // In a real app, this would make API calls to sync with a server
        console.log('Syncing changes with server:', pendingSync);
        
        // Simulate successful sync after 1 second
        setTimeout(() => {
            // Update notes to remove pending sync flag
            const notes = loadNotes().map(note => {
                note.pendingSync = false;
                return note;
            });
            
            saveNotes(notes);
            
            // Clear pending sync
            localStorage.removeItem(PENDING_SYNC_KEY);
            
            // Update UI
            renderNotes();
            console.log('Sync completed successfully');
        }, 1000);
    }
    
    // Event Listeners
    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    
    saveNoteBtn.addEventListener('click', function() {
        const content = noteContent.value.trim();
        
        if (!content) {
            alert('Please enter some content for your note');
            return;
        }
        
        if (this.dataset.mode === 'update') {
            // Update existing note
            const index = parseInt(this.dataset.index);
            const notes = loadNotes();
            
            if (index >= 0 && index < notes.length) {
                const updatedNote = notes[index];
                updatedNote.content = content;
                updatedNote.timestamp = new Date().toISOString();
                updatedNote.pendingSync = true;
                
                saveNotes(notes);
                
                // Add to pending sync
                addToPendingSync('update', updatedNote);
                
                // Reset the form
                this.textContent = 'Save Note';
                delete this.dataset.mode;
                delete this.dataset.index;
                noteContent.value = '';
            }
        } else {
            // Add new note
            addNote(content);
        }
        
        // Render updated notes
        renderNotes();
    });
    
    // Initialize
    updateOnlineStatus();
    renderNotes();
});