Stretch goal: undo

[matjack1]

Think about implementing an undo function when deleting.

That's really cool by the way.

[ianniscamillieri]

I'm interested in this challenge.
Any advice is welcome :-)

My approach would be:

• in logic.js, implement basic funtions:
  • record every new state in a "stateHistory" array with .push()
  • limit this array length (let's say to 10 records) with .shift()
• create the 'undo' and 'redo' buttons in HTMLM and add them some 'EventListener' in dom.js
• when event, "time travel" in history by "moving" through this array index with an incremented/decremented variable
• record/render the indexed state in the dom.js using something to do with this:

var update = function(newState) {
    state = newState;
    renderState(state);
  };

I must confess that I've no idea of how to do this in a TDD way :-(

[matjack1]

@ianniscamillieri

some implementation ideas, they might be wrong, feel free to ignore me:

1. don't set a limit on the history, just keep pushing, don't worry (you won't finish your memory :P)
2. together with state you can save an array of states
3. save a pointer to the current state (which normally is just statesArray.length - 1). You change it only when you hit undo or redo
4. When you change the state without undo and redo you need to slice the array to the current position and push on top

regarding TDD instead:

1. I would implement some pure functions, like saveState, undo, redo, to which you pass an array of states and return the new expected one
2. actually it might be useful to represent the history not only as an array but as an object with an array of states and the pointer to the current state, so you pass this object around and keep everything pure in the logic

Is that any useful?