We're creating a testing.
Input to using the get method, sending data over to the server, so they're going to use JavaScript
to generate some input fields and be able to click on that.
And then this is actually being submitted to the server.
And this is the euro that's being submitted to the server.
And the server is responding with Jason data that's being returned back.
And then what we're doing with the Jason data is we're out putting it on the page.
So simple testing application to test connections and simulate submitting input content to a server
and then also handling the response data that came back from Fach.
The endpoint that we're going to be connecting to, so this is going to be Google user content, so
it's a Google script that's running and what it's going to be doing is it's going to be returning back
either the get or the post data that we're submitting to it and just going to be simply returning it
back and responding back with the same data that we're adding to it.
And we can pick that up and then use that within the JavaScript.
So the point is rather long, I'm going to post it into the JavaScript code under the Web, you URL,
so const you URL and we're going to actually update this and we'll see base your URL and then the base
you are all is going to be the endpoint that we're going to use and make the connection to.
Also going to save this and update the toggle view.
And this actually should be http s to make the connection to the endpoint.
So the data right now, you're not going to see anything on this endpoint.
If we do submit to the endpoint and if we do something like it equals ninety is going to be JSON object
that just has the content that we've submitted.
So we can use this for testing and testing out, sending different method requests and also picking
up input field values to send to the server.
And this is going to be simulating the server, picking up the information and that's going to just
respond back to the same request information that we've sent.
So we're going to remove out the window out of allaster.
So we're going to be relying on this as a click of that.
So picking up data from the webpage, from the input fields and then sending that over, using the base
URL and applying and appending to that.
So first of all, try using a fact like a get method and just create a function called get data.
So this will actually send the request over.
And I'll add in that you are also let's construct the euro using the base, your URL and then adding
to it.
And the request parameters just going to have ID equals one hundred and we can have a number of different
parameters here and we want to return this information back to our.
Web application, so it's going to make the full round trip to the server server is going to respond
back with data within a JSON format and passing in the euro.
So we'll pick up the URL within the getData function.
And here is where we can use the euro and make such a request, so once we've got the response object,
return back the response as Jason.
So then point is going to be sending it as JSON data and then we get the data contents back and for
now, a law get out into the console that we can also update on the page as well.
So let's click the button and we're sending over to the server, the server responding with the request
parameters.
So let's go ahead and add in a few more input fields
and I'm going to use a for loop.
And we're going to construct a bunch of input fields and add them to the page within the output area.
So while I is less than 10 increment I plus one, and we'll just create an input field using the document,
create elements and the element that we're creating is going to be input.
Set the attribute and let's select the input first and set its attribute, so setting that type and
set the type of text.
And then we'll take output and append the newly created my input.
Let's also add in a few other attributes so that we could distinguish them on the page.
So the other attribute that we might want to add is placeholder.
And the value for placeholder
and we can have value plus I so I would put a bunch of input fields on the page.
Also for the my input.
Using class list, let's add, and a class of box to it, and let's go back into the styling or create
the box class.
So this is going to be for the inputs would use a display.
Block, so the input takes up the floor with.
And have it a with of 80 percent.
So that generates a bunch of the input fields also do a margin and auto to center the content and also
make the font size bigger.
So there we are.
So we've got all of the inputs that are generated on the page.
And also, let's take the button and we'll move it to the bottom of all the other inputs.
So we can do that, we can move the element on the page by appending it, so you take the button and
append it to the bottom of all the inputs and then also apply the box styling to the button.
So button class list and let's add the class of box so it will take full with the cross.
And we can also append an add a class to the original input that we had on the page.
So just restyling it and adding some input fields.
And we might also want to populate it with value so we can set the value of that my input and update
the value.
And I'll use the same thing that I had for the placeholder, so that populates at all with values,
the original input would set a value for that as well.
So that can be Hello world.
Also, let's give these inputs.
And set attribute.
And the attribute that we're going to set is going to be the name attribute, and how about we just
listed out as name plus and we'll do I plus one.
So they all have unique name values to them and open it and do a quick code inspect and see what we've
got for the code.
So we've got a number of inputs and they all have unique names associated with it.
And I'll also update the input element with an attribute of name as we're going to use the names for
the property names that we're going to be sending over to the server.
So we've got a name.
And I'll call it Oji for the original, so all of the input fields are here.
We can also look specifically for ones that are within the output area.
And if we want to move the original input within the output field, we can do that as well within append.
So that will have everything within that main output container.
So let's go back into the console.
And when we click the button, we want to get all of the values and we want to pass all of that information
on within the fetch request.
So when we get the data we need to construct the euro that we're sending the request to.
So let's make an update of that data and we have to string it together the same way that we've got the
euro.
So we've got the original base euro.
And then we're going to add and append to it.
So making a selection.
I'll just give it a plural owles and using the output and then Querrey selecter, we're going to do
a query selector, all selecting all of the elements, the input fields.
And let's do a loop through so else for each hour, it's going to produce the element and once we've
got the elements, then using the curly brackets.
We're going to update the base, your URL.
And let's take the element content.
And see what we get back for them, so we get all of the names that are associated and also we can get
the element value.
So what we need to do is append it to the euro.
So let's create a temporary holder for that.
And I'm using the tactics.
So we're just going to add it onto the base euro.
So using the element name
and then adding to it, so element name is going to equal to whatever we've got for the element value.
So it's going to construct our Web URL
and add to the URL the value of Tampa.
So we also need to upend it with an armed.
So that we can add multiple values together so we can have the end at the end.
So that we still have the same format for the URL.
And before we send the Earl will post it into the console.
So let's see what we got now.
So we were successfully able to send the information in and one of the problems was that we just ended
up sending a blank entry and that's because we had the and sign at the end.
And that understood it as that's going to be another name with the value, but it didn't have any name
or value associated with it.
So a better way to construct this is to create a temporary array.
So I'll do that and just create a temporary array.
And then as we add an update, we can get rid of the assign and take the temporary area and push into
it the value of temp.
And then when we're ready to build the web, you, Earl, we can append to the Web you URL and let's
create my.
I'll just call it a request, you, Earl, we're going to use the temporary array that we've added all
the items to and then join.
And what you will do is this is an array method that converts an array into a string format.
So we need to join it together.
And the default joiner is going to be a comma.
So if we don't want to use the comma, we can specify how we want to join the array content.
And I'm going to use the end symbol in order to join it together.
And now when we try it out and actually need to update this and I'll try that one more time.
So this way we're able to create all of the request parameters and we didn't have any spaces, so we
didn't have any extra ones there.
So we're able to successfully send the information over and we see that information is being returned
back as JSON data.
So let's iterate through the JSON data.
And this is actually going to be an object that's being returned back so we can loop through the object
data and output it to the page.
Creating let's create a second output area and I'll call it output one and using documents create elements.
This is going to be a blank div and will serve as our holder for getting the data is being returned
back from the server.
So output one and it doesn't actually have to hold anything.
So we can just simply append it to that output and I'm going to spend it at the end of output below
the button.
And pending output one, and then when we generate the page, so outputting the object and we're going
to pass in one parameter is going to be the object.
So we want to loop through and get all of the object values.
So using the four end statement, we're going to iterate through all of the properties that we've got
within that current object and then output them to the page.
So selecting output and let's add that inner HTML.
So clear out any existing content that's there and then using the four instatement, selecting the property
in the object.
And as we loop through first, we can console log it out just to make sure that we're picking up everything
properly, I use the tactics.
So let's see what we've got for property and then let's see what we've got for the object value.
So using the bracket notation, we're going to include that property.
So the key value and then the value that we're putting into the console and we go down and remember,
this is data that's being returned back from the server.
So we're using that data and then we're just looping through it.
So let's update the contents of the inner HTML output with those values that we've just produced and
let's try it out.
So we're doing a round trip to the server with the content that is sitting on our IT within our input
fields.
So looping through, so if we make any updates to the input fields.
It's going to update the content that's being output and receive back from the server.
Let's create.
That was another class called Mean, and I'll make the font size small on this one and add in a border
so that we can distinguish the new content that's come in.
And then as well, let's add in some padding, so adding in the class of mean.
To the output.
So let's take her, put one and using classless add and add the class of main.
And that's what that looks like, so that outputs all of the values that we have with and then put fields.
So it's just a way to test and making requests.
So coming up, we're also going to be doing this with post and getting the form data and simulating
opposed to the server.
So that's coming up next.
Task for this lesson are to create some input fields.
So have some values in those fields and then create the submit action, then sending the data over to
the server from the input fields.
So using fetch send the input field data to the server and then handle the response back from the server,
which is going to be a JSON object.
So taking the data that Jason data and outputting it for the user.