Undo Button and Leaderboard

Lesson 10 of 10 · 7 min · Free, no account needed

What you will learn

Undo and Redo run on two stacks: Undo moves the newest action from done to undone, Redo moves it back.
A new action empties the undone stack, or Redo would bring back a different history.
A top 3 only needs a few comparisons per new score: keep it sorted and let the 4th fall off.
A chatbot's memory window is a queue of fixed length: the oldest message leaves first.

Build the two features every app has: Undo, and a Top 3.
Start with a tiny paint app. Draw something with 5 strokes.
Redo needs a second stack.
Undo puts strokes aside on undone; Redo takes them back. Do all three tasks.
Both stacks hand back their newest item. Undo needs the newest stroke you did; Redo needs the newest stroke you undid. After a new stroke, the undone strokes belong to an old version of the drawing, so they're thrown away.
The plan: two stacks.
done is a stack of everything you did. undone is a stack of what you took back.
undo(): pop from done, push onto undone. redo(): pop from undone, push onto done.
Any new action is pushed onto done, and undone is emptied.
Write undo().
Two undos should leave red on done, and green then blue on undone.
Someone else's Redo has a bug.
Watch the demo, then pick the fix.
Your code, behind your drawing's Undo button.
Each press runs your undo() for real.
Now the leaderboard: a live top 3.
Scores arrive one at a time. Put each one in its place, or out.
Top 3 live.
Twelve scores, fast. Tap where each goes.
A chatbot's memory is a queue too.
This bot can only keep 4 messages. When a new one comes in, which does it forget?
Your project card.
Your drawing, your Undo, your leaderboard.

Lessons are interactive and need JavaScript. Turn it on to play them.