1 00:00:01,680 --> 00:00:03,630 We're creating a testing. 2 00:00:06,310 --> 00:00:13,870 Input to using the get method, sending data over to the server, so they're going to use JavaScript 3 00:00:13,870 --> 00:00:18,060 to generate some input fields and be able to click on that. 4 00:00:18,640 --> 00:00:21,430 And then this is actually being submitted to the server. 5 00:00:22,060 --> 00:00:25,240 And this is the euro that's being submitted to the server. 6 00:00:25,510 --> 00:00:30,820 And the server is responding with Jason data that's being returned back. 7 00:00:30,820 --> 00:00:34,090 And then what we're doing with the Jason data is we're out putting it on the page. 8 00:00:34,420 --> 00:00:44,080 So simple testing application to test connections and simulate submitting input content to a server 9 00:00:44,080 --> 00:00:47,260 and then also handling the response data that came back from Fach. 10 00:00:49,000 --> 00:00:53,500 The endpoint that we're going to be connecting to, so this is going to be Google user content, so 11 00:00:53,500 --> 00:00:58,480 it's a Google script that's running and what it's going to be doing is it's going to be returning back 12 00:00:58,600 --> 00:01:04,480 either the get or the post data that we're submitting to it and just going to be simply returning it 13 00:01:04,480 --> 00:01:08,080 back and responding back with the same data that we're adding to it. 14 00:01:08,320 --> 00:01:11,710 And we can pick that up and then use that within the JavaScript. 15 00:01:12,720 --> 00:01:19,290 So the point is rather long, I'm going to post it into the JavaScript code under the Web, you URL, 16 00:01:19,770 --> 00:01:28,260 so const you URL and we're going to actually update this and we'll see base your URL and then the base 17 00:01:28,260 --> 00:01:32,100 you are all is going to be the endpoint that we're going to use and make the connection to. 18 00:01:32,790 --> 00:01:36,350 Also going to save this and update the toggle view. 19 00:01:36,900 --> 00:01:41,460 And this actually should be http s to make the connection to the endpoint. 20 00:01:41,790 --> 00:01:45,360 So the data right now, you're not going to see anything on this endpoint. 21 00:01:45,360 --> 00:01:53,520 If we do submit to the endpoint and if we do something like it equals ninety is going to be JSON object 22 00:01:53,520 --> 00:01:56,310 that just has the content that we've submitted. 23 00:01:56,580 --> 00:02:02,970 So we can use this for testing and testing out, sending different method requests and also picking 24 00:02:02,970 --> 00:02:07,100 up input field values to send to the server. 25 00:02:07,260 --> 00:02:11,550 And this is going to be simulating the server, picking up the information and that's going to just 26 00:02:11,550 --> 00:02:15,090 respond back to the same request information that we've sent. 27 00:02:15,930 --> 00:02:19,710 So we're going to remove out the window out of allaster. 28 00:02:20,280 --> 00:02:22,970 So we're going to be relying on this as a click of that. 29 00:02:23,250 --> 00:02:29,900 So picking up data from the webpage, from the input fields and then sending that over, using the base 30 00:02:29,960 --> 00:02:33,030 URL and applying and appending to that. 31 00:02:33,540 --> 00:02:43,720 So first of all, try using a fact like a get method and just create a function called get data. 32 00:02:44,250 --> 00:02:47,490 So this will actually send the request over. 33 00:02:48,390 --> 00:02:57,420 And I'll add in that you are also let's construct the euro using the base, your URL and then adding 34 00:02:57,420 --> 00:02:57,930 to it. 35 00:03:01,650 --> 00:03:09,870 And the request parameters just going to have ID equals one hundred and we can have a number of different 36 00:03:09,870 --> 00:03:15,870 parameters here and we want to return this information back to our. 37 00:03:17,600 --> 00:03:22,460 Web application, so it's going to make the full round trip to the server server is going to respond 38 00:03:22,460 --> 00:03:29,430 back with data within a JSON format and passing in the euro. 39 00:03:30,050 --> 00:03:32,810 So we'll pick up the URL within the getData function. 40 00:03:33,970 --> 00:03:43,810 And here is where we can use the euro and make such a request, so once we've got the response object, 41 00:03:44,440 --> 00:03:46,600 return back the response as Jason. 42 00:03:46,810 --> 00:03:53,950 So then point is going to be sending it as JSON data and then we get the data contents back and for 43 00:03:53,950 --> 00:03:59,330 now, a law get out into the console that we can also update on the page as well. 44 00:04:00,460 --> 00:04:06,850 So let's click the button and we're sending over to the server, the server responding with the request 45 00:04:06,850 --> 00:04:07,440 parameters. 46 00:04:07,870 --> 00:04:10,630 So let's go ahead and add in a few more input fields 47 00:04:13,270 --> 00:04:15,190 and I'm going to use a for loop. 48 00:04:16,610 --> 00:04:21,800 And we're going to construct a bunch of input fields and add them to the page within the output area. 49 00:04:24,860 --> 00:04:34,700 So while I is less than 10 increment I plus one, and we'll just create an input field using the document, 50 00:04:35,360 --> 00:04:40,130 create elements and the element that we're creating is going to be input. 51 00:04:43,290 --> 00:04:58,110 Set the attribute and let's select the input first and set its attribute, so setting that type and 52 00:04:58,110 --> 00:04:59,490 set the type of text. 53 00:05:02,080 --> 00:05:06,820 And then we'll take output and append the newly created my input. 54 00:05:08,090 --> 00:05:12,870 Let's also add in a few other attributes so that we could distinguish them on the page. 55 00:05:13,540 --> 00:05:16,780 So the other attribute that we might want to add is placeholder. 56 00:05:18,500 --> 00:05:20,330 And the value for placeholder 57 00:05:23,060 --> 00:05:32,030 and we can have value plus I so I would put a bunch of input fields on the page. 58 00:05:35,380 --> 00:05:37,060 Also for the my input. 59 00:05:39,050 --> 00:05:49,490 Using class list, let's add, and a class of box to it, and let's go back into the styling or create 60 00:05:49,490 --> 00:05:50,490 the box class. 61 00:05:50,750 --> 00:05:54,500 So this is going to be for the inputs would use a display. 62 00:05:56,080 --> 00:05:58,450 Block, so the input takes up the floor with. 63 00:05:59,580 --> 00:06:02,550 And have it a with of 80 percent. 64 00:06:05,470 --> 00:06:15,730 So that generates a bunch of the input fields also do a margin and auto to center the content and also 65 00:06:15,730 --> 00:06:17,740 make the font size bigger. 66 00:06:19,750 --> 00:06:20,230 So there we are. 67 00:06:20,270 --> 00:06:23,860 So we've got all of the inputs that are generated on the page. 68 00:06:29,160 --> 00:06:34,410 And also, let's take the button and we'll move it to the bottom of all the other inputs. 69 00:06:38,220 --> 00:06:44,970 So we can do that, we can move the element on the page by appending it, so you take the button and 70 00:06:44,970 --> 00:06:51,720 append it to the bottom of all the inputs and then also apply the box styling to the button. 71 00:06:52,740 --> 00:07:01,500 So button class list and let's add the class of box so it will take full with the cross. 72 00:07:03,810 --> 00:07:09,490 And we can also append an add a class to the original input that we had on the page. 73 00:07:10,290 --> 00:07:13,380 So just restyling it and adding some input fields. 74 00:07:16,050 --> 00:07:26,400 And we might also want to populate it with value so we can set the value of that my input and update 75 00:07:26,400 --> 00:07:26,940 the value. 76 00:07:29,280 --> 00:07:34,590 And I'll use the same thing that I had for the placeholder, so that populates at all with values, 77 00:07:36,930 --> 00:07:40,050 the original input would set a value for that as well. 78 00:07:40,380 --> 00:07:41,640 So that can be Hello world. 79 00:07:44,590 --> 00:07:47,410 Also, let's give these inputs. 80 00:07:49,800 --> 00:07:51,870 And set attribute. 81 00:07:54,450 --> 00:08:00,030 And the attribute that we're going to set is going to be the name attribute, and how about we just 82 00:08:00,030 --> 00:08:05,670 listed out as name plus and we'll do I plus one. 83 00:08:06,180 --> 00:08:13,320 So they all have unique name values to them and open it and do a quick code inspect and see what we've 84 00:08:13,320 --> 00:08:14,220 got for the code. 85 00:08:15,060 --> 00:08:22,950 So we've got a number of inputs and they all have unique names associated with it. 86 00:08:24,330 --> 00:08:31,710 And I'll also update the input element with an attribute of name as we're going to use the names for 87 00:08:31,860 --> 00:08:35,640 the property names that we're going to be sending over to the server. 88 00:08:37,740 --> 00:08:39,240 So we've got a name. 89 00:08:41,700 --> 00:08:49,420 And I'll call it Oji for the original, so all of the input fields are here. 90 00:08:49,710 --> 00:08:54,270 We can also look specifically for ones that are within the output area. 91 00:08:54,900 --> 00:09:03,360 And if we want to move the original input within the output field, we can do that as well within append. 92 00:09:05,160 --> 00:09:08,640 So that will have everything within that main output container. 93 00:09:14,350 --> 00:09:16,090 So let's go back into the console. 94 00:09:17,490 --> 00:09:25,080 And when we click the button, we want to get all of the values and we want to pass all of that information 95 00:09:25,080 --> 00:09:26,850 on within the fetch request. 96 00:09:33,100 --> 00:09:41,230 So when we get the data we need to construct the euro that we're sending the request to. 97 00:09:42,400 --> 00:09:49,720 So let's make an update of that data and we have to string it together the same way that we've got the 98 00:09:49,720 --> 00:09:50,340 euro. 99 00:09:51,070 --> 00:09:53,530 So we've got the original base euro. 100 00:09:56,410 --> 00:09:58,720 And then we're going to add and append to it. 101 00:10:00,260 --> 00:10:02,000 So making a selection. 102 00:10:04,760 --> 00:10:12,860 I'll just give it a plural owles and using the output and then Querrey selecter, we're going to do 103 00:10:12,860 --> 00:10:17,540 a query selector, all selecting all of the elements, the input fields. 104 00:10:21,040 --> 00:10:30,340 And let's do a loop through so else for each hour, it's going to produce the element and once we've 105 00:10:30,340 --> 00:10:35,470 got the elements, then using the curly brackets. 106 00:10:37,870 --> 00:10:40,180 We're going to update the base, your URL. 107 00:10:45,570 --> 00:10:48,210 And let's take the element content. 108 00:10:50,990 --> 00:10:58,670 And see what we get back for them, so we get all of the names that are associated and also we can get 109 00:10:58,670 --> 00:10:59,620 the element value. 110 00:11:00,410 --> 00:11:03,680 So what we need to do is append it to the euro. 111 00:11:05,240 --> 00:11:07,670 So let's create a temporary holder for that. 112 00:11:08,450 --> 00:11:10,180 And I'm using the tactics. 113 00:11:10,910 --> 00:11:13,790 So we're just going to add it onto the base euro. 114 00:11:15,890 --> 00:11:17,960 So using the element name 115 00:11:20,690 --> 00:11:28,820 and then adding to it, so element name is going to equal to whatever we've got for the element value. 116 00:11:33,260 --> 00:11:35,630 So it's going to construct our Web URL 117 00:11:38,960 --> 00:11:41,660 and add to the URL the value of Tampa. 118 00:11:43,580 --> 00:11:46,400 So we also need to upend it with an armed. 119 00:11:48,270 --> 00:11:53,670 So that we can add multiple values together so we can have the end at the end. 120 00:11:55,270 --> 00:11:58,180 So that we still have the same format for the URL. 121 00:11:58,660 --> 00:12:02,470 And before we send the Earl will post it into the console. 122 00:12:03,640 --> 00:12:04,930 So let's see what we got now. 123 00:12:08,990 --> 00:12:15,710 So we were successfully able to send the information in and one of the problems was that we just ended 124 00:12:15,710 --> 00:12:20,390 up sending a blank entry and that's because we had the and sign at the end. 125 00:12:20,630 --> 00:12:25,790 And that understood it as that's going to be another name with the value, but it didn't have any name 126 00:12:25,790 --> 00:12:27,320 or value associated with it. 127 00:12:27,800 --> 00:12:33,280 So a better way to construct this is to create a temporary array. 128 00:12:35,180 --> 00:12:38,440 So I'll do that and just create a temporary array. 129 00:12:39,380 --> 00:12:47,360 And then as we add an update, we can get rid of the assign and take the temporary area and push into 130 00:12:47,360 --> 00:12:48,830 it the value of temp. 131 00:12:53,380 --> 00:13:02,530 And then when we're ready to build the web, you, Earl, we can append to the Web you URL and let's 132 00:13:02,710 --> 00:13:04,480 create my. 133 00:13:08,470 --> 00:13:15,370 I'll just call it a request, you, Earl, we're going to use the temporary array that we've added all 134 00:13:15,370 --> 00:13:19,210 the items to and then join. 135 00:13:19,210 --> 00:13:25,740 And what you will do is this is an array method that converts an array into a string format. 136 00:13:26,290 --> 00:13:28,960 So we need to join it together. 137 00:13:29,230 --> 00:13:33,500 And the default joiner is going to be a comma. 138 00:13:33,850 --> 00:13:39,340 So if we don't want to use the comma, we can specify how we want to join the array content. 139 00:13:40,450 --> 00:13:43,500 And I'm going to use the end symbol in order to join it together. 140 00:13:44,170 --> 00:13:52,570 And now when we try it out and actually need to update this and I'll try that one more time. 141 00:13:54,190 --> 00:14:02,650 So this way we're able to create all of the request parameters and we didn't have any spaces, so we 142 00:14:02,650 --> 00:14:04,060 didn't have any extra ones there. 143 00:14:04,390 --> 00:14:10,150 So we're able to successfully send the information over and we see that information is being returned 144 00:14:10,150 --> 00:14:11,580 back as JSON data. 145 00:14:12,190 --> 00:14:14,740 So let's iterate through the JSON data. 146 00:14:17,270 --> 00:14:23,540 And this is actually going to be an object that's being returned back so we can loop through the object 147 00:14:23,540 --> 00:14:25,280 data and output it to the page. 148 00:14:28,010 --> 00:14:37,940 Creating let's create a second output area and I'll call it output one and using documents create elements. 149 00:14:38,930 --> 00:14:44,870 This is going to be a blank div and will serve as our holder for getting the data is being returned 150 00:14:44,870 --> 00:14:45,770 back from the server. 151 00:14:46,040 --> 00:14:50,360 So output one and it doesn't actually have to hold anything. 152 00:14:50,370 --> 00:14:57,200 So we can just simply append it to that output and I'm going to spend it at the end of output below 153 00:14:57,200 --> 00:14:57,620 the button. 154 00:15:02,450 --> 00:15:12,470 And pending output one, and then when we generate the page, so outputting the object and we're going 155 00:15:12,470 --> 00:15:15,140 to pass in one parameter is going to be the object. 156 00:15:18,690 --> 00:15:22,260 So we want to loop through and get all of the object values. 157 00:15:30,930 --> 00:15:37,110 So using the four end statement, we're going to iterate through all of the properties that we've got 158 00:15:37,110 --> 00:15:40,090 within that current object and then output them to the page. 159 00:15:40,170 --> 00:15:43,670 So selecting output and let's add that inner HTML. 160 00:15:43,680 --> 00:15:52,260 So clear out any existing content that's there and then using the four instatement, selecting the property 161 00:15:53,370 --> 00:15:54,900 in the object. 162 00:15:57,450 --> 00:16:03,840 And as we loop through first, we can console log it out just to make sure that we're picking up everything 163 00:16:03,840 --> 00:16:06,600 properly, I use the tactics. 164 00:16:07,950 --> 00:16:15,890 So let's see what we've got for property and then let's see what we've got for the object value. 165 00:16:16,290 --> 00:16:20,070 So using the bracket notation, we're going to include that property. 166 00:16:20,970 --> 00:16:30,210 So the key value and then the value that we're putting into the console and we go down and remember, 167 00:16:30,210 --> 00:16:32,810 this is data that's being returned back from the server. 168 00:16:33,360 --> 00:16:37,100 So we're using that data and then we're just looping through it. 169 00:16:37,710 --> 00:16:50,040 So let's update the contents of the inner HTML output with those values that we've just produced and 170 00:16:50,040 --> 00:16:50,960 let's try it out. 171 00:16:51,840 --> 00:16:59,250 So we're doing a round trip to the server with the content that is sitting on our IT within our input 172 00:16:59,250 --> 00:16:59,640 fields. 173 00:17:03,280 --> 00:17:06,970 So looping through, so if we make any updates to the input fields. 174 00:17:09,600 --> 00:17:15,600 It's going to update the content that's being output and receive back from the server. 175 00:17:18,010 --> 00:17:19,210 Let's create. 176 00:17:23,350 --> 00:17:32,500 That was another class called Mean, and I'll make the font size small on this one and add in a border 177 00:17:32,530 --> 00:17:35,680 so that we can distinguish the new content that's come in. 178 00:17:37,220 --> 00:17:43,940 And then as well, let's add in some padding, so adding in the class of mean. 179 00:17:46,550 --> 00:17:47,390 To the output. 180 00:17:49,820 --> 00:17:56,870 So let's take her, put one and using classless add and add the class of main. 181 00:17:58,670 --> 00:18:04,710 And that's what that looks like, so that outputs all of the values that we have with and then put fields. 182 00:18:05,660 --> 00:18:10,100 So it's just a way to test and making requests. 183 00:18:10,760 --> 00:18:16,820 So coming up, we're also going to be doing this with post and getting the form data and simulating 184 00:18:16,820 --> 00:18:17,830 opposed to the server. 185 00:18:18,140 --> 00:18:19,190 So that's coming up next. 186 00:18:20,180 --> 00:18:23,030 Task for this lesson are to create some input fields. 187 00:18:23,270 --> 00:18:30,740 So have some values in those fields and then create the submit action, then sending the data over to 188 00:18:30,740 --> 00:18:33,370 the server from the input fields. 189 00:18:33,680 --> 00:18:39,470 So using fetch send the input field data to the server and then handle the response back from the server, 190 00:18:39,620 --> 00:18:41,540 which is going to be a JSON object. 191 00:18:41,760 --> 00:18:46,190 So taking the data that Jason data and outputting it for the user.