In the last lesson, we mentioned that it's not very good user experience to let your website simply
hang and time out once the user has submitted their details, they're not going to have much confidence
in this newsletter if we don't give them some feedback.
Right.
So let's go ahead and do that.
This is going to be a challenge for you.
How can we figure out what response code we got back after making this request?
And if that code was 200, then it probably means that things went OK.
And we're going to send the user a piece of text to be displayed in the website.
Now, if the code wasn't 200 and we got a different code, then we're going to send them a different
message.
Something about the process failed and they should try again later.
So pause the video and see if you can complete this challenge.
All right, so we know that we can get hold of the response object, that we get back from making the
request and we can tap into the status code to see whether if it was 200 or whether if it was something
else.
What if we check whether if the status code was equal to 200?
And if so, then we go ahead and use that send to send a piece of text to be displayed in the Web site.
Now, you could, of course, send a paragraph or an H1 element, but I'm just going to send a very
simple text.
I'm going to say successfully subscribed.
And if the code was not 200, then I'm going to send there was an error with signing up, please try
again.
So now let's go ahead and test it out.
When I click, sign me up, I get successfully subscribed.
And this is written in the Web site.
But let's say that the API key was wrong or if the list ID was wrong, well, then in this case, when
I try to sign up, then I get there was an error with signing up.
Please try again.
This works, but it's a bit plain, right?
Nobody wants to go on a website that looks nice initially and then after a bit of interaction, it ends
up looking really, really plain.
What if we wanted to use Bootstrap to jazz it up a bit?
Well, we can because previously we created the beginnings of the success story HTML and the failure
HTML in addition to our sign up dot org html.
Here we can include some bootstrap code that will quickly give us a nice looking page that looks a lot
better than what we had before.
And we can also include buttons and allow the user to interact with it.
So I'm going to head over to the bootstrap website and I'm going to head over to components and I'm
going to add a Jumbotron to our website, something that looks a bit like this.
So let's go ahead and copy all of this code and we're going to add HTML boilerplate.
This one is going to have a title of failure, which sounds a bit sad, but let's paste our code for
our Jumbotron and the each one is going to say, Oh.
And we're also going to have a Jumbotron in our success, not HTML, and this one is going to say.
Now, in order to use bootstrap, of course, we need our bootstrap style stylesheet, so let's go ahead
and copy that over to our success and our failure websites.
Now it's back to you for a challenge, instead of using red dots and to send these messages, can you
figure out how we can send these success and failure Web pages over instead pause the video and try
to complete the challenge?
All right, so that's going to be as simple as changing residents send to residents and file, and then
we add our directory and then we tag on our filename, which is going to be for its success dot html.
The name of this file and then this line is going to be residents and file failure dot html.
So now let's check it out, try some random stuff and let's hit sign me up and awesome.
You've been successfully sign up to the newsletter.
Look forwards.
Awesome.
Awesome content.
So that's pretty cool.
And let's test out our failure site.
There's one other problem that I'd like to address, it would be nice if they failed on signing up to
be able to try again and if they had a big button here that said try again, that takes them back to
the original page over here.
That would be pretty nice, right?
We can do this by using our page over here.
We can simply add a form that includes a submit button and this button will say try again and it will
have the action of posting to a new route, which is the failure route.
Now, our form is not going to have a class, but our button is going to get some bootstrap classes,
namely b10 b10 large b10 warning to turn it yellow.
So now let's try again to go to our failure page, and now you can see we have a try again button,
but at the moment it doesn't work because we don't yet have a route to find for the failure route that's
making a post request.
So let's do that here below our post request for the home route.
I'm going to add another one for our failure route.
And this one is going to have a completion handler that redirects the user to the home run.
So I can simply say rest, don't redirect.
And the path I want to redirect it to is simply the home route.
So now when we end up on that failure route, then when we click this button, it will take us right
back to the sign up page.
So that means when I click this button that says try again, we're going to trigger a post request to
the failure route and that is going to be caught by our server over here.
And it's going to redirect to the home route, which triggers this app doGet, and it sends the sign
up page as the file to be rendered on screen.
So that's pretty much all the functionality that we need for our very simple newsletter sign up page.
Now, there's a whole world of customization that you can add to this.
And of course, you can make it even more complex with better pages, better rendering and customizing
these pages.
But what's more important than that is how do we get our server to not just be hosted locally?
Because at the moment, this website only works when we're running our servers locally on our computer.
How can I put this onto the World Wide Web so that we can send our friends and family and clients and
customers a euro so that they can go ahead and use this website and sign up to our MailChimp list as
well?
Well, that is what we're going to tackle in the next lesson where we make our website go live so that
it's a real Web app available on the World Wide Web for all of that.
And we'll ask you on the next lesson.