Intermediate
A toast queue with timeouts
Each click on #save adds a toast, but toasts pile up forever.
Show at most 3 toasts (class toast) at a time; extra ones wait in the queue and appear when space frees up.
Each toast disappears 1000ms after it appears on screen. Its × button (class dismiss) removes it at once.
Announce toasts to screen readers: give the list role="status" (or aria-live="polite").
What Check tests
- Five quick saves show only three toasts
- After about a second, the first three are gone and the two queued ones show
- A second later, all toasts are gone
- The × button removes a toast at once
- Toasts are in a live region
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.