woohooooo, I did it.

Woo hoo, I did it. I don't know if it's ok to post this here since it's not a question, but it's a solution so here goes. I was able to figure out the solution to implement a saved state and it works so nicely. I'm so elated right now. woo hoo. here is the app. Since there is a lot of code I'm just sharing the part I wrote.

else if (button.textContent === 'save') {
      const input = li.firstElementChild;
      const newName = document.createElement('span');
      newName.textContent = input.value;
      li.insertBefore(newName, input);
      li.removeChild(input);
      button.textContent = 'edit';
    }

So I took Guil Hernandez hint and undid everything we did to add the edit input field.

1. I first select the input using the first element child property.
2. Next I created the span element I wanted to replace the input with.I called it newName.
3. I then set it's text content to be the value of the input.
4. I used the input to place the new span element into the DOM using insert before.
5. I called removeChild on the input to remove it.
6. finally I changed the button's text content to say edit, which is what it was in the original state.

Woooooo!!! Sorry guys I'm just excited.

Oh I forgot to mention, I DIDN'T LOOK AT THE SOLUTION VIDEO!