In this video as promised.
You're gonna go ahead and create a form that shows up on the home page of the weather Web site that
will give users an input where they can type in their address.
They'll be able to click a search button and then the forecast information will show up after it's fetched
now to kick things off.
We're gonna start over in index dot HB S..
By writing a little HDL we're gonna go through the process of creating our form with the text input
as well as the button.
Now I'm gonna leave the header in place and then the paragraph down below just inside of our main content
div just before we close that we're gonna go ahead and use the form tag to create a form now with form
we create a separate opening and closing tag then inside of there we're going to create the input and
the button let's go ahead and start with the input input is an empty element.
There is no separate closing tag and then down below we have a button.
Button does have a separate opening and closing tag and right inside you put the text for your button.
So in this case I'm gonna go ahead and use search as my button text.
Now if I go ahead and refresh things over in the browser what do we have.
We have our little form showing up from here we could customize the input a little more.
I'm gonna go ahead and add a placeholder.
So we have some text showing up inside of here.
Until you actually type something that's gonna make sure you know what you're supposed to type in there
to do that over inside of index Dot.
HB Yes on input I'm gonna set up the place holder attribute giving it a value equal to whatever I want
to show.
So in this case I could show location as an example.
Now if I was to refresh things I would see that showing up in gray until I actually type something like
my location.
Then that shows up instead.
So now we have a very simple form.
The problem is that if we were to submit it nothing would happen.
It's not wired up with our client side JavaScript code.
So let's go ahead and address that.
We're done with the markup and we're going to move into app dot J.
S and figure out how we can do something when someone clicks that button and submits that form to get
started.
The first thing we need to do is select the element from our h t email documents that we're trying to
work with and we do this using document dot query selector.
Now we pass to this a string and the string inside of here is very similar to the strings we were using
in our CSX file to select the things we wanted to style.
We selected body or we selected something by class footer header and so on.
Now in this case we are trying to select the following our form so we can grab it by its name right
here form and we're done.
Now what comes back from that is a javascript representation of that element and we can use that to
manipulate the element or to do things when a user interacts with the element.
So right here const i can call this whether form just a way to store that variable so I can access it
at any point in the future and down below.
The first thing we want to do is figure out how to run some code when someone submits that form because
that code is gonna be responsible for fetching the weather and getting everything rendered correctly.
To do this we need to add an event listener onto our element.
So there are all sorts of event listeners out there that our event listeners for hovering over something
like the header for scrolling on a page for clicking a button or for submitting a form next to actually
add it.
We use whether form dot add event listener.
Now in this case we need to pass in two arguments.
The first is a string.
The name of the event we're trying to listen for.
As I mentioned there are dozens of different events that are supported.
And the second is a callback function which runs every single time that event occurs.
In our case the name of the event is submit and the function is going to run every single time the form
is submitted and for the moment over going to do is log something to make sure it's working console
dot log testing.
Now if you're interested in learning more about how you can work with elements in client side JavaScript
I cover that in detail in my javascript bootcamp for this course we just need a little client side code
in order to wire up our forms correctly.
Now this is not going to work as expected.
We're going to talk through why we'll make a few changes and we'll get things working.
If I actually refresh the page what are we going to see.
I can see the following error.
Show up cannot read property ad event listener of No.
So that means it can't read a property on weather form.
It's saying that weather form is no which it shouldn't be because I already set up these selector.
The problem has nothing to do with our code.
It has to do with the order in which things are happening in index Dot.
HB Yes we're loading in our script file in the head of the document which means the script is actually
running before everything down below is rendered before the form is even passed.
So what we need to do is fix that.
All we're going to do is take this script.
I'm going to cut it out of its current location in the head and I'm going to bring it to the very bottom
of the body.
So just before that closing tag after the footer I'm going to paste that exact same line in.
Now this isn't going to show anything new in the browser even though it's in body instead.
It's just going to make sure that our script runs after all of the elements are available that will
allow us to actually select the form and set up our submit listener.
If I refresh the browser once again what do I have right here.
I don't have an error which is a great start because we're not seeing that error.
We know that our form event listener must have been set up correctly and hopefully our code runs when
the form is submitted and we see testing print down below.
Now we are going to see testing print but only for about a tenth of a second.
So before you click Search.
Pay attention to what's going to show up right here for you in your browser.
I'm going to click it and I can see that.
Testing showed up and it immediately went away.
What happened is that the browser actually refreshed completely and that means that our message was
cleared so the default behavior of forms is to completely reload the page and that made sense a long
time ago before we had access to good client side JavaScript.
Now though what we're gonna do is use fetch to fetch the data and we'll dynamically add it onto the
fly so we don't need to refresh the page a bunch causing a flash of content or confusing the user.
We'll be able to preserve everything on the page like what they've typed inside of the input.
So if I type in test and I click search I am going to see testing show up the browser refreshes and
everything's reset.
That's not what we want.
We don't want to refresh the page on form submission.
We want to run this javascript code instead to do that.
All we have to do is grab the argument that's provided to our event callback.
It is an event object you could call it event.
I typically call it E.
That's typically what you're going to see around the web.
And then we use a single method on it.
It's the only method we're ever gonna use on this event object it is e dot prevent default prevent default
is going to prevent that default behavior which is to refresh the browser allowing the server to render
a new page and instead it's going to do nothing it's just going to allow us to do whatever we want by
letting the function run.
So with our code change in place and the file saved we can refresh the browser.
I'm gonna type in something like my location.
I'm gonna click that search button and what happens I see testing print down below which is great.
And the browser isn't refreshed so by setting this up we've told the browser that we're gonna handle
everything.
It doesn't need to do what it usually does.
Now currently we're not handling everything.
We're just logging testing but now we're in a good position to get the address the user provided and
then use that address to fetch the forecast.
Now it's time to go ahead and grab the value the user typed in the input.
And once again we are going to select the input.
Then we're gonna use various code to manipulate it.
Let's go ahead and start by selecting it so we can actually use it in JavaScript const search or any
other variable name would work like search element.
As an example and we are going to get the value from once again using document dot query selector.
We're gonna go ahead and find the element by its name input.
Perfect.
Now we have access to search and we can extract its value right here after the user submits the form.
So they type of value in they submit the form we get the value and we use it to fetch the forecast for
that location right here to get the value we will create a location variable and it's accessible on
search which is an representation of our input and that is search dot value.
So value extracts the input value which is whatever is typed in and here we're just storing it in the
variable.
Now let's go ahead and log that as opposed to logging testing.
So right here we're going to grab the input text value and we're gonna dump it to the console when the
form is submitted.
I'm gonna save app dot J S I'm going to refresh the browser.
I'll go ahead and type something in.
Let's go ahead and use Austin I'll hit enter or click the Search button and I can see my results down
below.
I'll switch that up to something else.
I'll go ahead and use Portland I'll click the Search button and once again the text provided shows up
right down below.
So now we have our form in place and we're actually getting the text when it's submitted.
From here we're going to use that text to generate the you are well that will pass to fetch.
That's actually going to be your challenge for the video.
So let's talk about what I'd like you to do.
Right down below right here.
Your goal is to use the input value to get the weather.
Now for the moment we're going to continue to just log things to the console like the forecast or the
error.
That's OK.
We'll wrap up the user interface in the next video for you.
You want to one migrate the fetch call into the submit callback.
So right now that runs even if no one ever submits the form we want all of this code to live right here
inside of the callback.
So it only runs when the form is submitted.
Next up you want to use the search input text value as the value for the address query string so whatever
someone types in here needs to end up right here in the U.R.L..
So we want a dynamic U.R.L. where we use the form input as the address query string value.
Next up you're gonna go ahead and test your work.
You can submit the form with no value inside and when you do that you should see.
You must enter an address down below.
You can try something invalid and when you submit that you should see what we have right here.
Unable to find a location then you can try something valid and when you submit that you should see the
location and the forecast printing in the terminal.
Don't worry about trying to print things to HDL.
We'll cover that in the next video.
So take some time to knock that out test your work and when you're done come back and click play.
How would you do.
Let's kick things off by migrating the fetch call into the submit callback.
Right now it's getting called even if no one ever submits the form I'm going to cut it out of its current
location.
I'll remove those extra empty lines and we're gonna bring it in down below.
We're gonna remove that console dialog and paste the fetch code right in.
Now we're only ever fetching when the form is submitted in its current state.
The problem is that we're always fetching the following address which is invalid.
We're not using the value the user types in which we have in that location variable.
So for Step Two you needed to make sure to fix that right here.
I'm going to remove the hardcoded address value and I'll just can cat in on using the plus operator
whatever value is stored in location.
Maybe it's nothing.
Maybe it's valid.
Or maybe it's invalid.
I don't care.
I'm going to pass it through to the API and the API will determine if they could do anything with it
or not.
Now we can save app dot J S and down below.
Step 3 we can test our work.
I'm going to remove the challenge comments I'm gonna make sure that I do save my file.
So the latest code is running I'll refresh things in the browser.
And what do I have.
I have my page.
I'm gonna start by searching for nothing.
When I do that I get you must provide an address.
From there I'll search for something invalid like the exclamation mark.
I get unable to find a location.
Try another search.
After that I'll search for a valid zip code.
That's my zip code and when I do I get the location and I get the forecast printing in the terminal.
Now we're not quite done yet.
Everything is still printing in the terminal though we do have the important stuff all wired up in the
next video.
We're going to wrap up the weather application by getting a few styles in place and getting the location
forecast and error messages printing to the user interface.
I'm excited to get to that let's jump right in to the next one.