vibecodai logovibecodai

Quest 10 of 10 · 💬 · Free · No setup

Chat App

Structure a message list and form, style bubbles, then append messages with createElement — no WebSocket server needed.

  • In-browser live preview
  • Saved on this device
  • Unlocks: DOM lists — append messages and handle forms

Part of Web Dev Quests · Prefer prompts? Vibe Code Studio →

Step: HTML

Chat layout

Structure a message list and input form.

Forms prevent page reloads when you handle submit in JavaScript with preventDefault().

Your quest

Add a username label at the top and a timestamp on each message.

Edit HTML

HTML
Live preview