app.js

// Notes App - simple localStorage-backed notes
const STORAGE_KEY = 'notesapp.notes'
let notes = []
let editingId = null

const el = id => document.getElementById(id)
const searchInput = el('search')
const newBtn = el('newBtn')
const editor = el('editor')
const titleInput = el('noteTitle')
const contentInput = el('noteContent')
const saveBtn = el('saveBtn')
const cancelBtn = el('cancelBtn')
const notesList = el('notesList')

function loadNotes() {
    try {
        const raw = localStorage.getItem(STORAGE_KEY)
        notes = raw ? JSON.parse(raw) : []
    } catch (e) {
        notes = []
    }
}

function saveNotes() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(notes))
}

function renderNotes(filter = '') {
    notesList.innerHTML = ''
    const f = filter.trim().toLowerCase()
    const filtered = notes.filter(n => {
        if (!f) return true
        return (n.title || '').toLowerCase().includes(f) || (n.content || '').toLowerCase().includes(f)
    }).sort((a, b) => b.updated - a.updated)

    if (filtered.length === 0) {
        notesList.innerHTML = `<div class="empty">No notes yet. Click New Note to add one.</div>`
        return
    }

    for (const n of filtered) {
        const card = document.createElement('article')
        card.className = 'note-card'
        card.innerHTML = `
      <div class="note-title">${escapeHtml(n.title||'Untitled')}</div>
      <div class="note-body">${escapeHtml(n.content||'')}</div>
      <div class="note-meta">${new Date(n.updated).toLocaleString()}</div>
      <div class="card-actions">
        <button class="action" data-id="${n.id}" data-action="edit">Edit</button>
        <button class="action" data-id="${n.id}" data-action="delete">Delete</button>
      </div>
    `
        notesList.appendChild(card)
    }
}

function openEditor(note) {
    editor.classList.remove('hidden')
    editor.setAttribute('aria-hidden', 'false')
    if (note) {
        editingId = note.id
        titleInput.value = note.title || ''
        contentInput.value = note.content || ''
    } else {
        editingId = null
        titleInput.value = ''
        contentInput.value = ''
    }
    titleInput.focus()
}

function closeEditor() {
    editor.classList.add('hidden')
    editor.setAttribute('aria-hidden', 'true')
    editingId = null
    titleInput.value = ''
    contentInput.value = ''
}

function addOrUpdateNote() {
    const title = titleInput.value.trim()
    const content = contentInput.value.trim()
    if (!title && !content) return closeEditor()

    if (editingId) {
        const idx = notes.findIndex(n => n.id === editingId)
        if (idx >= 0) {
            notes[idx].title = title
            notes[idx].content = content
            notes[idx].updated = Date.now()
        }
    } else {
        const note = { id: String(Date.now()) + Math.random().toString(36).slice(2, 6), title, content, updated: Date.now() }
        notes.push(note)
    }
    saveNotes()
    renderNotes(searchInput.value)
    closeEditor()
}

function deleteNote(id) {
    if (!confirm('Delete this note?')) return
    notes = notes.filter(n => n.id !== id)
    saveNotes()
    renderNotes(searchInput.value)
}

function handleCardClick(e) {
    const btn = e.target.closest('button[data-action]')
    if (!btn) return
    const id = btn.dataset.id
    const action = btn.dataset.action
    if (action === 'edit') {
        const note = notes.find(n => n.id === id)
        if (note) openEditor(note)
    } else if (action === 'delete') {
        deleteNote(id)
    }
}

function escapeHtml(s) {
    return String(s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
}

// events
newBtn.addEventListener('click', () => openEditor(null))
cancelBtn.addEventListener('click', closeEditor)
saveBtn.addEventListener('click', addOrUpdateNote)
notesList.addEventListener('click', handleCardClick)
searchInput.addEventListener('input', e => renderNotes(e.target.value))

// keyboard shortcuts
window.addEventListener('keydown', e => {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'n') {
        e.preventDefault();
        openEditor(null)
    }
})

// init
loadNotes()
renderNotes()