Elysia Notes - Vanilla JS

// Wire up nav + auth buttons
function bindNavButtons() {
  document.getElementById('btn-sign-in').addEventListener('click', signIn);
  document.getElementById('btn-sign-out').addEventListener('click', signOut);

  document.getElementById('btn-admin-login').addEventListener('click', () => {
    // Open modal, store admin key in localStorage, mark body as admin-active, then load admin notes
    openAdminLoginModal();
  });

  document.getElementById('btn-admin-logout').addEventListener('click', () => {
    localStorage.removeItem('adminApiKey');
    document.body.classList.remove('admin-active');
    // Clear admin table UI
    document.getElementById('admin-table-container').innerHTML = '';
  });
}

// React to Clerk auth changes and keep the top bar in sync
onChange(({ user }) => {
  const body = document.body;
  const userNameEl = document.getElementById('user-name');

  if (user) {
    body.classList.add('signed-in');
    body.classList.remove('signed-out');
    userNameEl.textContent =
      user.firstName || user.emailAddresses?.[0]?.emailAddress || 'User';
    // Load private notes after sign-in
    loadPrivateNotes();
  } else {
    body.classList.remove('signed-in');
    body.classList.add('signed-out');
    userNameEl.textContent = '';
    // Clear private notes UI and counts when signed out
    privateNotes = [];
    document.getElementById('private-count').textContent = '0';
    document.getElementById('private-notes-grid').innerHTML = '';
  }
});

All Notes (Admin View)

View and manage all notes in the system

Delete notes whose content or title matches the regex

Loading admin notes...

// Fetch all notes with admin API key
async function loadAdminNotes() {
  const key = localStorage.getItem('adminApiKey');
  const res = await fetch('/api/notes/all', {
    headers: { 'X-API-Key': key },
  });
  const notes = await res.json();
  renderAdminTable(notes);
}

// Delete note via REST API
async function deleteNote(id) {
  const key = localStorage.getItem('adminApiKey');
  await fetch(`/api/notes/${id}/admin`, {
    method: 'DELETE',
    headers: { 'X-API-Key': key },
  });
  await loadAdminNotes();
}

Public Notes

Visible to everyone

Loading public notes...

// In-memory state for this page
let publicNotes = [];

// Fetch public notes (no auth required)
async function loadPublicNotes() {
  const res = await fetch('/api/public-notes');
  publicNotes = await res.json();
  renderPublicNotes();
}

// Render cards + update nav badges
function renderPublicNotes() {
  const grid = document.getElementById('public-notes-grid');
  grid.innerHTML = '';

  if (!publicNotes.length) {
    grid.innerHTML = '<div class="empty-state">No public notes yet. Create one!</div>';
    document.getElementById('public-count').textContent = '0';
    const signedInBadge = document.getElementById('public-count-signed-in');
    if (signedInBadge) signedInBadge.textContent = '0';
    return;
  }

  for (const note of publicNotes) {
    // noteCard(...) returns a DOM element for a single note
    grid.appendChild(noteCard(note));
  }

  document.getElementById('public-count').textContent = String(publicNotes.length);
  const signedInBadge = document.getElementById('public-count-signed-in');
  if (signedInBadge) signedInBadge.textContent = String(publicNotes.length);
}

// Create a public note then refresh the grid
async function createPublicNote(title, content) {
  await fetch('/api/public-notes', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, content, isPublic: true }),
  });
  await loadPublicNotes();
}

Your Notes

Only you can see these notes

Loading private notes...

// In-memory state for this page
let privateNotes = [];

// Fetch private notes with Bearer token from Clerk
async function loadPrivateNotes(token) {
  const res = await fetch('/api/private-notes', {
    headers: { Authorization: `Bearer ${token}` },
  });
  privateNotes = await res.json();
  renderPrivateNotes();
}

// Render private note cards and update count badge
function renderPrivateNotes() {
  const grid = document.getElementById('private-notes-grid');
  grid.innerHTML = '';

  if (!privateNotes.length) {
    grid.innerHTML = '<div class="empty-state">No private notes yet.</div>';
    document.getElementById('private-count').textContent = '0';
    return;
  }

  for (const note of privateNotes) {
    grid.appendChild(privateNoteCard(note));
  }

  document.getElementById('private-count').textContent = String(privateNotes.length);
}

// Create a private note then refresh the grid
async function createPrivateNote(title, content, token) {
  await fetch('/api/private-notes', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({ title, content, isPublic: false }),
  });
  await loadPrivateNotes(token);
}