So I'll just copy everything from the form to start and I'm going to comment things on and off as we
go.
So look at our form right now.
Quite ugly.
Let's start by taking a look at well, line height is simple, but border none.
But that will do if you will make it bigger.
If you look at the form down here as I refresh, I don't know if you could see, but a border went away,
the default border.
Then what I'm doing is adding in a line at the bottom.
And actually what will make this easier is if I just show you the finished app.
Just a moment.
Here you go.
See, we have that white line running underneath.
So that's what I just added in.
It's very hard to tell because we still have the rest of the form there.
So the next thing, let's make the background transparent so it's easier to see, even though it's very
small on the screen right now.
Now there's no white background.
Then a couple of other things.
I made the font.
Whoops, get rid of that, made the font size bigger, made the form or the input itself bigger, and
then included a margin, a colour and some padding.
Also, I'm using a class here.
I could also just call this input, but what's being styled is not the form itself.
But if you look here.
We have a class equals form.
So it's the input right here.
Refresh now and we're getting closer.
Let's go back to 100.
One thing that you may notice is when I click here, I get this annoying focus effect.
We can get rid of that with CSS.
Which if we go to the bottom, we've got this input.
Type equals text focus.
And what this will do is say when an input with typical text is focused, when someone clicks on it,
there should be no outline.
So if we save now and try it, I don't get that weird outline.
Also, if you notice, I have the text white here.
I don't know why I decided to do that.
This is placeholder text is what this is.
So as soon as they start typing, it turns white.
But the placeholder is dark to change.
Placeholder text is a bit annoying.
I'm not going to even bother spending much time on what this is.
But if you notice, there's this fancy basically it's a CSS three browser specific way of doing this
where we're targeting the input placeholder text and I'm setting the color to be slightly see through.
So now if I do it, oh, that's not what I wanted to refresh.
Now, if I do it, it's slightly transparent, but I start typing.
There we go.
Okay.
Moving on along.
That takes care of our form for the most part.
Now we've got the button.
The button is pretty straightforward.
Let me format this a little better.
I'll just copy it all over.
And save mainly what I'm doing we can actually get rid of this is adding in a three pixel solid border.
Then I'm making the font size bigger.
I'm making the color while changing the color, adding some padding, adding a background color.
And then so the color here is referring to the text, a border radius to make it rounded and then making
it slightly see through again.
So you can see that change is made.
I'm not a designer, so I'm sure there are many better ways things we could do to just make this look
better.
I'm not terribly happy with it, but it's good enough for my escape course, so that's pretty much it
for the button.
Which then leaves us with basically positioning things and formatting them.
How do we get this to be centered vertically, roughly vertically in the page, which is what we did
here, what I did here.
And it's not too bad.
All that we need to do is change our markup a little bit.
So we've got basically two divs that everything is wrapped in.
The first one contains everything, and then there's a second one that also wraps around everything.
The first one I just called Flex Container, and the second one give a class of container.
I'll just copy this and paste it over into homed edges.
But at the same content.
We've got to join us.
We've got our paragraph, our form.
But now we also have these two divs and on its own, by refresh, nothing changes.
However, if we add in this a little bit of CSS here.
But this will do it to help position things vertically so we can put this and we can put it wherever
we want.
But I'll put it towards the top.
Now if I save and I refresh the page.
Now we've got everything vertically centered.
So this isn't a course on CSIS, so it's not a course on things like Flexbox or positioning or what
these fields do.
But this is a nice and easy way to position things.
Well, relatively easy.
And so we're basically done here just to review what we did.
The first thing that we did was to allow or to set up our app so that it was serving a public directory,
which was this fancy line here.
Everything inside the public directory is now available in our views.
So what I'm going to do, I'm actually going to close down our CSS and markup.
So we just focus on what we actually have.
So then in our home edges we can link to APTS.
We do need that slash.
And it's referring to this access there.
Okay.
So then aside from that, we added a font and then in our CSS, we added a bunch of styles which we
mainly copy and pasted.
It's not the point of this course, but things like changing the font, adding a text shadow, changing
colours, adding the background image, changing the background image size, how it's positioned or
how it size taking up the whole screen but not overwhelming it.
And then also the font weight, making our font lighter weight.
Then we've got our form and our button that we formatted and then also we position things using these
two divs and styling those.
One thing that we could do to make this a little bit more kosher is to add a head and a body to it.
So if you're familiar with HTML, you've probably been asking why we haven't done this.
You don't.
I mean, we should have it there, but we don't have to have it a browser.
We'll add it automatically, but it's definitely an improvement to follow convention, to do to not
rely on a browser to do that for us.
So now we've got a nice officially formatted kosher home file and just double check that it still works.
All right.
And let's make sure our form still works.
No reason it shouldn't.
But let's add in a Jared at gmail.com and we hit join now and we see we've gotten up to 506 now and
we could go over to my SQL run the same query select star from users order by created at descending
this time limit one and we get Jared at Gmail and we get the correct timestamp and we're officially
done with this app.
So if you wanted to, of course you could change, you could create a second page to redirect you that
said thank you or congratulations, or you could restyle this, or you could collect more information
if you wanted a challenge instead of just an email, collect a name or a birthday or a phone number
that's more useful than an email if people will give it away at least.
So this was a lot two sections just to make this work.
Although if we really think about it, the bulk of it was introducing things like Node and NPM, and
then my SQL package in CSS and HTML is so much groundwork for for a simple web app.
But the MySQL part was super easy.
Hopefully creating a table and inserting a single thing or selecting account stuff that we've been doing
for a long time in this course.
So hopefully you feel good about that.
And this was more of just a high level survey of creating an app, but I wanted you to feel like you
leave this course making something, even if it is simple.
But you've now seen how all the parts fit together.