Never made an Undo button before last night and never really thought about how they work tbh. But it makes sense that if you want to be able to undo something you've deleted you'll need to save the thing you're trying to delete somewhere, at least for a little while.
Turns out that somewhere is called localStorage! Or at least can be localStorage.
Anyway, so now, when she clicks the Delete Recipe button on a recipe, that click actually saves a copy of the entire recipe object including the image into localStorage and then pops the delete confirmation modal. Clicking the Delete button on the modal submits the form and actually deletes the recipe from the database.
And I added an Undo button on the "Recipe deleted!" success alert that re-adds the recipe from localStorage in case she gets that far on accident, and then it clears localStorage.
I wasn't sure where to put the Undo button really, but I think it makes sense in the alert since it's the thing that pops up on the screen the moment she clicks Delete for real. And it's a dismissable alert that won't disappear on its own on a timer or anything, so it'll just be there if she needs it until she navigates away.
#WebDev #WebDevelopment #HTML #CSS #JavaScript
