Time spent was right around 90 min.

Using the image provided, this needed a little creative thinking to execute regardless of the few ways to approach this interaction. I'm not aware of the context of how this is going to be used, so I decided to build it without the button moving.

My logic for that was design driven, because if this content is used as a vertical list with other user input fields - the button moving around from left to right would be uneven from line to line, and feel a little off. So, I decided to implement this with the button locked on the right side, and do the switch with jQuery (and show you some jQuery code).

After I built the switch functionality, I realized that I could also enable the text itself as editable by calling the same class. That then lead me to to matching the image provided and, giving the user the illusion that they just clicked text and the text box came in underneath - pre-filled with the same text. I thought that was pretty cool, because it didn't need the Jeditable jQuery plugin.

Finally, ajax would have been too easy for a test for a job, so I decided to make a little mini-front-end app sort of experience instead. So I used the get method to push the new user data into the url. Then I parsed the url to refill the text area conditionally on reload. I used javascript to do this in the code to separate the 2 discreet halves of the front-end loop of actions. (Note, I used a form element to enable submission upon pressing Enter... because it felt weird without being able to do that with the in-page editing!)

I left comments in the code to describe the logic, and built the whole thing to accept a default name as a dynamic variable - so from there changes can be made on the front end by the user and the data can be passed back to the db via the url - which would make the site feel like it was ajax... but without it.

Of course, this method should never be used for data with security requirements... but it seemed like a good way to show you how I think.