Loading
Current section: Complex Structures 5 exercises
Problem

Interactive Image Management

Transcript

00:00 Let's add a delete button and an add a button. So here's the solution, this is what you're working toward. We've got our delete, we've got our add image. We can add as many of these images as we like and delete them as well. On top of that, all of the rest of this stuff will still continue to work. So if I add two images and we have alt text for them,

00:18 so soccer and cuddle, and we submit that and if we take a look at our alt text, that cuddle is still there and soccer is right there. So that is working perfectly and then we can swap these, that still will work. So cute and submit, that all is working and you know what's really,

00:38 really cool is that because the way that this is constructed thanks to Conform and their dedication to progressive enhancement, even if the user's Internet is very, very slow and so the JavaScript download is taking forever or something, this still works without JavaScript. So take a look at this.

00:57 I refresh the page and there's no JavaScript going on. I hit add image and it literally adds an image. I don't even like, wow, that is like try to do that without Conform. It is not straightforward. So we can add this image,

01:13 we'll do the cuddling one and you'll notice that the preview doesn't work, that requires JavaScript, so that's not going to work. But everything else still works, which just blows my mind. It's just incredible, the level of progressive enhancement that we have with Conform.

01:31 So anyway, again, most of the time users don't really care, but what's really cool about this level of progressive enhancement is that it's just a really nice foundation to build your enhancements on top of, and I think it gives a simpler mental model. That's why I think it's so cool. So anyway, you've got a fair bit of work to do.

01:49 It's actually not as much as you might expect, but we've got some action work to do. We've got some UI work to do, of course, adding those buttons. We've got one little funny quirk about the web that we need to deal with, because these buttons are actually submit buttons. So we've got one little funny thing to deal with,

02:09 so that when you hit enter on that input, it actually submits the right thing. So you got one little funny thing, you got to deal with that. Then we're going to be using a couple of Conform utilities in our UI for handling this button as well as handling that button.

02:26 So you've got some fun stuff to do. Let's get working.