In this video we're going to wrap up the weather application.
The goal here is to take the messages which are printing to the council and have them show up in a browser
instead and you can put them wherever you like.
I'm gonna put the messages just below the form.
Now what sort of messaging are we going to show.
Well if things go wrong we'll show the error.
If things go well we'll show the location and the forecast.
Now the first step to getting this done is to give ourselves a place in the HDL document to actually
put these messages and to do that.
We're going to create two new paragraphs over in index dot HB S..
Now we could put these once again wherever we wanted to.
I'm going to go ahead and put them just below the forum which makes sense right here.
We'll set up Paragraph 1 and then down below we'll set up paragraph 2.
So if things go wrong the second paragraph will be empty and the first will contain the error message.
If things go well the first will contain the location and the second will contain the actual forecast.
So now that we have the paragraphs set up the goal is to target those inside of apt at J S we want to
select them much like we selected our form and our input so we can manipulate them with JavaScript.
In this case we want to manipulate what text they're showing when certain pieces of javascript code
run now to get that done we are going to use document dot query selector again.
The problem is that so far we've just been selecting by the elements name and that's not going to work
for what we're doing here.
So let's create a variable concept called message one for that first paragraph.
I'm gonna set up document dot query selector and I'm going to try to select by the p name.
Now the problem is that query selector matches the first element that matches whatever you provide it.
So this is gonna be the first form the first input or the first paragraph the first paragraph on the
document is not what I'm trying to target.
That's actually up here and we don't want to change this message over time.
I want to change the message for one of the paragraphs down below.
To do this what we're gonna do is assign a unique I.D. to these two paragraphs using HDMI out will then
be able to target those two paragraphs by their unique I.D. over inside of APT J S giving a nice way
for us to get exactly what we want.
So setting up an idea is much like setting up a place holder or class value right here for the first
paragraph.
I.D. equals then inside of quotes we provide a unique I.D. I'll use something like message Python 1
and the nice thing about I.D. is that they're designed to be unique.
So if I target message one from javascript I'm always going to get this paragraph.
Next up we'll create an I.D. for that second paragraph I.D. equals message hyphen too.
And now we have a nice way to target that as well.
Let's go ahead and get that done over inside of APT J.
S I'm going to change what I'm passing in to query selector.
Now if we want to target by the elements name we just type it out like form or input or P if we want
to target by class which we did already from SS and which we can also do from javascript.
We start with a dot followed by the class name that was chosen in our case we're trying to target by
I.D. that doesn't start with a dot.
It starts with the pound sign that's shift 3 on your keyboard followed by the idea value of the element.
So in our case we have Message 1 and message 2 as those values for the message one variable right here
after the pound sign message hyphen 1.
Perfect.
Now we have a way to actually target that and down below we can change its contents right here.
Let's go ahead and do just that message.
1 is the paragraph element.
And to change the text we set the text content property and we're going to set it equal to a string.
The new text we want to have show up.
In this case let's go ahead and keep it empty for just the moment.
What I'm gonna do is save all of my files I'm gonna refresh the browser.
And what do I see.
I don't see anything new.
Yes I've added two new paragraphs but they're empty so nothing shows up.
Now we're going to make a small change to our code right here.
I'm gonna say something like froma javascript.
I'll save the file once again and this time when I refresh the page the javascript code is going to
manipulate the value of the paragraph.
And that's what we're trying to do in this file.
We want to target those paragraphs and we want to use text content to change what's showing up.
We'll clear all of the messaging in the beginning.
If things go wrong we'll make sure to render that appropriately.
And if things go well we'll also once again make sure all of that data shows up by setting text content
on the appropriate message.
Now that you know how to set the text content for paragraphs it's challenge time because that's really
all we're going to end up doing.
We're gonna use this same feature quite a bit.
So right here I'll comment out this line though I can leave it in place.
So you remember how to use it and then down below.
I'm going to paste in the challenge comments.
So your goal is to render not rendering render content to those paragraphs.
So we want to make sure that these messages get updated based off of what's happening inside of our
submit callback function.
So first up you need to select the second message from javascript just like we did with message one
up above.
You can add that code right here and then down below for step 2 just before fetch you're going to render
a loading message for the first paragraph and you're going to leave the second one empty.
You can just set it equal to an empty string to clear whatever value it might already have from a previous
search.
All of that is going to happen right here.
Just before we fetch but only if someone actually submits the form that's when we show the loading message.
Now there are two places we can go from there.
Step three if there is an error which means that this code runs we want to set the first message equal
to the error message.
And if there is no error we want to have the first paragraph set equal to the location.
And the second paragraph set equal to the forecast step five.
Test your work search for invalid locations and you should see loading followed by the error message
search for valid locations and you should see loading followed by the location and the forecast.
All right.
Take as much time as you need to knock that out test your work come back and click play
how'd you do.
Let's get started with step number one up above.
I need to select that second message so const message 2 equals document dot query selector.
And here we are indeed querying by I.D. So I start with the pound sign message Python 2 is the idea
value I set up over inside of index dot HB S..
It's sitting right here.
Now from there we can move on to Step Two of the challenge just before we fetch we want to render a
loading message for the first one and an empty paragraph for the second.
So that could happen right here as an example.
I could do it above where I create the location variable as well.
Either way would work.
Message 1 is going to have its text content property equal to some sort of loading message.
You could have picked anything you wanted to.
I'll just use something like loading.
Dot dot dot.
Though any other text content would have worked and then for message too I'm gonna set that text content
equal to an empty string to clear any value that might have existed from a previous search.
Now step number three if there is an error we want to render the error.
That's gonna happen right here.
So instead of dumping it to the console it will render it in one of the paragraphs that's gonna be message
one dot text content and we are trying to render data dot error.
Excellent.
Now we have it step number four.
If there was no error and get the location and the forecast rendered.
We're gonna do that right inside of.
Else for Message 1.
We'll set the text content equal to data dot location we'll show that first then four message number
two we'll go ahead and set the text content equal to data dot forecast.
So right here the goal is to make sure we always render the correct thing to the paragraph.
We start off with loading if things go poorly we render the error.
If things go well we render the useful information and then we can remove the console dot log calls
and we can go ahead and test our work.
That is step number five.
I'm going to start by removing the challenge comments and that commented out text content example from
up above.
I'll make sure to save all of my files and now we're going to test things inside of the browser to start
I will refresh the page.
Since we were running old code and I'll start with an invalid search like an exclamation mark if I search
for that what do I get.
I could see that I got my loading message for a maybe a tenth of a second and then I got my error unable
to find location try another search which is fantastic.
From here we can try a valid location.
I'll use something like Philadelphia once again when I hit enter we're going to see that loading message
show up and then right here I can see my location which is accurate and I can see the forecast for the
current conditions.
Now if I was to search again we'll see that second message does get cleared because of the code we added
right here.
So once again we'll just see loading.
I'll search for something else like Boston hit enter.
I can see just loading shows up then when the data comes back the data is revealed.
The only thing we're gonna do to wrap up this video is to add a few styles to the application for that
input and the button.
Right now they're just using the default styles and we can write just a few lines of code to make things
look a lot nicer to do that all we're gonna do is add a few lines of code at the bottom of styles dot
CSX.
We're going to target two things we're going to target the input on our pages and we're also going to
target the buttons on our pages.
Now right now we only use one input and one button.
But the reason I'm styling in a general way by element to name is so that if I do have other forms on
the site they all use the same set of styles and they all feel consistent right here for the input I'm
gonna set the border and I'm gonna add a little space for that border and then we're gonna set up three
values the width of the border I'll use one pixel the type of border I don't want Dash I want solid
and the color we're going to use a another hex code that is pound sign si si si si si si which is a
light gray.
Now from there after the semicolon on the next line I'm just gonna set some padding.
This is gonna put some space between the text and the border.
Right now it's all crammed inside of that box.
I'll use a value like eight pixels for that before we move on to the button.
Let's go ahead and test these styles out.
If I refresh things it already looks a lot nicer.
Now onto the button for the button.
We're going to set up five different styles and we're gonna start with the cursor property cursor allows
us to customize the appearance of the cursor when we're hovering over it.
And we want cursor pointer.
So right now before I save this file if I hover over the button the cursor doesn't change but when we
go ahead and save it and view it in a moment we'll see the cursor will be that thing that signifies
it's clickable.
Next up we are going to set the border and the background to the same color.
So border one pixel solid 8 8 8 8 8 8.
After the hash sign that a semicolon.
After that we're also going to set up the background property to the same color.
So right here 8 8 8 8 8 8.
Perfect.
The last one.
Excuse me the second to last one is going to be color and we're gonna set color equal to white.
And then after that we'll set up some padding here as well and we'll use these same value eight pixels.
Now let's go ahead and save things refresh the browser and see what we get.
And right here we have a nice search button when I hover over it.
I can see I do get that pointer letting me know that it is something I can click and if I was to run
a search I can see that everything is still working as expected.
Good searches still work errors still work.
And there we go.
We now have the final version of the weather application to actually build this out.
We covered a lot of new information.
We explored express learning how we can serve up Jason and HDL.
We then learned how we can use Express to serve up the contents of entire directories or work with templating
engines.
From there we integrated our asynchronous code into express allowing us to fetch the forecast for and
address right here inside of the browser.
Now we have a nice little weather application.
The problem is that it only works on our local machine at local host three thousand which means that
no one else is ever going to be able to view it.
Before we continue on to the next application we're going to build.
I want to spend the next section learning how we can deploy our node applications live to production.
So anyone with an Internet connection can access our app.
I'm excited to get to that let's jump into the section intro for the next one it's coming up now.