Project Code Tour: Modal and Form

[00:00:00]
>> Okay, so now we get to have hopefully, the satisfying experience of seeing all of these little robot lions that are the tiny quick win projects that we've been working on, the sort of mini projects. Come together into one massive object Voltron, warrior robot, if anybody remembers this show from like the 80s.

[00:00:25]
Anyways, the idea is that all of these little kind of arbitrary exercises that we've been doing are actually like things that we can build upon and we can build them all in to An app that takes advantage of all of those different things that we have done. So if we take our various quick wins, and our now live selfie cam and the code that we needed to run to talk to the user devices and everything, and a little bit of extra niceties.

[00:01:00]
A little bit of extra UI stuff, but nothing no really new concepts that we haven't covered. Then we get MEME ME, and I can has meme is something that you too can put over your face. All right, so there's a couple different links here, [LAUGH] So sorry, they're not very easy to read.

[00:01:25]
But if you go to anjana.dev/meme-me, you will see my version of this little site, again, this is all, we recognize this from our selfie cam. If I press Allow, then all right, now I have some buttons and when I click on the take selfie, I get a modal, and it has a little preview here.

[00:01:51]
This is one of the little extra bits of code which we'll talk about. Somebody had a question earlier about how do we draw? Do we need to draw a new photo for every frame of the video stream. We don't need to, but it is useful if you wanna have a live preview of what your selfie might look like so that you can make sure you've got an amazing, or maybe I wanna do the this meme.

[00:02:17]
And when I click that take photo, it's going to now write it to this Canvas here. Now we're going to look at the code base in a second, but for now we're just having fun. Then I can click this add text button which, guess what? Another modal, did I have to rewrite the same code over and over again?

[00:02:35]
No, because you all already implemented basically a modal component for me, so we can reuse that for all these different buttons. And I can add some text, like, breaks the build and then takes a break. [LAUGH] I've already tried this out. [LAUGH] Because now it's not my problem.

[00:02:59]
If the build is broken and I take a break, then that's somebody else's problem, right? But maybe I'm like, that's not really the appropriate meme format of the image now. I want a different selfie. I can actually go in and be like, I don't know, position myself like, [LAUGH] Make an extra ridiculous one.

[00:03:21]
And guess what? We also have a little settings button where we can change the theme and it even stays changed. And so this is essentially, so we saw earlier, we didn't really draw this meme me typed text, but we drew that J S text we saw how that work we know how to draw an image to the camera.

[00:03:42]
We're going to talk about that live preview in a second, but otherwise, all of this stuff with one little extra thing to make sure that the text and the, [LAUGH] The image don't kind of clobber each other. For example, if I want to change the build or change the text, sorry, okay I don't know, do as, [LAUGH] I say, not as I do, for example.

[00:04:13]
We're clearing out the Canvas first so that we can then have a clean, and we're not just overwriting lots of different text. So we'll look at the code in a second, but essentially this is all stuff that we've already seen. With one very small exception, which is this live preview.

[00:04:35]
And we'll talk about that. So if it ever felt during this marathon of wins that I've been calling quick, but actually might not be so quick. We were just doing useless stuff that could never be actually relevant for a moderate, more than one button site, for example. No, do you have to build sites this way?

[00:04:56]
No, can you have a totally different modal class or maybe not a modal class at all? For sure, but all of those things that we've done we can pull them all together into an actual little app. And what we can do is actually save these memes if you right-click on a Canvas just in general any canvas out there it'll give you the option to save the image, same as if if you were clicking on an image or what have you.

[00:05:20]
So I can save these memes, I can send them to all my friends, I can put them in my slides for you to laugh at me, whatever, all right? So this is meme me. This is the project that we have all been secretly building the whole time, essentially.

[00:05:37]
All right, shall we go look at the code base?
>> Yep.
>> Cool., [LAUGH] Okay. So, this is at the corresponding, I need like a new line in here. The corresponding repo is my same account, slash meme me. I'm gonna want those slides later, so I'm just gonna open this in a new tab, okay.

[00:06:00]
All right, [COUGH] And Firefox is helpfully telling me here that there's still a tab here that's asking for my camera. Your browser may or may not be doing that, but that's just what that's about. Okay, so hopefully we see a lot of stuff we recognize here, other than the very unhelpful commit message.

[00:06:19]
Again, do as I say not as I do write more helpful commit messages than the word in it. But this is all I just committed this all at once to show you sort of everything so we can take a look. I remembered to do a readme fab. [LAUGH] And and what we have is again stuff that we recognize.

[00:06:37]
We have things like an index.html that has a little bit more going on than before, but essentially nothing like out of the realm of what we've been seeing. So I have a canvas here, put a little extra accessibility and all things in case it doesn't load there, put a height.

[00:07:02]
I have a few nested divs as one does for actually containing things, which divs are allowed to do, I believe. The accessibility folks can talk to me about it later. And then what I have is essentially these little steps, I call them, but you could call them whatever you want, where that corresponds to each of those different buttons, which are gonna become my modals.

[00:07:27]
So inside of each of those divs, I have the content. Remember we had that when we pass into our modal constructor, we pass in the parent, which is gonna be our little container. And then the content element, which is gonna be a little button that I've just given a class modal content to make our lives a little easier.

[00:07:48]
And then inside of that, we have whatever we need, an extra canvas for the preview, a button ideally. And then for the different models, whatever content they need. We have a couple of tech text inputs one for the top and one for the bottom text. We have our we know this one we know and love our hopefully ID dark mode label and its corresponding inputs that is a checkbox we already know how all that works.

[00:08:15]
And then I just have some links in the footer. So this is all again kind of stuff we've seen the only differences I've made a couple extra modals with slightly different inputs. And in this case a canvas which we'll talk about writing to. Okay, so that's what's happening in our index.html.

[00:08:32]
All good so far. And we're we're loading some CSS which this is just to make things you look okay. And again, not a CSS course and do not take my CSS as how you should write it cuz I'm not very good at it. But in any case, we can go take the CSS courses on Frontend Masters to make sure we're doing that part right.

[00:08:51]
But we can just use these style sheets for now. And some of these styles are, for example, using the impact font, there's a class that then it's applying that classic meme text font that impact. Okay, so that's what's happening in our HTML. All right, so if we go back into our root and pay no attention to meme.html, that's nonsense.

[00:09:15]
[LAUGH] I'm actually going to delete that in a second, but anyway, we have a main.js. And if we go into our package Jason sorry, we can see that that is hopefully in line with what we expect our package to look like, nothing really new here that we haven't talked about already today.

[00:09:35]
Yep, okay? So now if we go into our main JS, which again was referenced in our HTML same as before. Now we can see what's actually happening here. Let's zoom in a bit. Okay, so we're importing some things from some modules including our modal class for example. Which itself is using that form class, but we're not actually using that in the index.html, so we're just letting the modal take care of the form creation.

[00:10:12]
And that is all basically copy-pasted from what we did in our quick win, okay? Then we have similarly to our earlier, Dark mode quick win, we have something that's just a tiny bit different. Let's go look at it. So in our search there, in our theme we're doing all of the stuff that we do to set up our toggle, same as before.

[00:10:45]
We're just wrapping it in a function that then returns that element for the convenience of being able to decide when that gets set up in our main.js, okay? But it's all the same code you already wrote, just wrapped in a function. And again, just to prove to you, this is like the same classes and everything, we're just exporting them for use here.

[00:11:09]
And we didn't import form, but we could have if we wanted to add a whole other form, I don't know, to send an email to someone with your meme or whatever. All right, so this is all the same basic stuff that we talked about earlier.