JavaScript Tip (2) - Using tip (1) for undo and redo function in array

https://github.com/SoftwareDevJake/JS_UndoRedo/blob/master/UndoRedo.html

GitHub - SoftwareDevJake/JS_UndoRedo

This is about undo and redo function in an array if you are dealing with changing array's value.

It'd be possible to use this in other case right?

 

For example of this code, I added four functions.

"Add" function that adds an index value into array.

"Delete" function that deletes the last index from the array.

"Undo" and "Redo" the main functions.

example of variables

These are basics for beginning.

For the current array variable "array",

for past array variable "pastArray" (for using undo),

for the value in array "index".

add function example

We get "command" by using prompt.

Then the command is "add", put current array into pastArray with tip we learned earlier.

https://soja-dev.tistory.com/12

자바스크립트 팁 (1) - 배열 안에 배열 저장

example of delete function

Make it for delete as well.

Now let's see if it works fine.

example of result

We let it show in console from webpage, so let's open developer mode on web page.

Follow steps below to open developer mode on web page.

example for opening develop mode

if you opened it, let's see the result of add and delete functions.

example of console for add and delete funcs

If they work fine, let's add Undo function.

example of extra variables

Firstable, we add more variables.

"undoArray" is for redo function later.

"undoIndex" is needed because if you use index we had before, it directly affect the current array, therefore we need another variable for undo function.

"undoCount" is for figuring out if user undo and how much times he/she used.

example of undo function

Undo shouldn't work when there was no other actions right?

So we use "if" for that, then put the current array into "undoArray" so we can add redo function later.

If we substrack "undoCount" from pastArray's size, it'll become "undoIndex".

Here what we have to be careful!

When you test at this moment, if you use add function after using undo, pastArray still has values before using undo, therefore let's get rid of all values after using undo.

example of cleaning values in pastArray

As above, I created a function for doing that.

example of using cleaning pastArray function

If you've changed as above, let's add Redo function.

example of redo function

Redo function is not available if user didn't use the undo function, so use if statement with undoCount for that situation.

After that get the array from undoArray that was saved when user used undo function.

(If you think of a stack, it'd be easier to understand, therefore I used pop to get rid of array that I had.)

 

Now we are all ready to test.

Let's see the results.

example of result for undo and redo functions

This is an example of using undo and redo with Add function.

example of undo and redo after using delete

This is an example of using undo and redo functions after using add and delete functions.