1
00:00:02,280 --> 00:00:04,890
So sending requests generally works,

2
00:00:04,890 --> 00:00:06,750
now let's link it to our UI

3
00:00:06,780 --> 00:00:09,150
because that's a bit more realistic

4
00:00:09,220 --> 00:00:17,700
and for that we also need access to the form and to that fetch post button. The form here is in the section

5
00:00:17,700 --> 00:00:25,290
with the ID new post and the button for fetching posts is in the available posts section. So we can

6
00:00:25,290 --> 00:00:35,600
use that to select our elements form by using document query selector and then that would be, what

7
00:00:35,600 --> 00:00:47,920
did I say? New post is the ID and then there, the form element and the fetch button, that would be document

8
00:00:47,920 --> 00:00:54,960
query selector and then there, we have the section with the ID available posts and there it's

9
00:00:54,960 --> 00:00:56,940
the first button which we find.

10
00:00:56,940 --> 00:01:01,720
So here, ID available posts and then the first button.

11
00:01:01,770 --> 00:01:03,880
Now we have access to these two elements,

12
00:01:03,960 --> 00:01:12,570
now for fetching, we can scroll down here and we can reach out to our fetch button and add an event listener

13
00:01:12,570 --> 00:01:19,670
here where upon a click, I'll use an anonymous function, doesn't matter if it's an arrow function or a

14
00:01:19,670 --> 00:01:26,800
created with the function keyword, where we call fetch posts,

15
00:01:27,000 --> 00:01:33,720
of course we can also shorten this and just point at fetch posts like this without parentheses and for the

16
00:01:33,720 --> 00:01:36,300
form,

17
00:01:36,540 --> 00:01:41,970
I want to add an event listener for the submit event and then here, we get the event object where I want

18
00:01:41,970 --> 00:01:45,950
to call prevent default so that the browser does not submit the form

19
00:01:46,090 --> 00:01:50,880
and now we could also validate the form here if you wanted to, we could validate the user input,

20
00:01:50,910 --> 00:01:52,410
I'll not do that here,

21
00:01:52,470 --> 00:01:57,510
it would just be about fetching the inputs, checking the value the user entered and then maybe presenting

22
00:01:57,510 --> 00:02:01,380
an error, again not something I want to focus on in this module,

23
00:02:01,380 --> 00:02:06,570
instead I want to get my input from the field with the title and from the field with the ID

24
00:02:06,570 --> 00:02:08,130
content.

25
00:02:08,130 --> 00:02:18,690
So to get that access, I will get my entered title by reaching out to event current target which is the

26
00:02:18,690 --> 00:02:27,540
form, query selector title, that should give me the title input and then .value is what I'm interested

27
00:02:27,540 --> 00:02:34,040
in and for the entered content, I do the same for the field with the content ID

28
00:02:34,260 --> 00:02:44,020
and now here I can call create post and forward the entered title and the entered content here.

29
00:02:44,080 --> 00:02:50,290
With that if we save that, let's reload and now we don't start with any posts here,

30
00:02:50,290 --> 00:02:57,500
if I click fetch posts however, they are fetched and now to add one, a new post, let's try it.

31
00:02:57,670 --> 00:03:04,150
If I click add here, you see that request is sent and it contains the data we just entered.

32
00:03:04,150 --> 00:03:06,850
So now we connected these two requests to our UI,

33
00:03:07,180 --> 00:03:10,720
let's now mix it up and also see how we can send a delete request.