No entries yet - be the first to post.
`;
return;
}
list.innerHTML = entries.map(e => `
${escapeHtml(e.text)}
${relativeTime(e.createdAt)}
`).join('');
}
```
- **Relative time, not a raw timestamp.** "just now" / "2 min ago" reads better than `2026-05-31 14:03:22`; fall back to a date for anything older than a day.
```js
function relativeTime(ts) {
const s = Math.floor((Date.now() - new Date(ts).getTime()) / 1000);
if (s < 60) return 'just now';
if (s < 3600) return `${Math.floor(s / 60)} min ago`;
if (s < 86400) return `${Math.floor(s / 3600)} hr ago`;
return new Date(ts).toLocaleDateString();
}
```
- **Live character counter whenever an input has a `maxlength`.** Show the count so the limit isn't a surprise on submit.
```js
const input = document.querySelector('[data-testid="entry-input"]');
const counter = document.querySelector('[data-testid="char-count"]');
const max = Number(input.getAttribute('maxlength'));
input.addEventListener('input', () => { counter.textContent = `${input.value.length} / ${max}`; });
```
- **Confirm a successful submit.** After a post lands, clear the input and show a brief, self-dismissing confirmation instead of leaving the user guessing whether it worked.
```js
function toast(msg) {
const t = document.querySelector('[data-testid="toast"]');
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 2000);
}
```
User text goes straight into the DOM, so always escape it (`escapeHtml` above) or use `textContent` - never drop raw input into `innerHTML`.
## Forms
**Label every control.** Each `