1
00:00:02,070 --> 00:00:07,740
Now to get started with some code, I want to start in the SharePlace.js file which is the Javascript

2
00:00:07,740 --> 00:00:12,980
file that ultimately gets imported here in that root index.html file.

3
00:00:13,050 --> 00:00:19,320
This is the file which will be responsible for controlling what we have here in the end, for controlling

4
00:00:19,320 --> 00:00:27,130
the different buttons we got there to find a place by address or to get the current user location.

5
00:00:27,350 --> 00:00:33,130
So we'll start in the SharePlace.js file and now we have an important decision to make,

6
00:00:33,230 --> 00:00:40,430
do we want to use an object oriented style where we work with classes or do we want to use a more functional

7
00:00:40,520 --> 00:00:46,350
programming style where we only work with different functions that do stuff and don't organize our code in

8
00:00:46,390 --> 00:00:47,460
classes?

9
00:00:47,540 --> 00:00:53,990
There is no wrong or right choice here but I will go for the object oriented approach also to make sure

10
00:00:54,140 --> 00:00:56,880
that we can practice working with classes again

11
00:00:57,170 --> 00:01:05,880
and therefore here in the SharePlace.js file, I'll create a new class and I will name it place finder.

12
00:01:05,880 --> 00:01:10,800
Now you can name that class whatever you want of course, you should just follow that naming convention

13
00:01:10,830 --> 00:01:16,200
where you start with an upper case character and then you have one word where every word in the word

14
00:01:16,290 --> 00:01:22,650
also starts with a new upper case character and this will be my central class for hooking up all these

15
00:01:22,650 --> 00:01:28,950
buttons we got in our HTML page for getting an address or for getting a place, so find place and get current

16
00:01:28,950 --> 00:01:36,420
location, these two buttons should be managed by this class in the end. So inside of the place finder,

17
00:01:36,840 --> 00:01:42,740
I'll start by making sure that we get access to these buttons and that we add event listeners to them,

18
00:01:42,750 --> 00:01:48,600
so I want to get access to this find place button or since it's of type submit and inside of a form,

19
00:01:48,840 --> 00:01:54,000
I actually want to get access to this form here and listen to the submit event and I want to get access

20
00:01:54,000 --> 00:01:57,980
to this get current location button and listen to a click on it.

21
00:01:58,050 --> 00:02:03,570
So for that we can go to SharePlace.js and here in the class, add a constructor so that we

22
00:02:03,570 --> 00:02:08,880
have some code that runs right away when we create a new instance of this class.

23
00:02:08,880 --> 00:02:16,610
Now in there, I want to get access to my address form and I want to get access to the locate user button.

24
00:02:16,920 --> 00:02:22,920
Now for the address form, to get access we can use document query selector and then just query for the

25
00:02:22,920 --> 00:02:29,610
first form element we find because it turns out that on this index.html file, we only got one form

26
00:02:29,640 --> 00:02:35,970
element, so of course we'll find that and we'll have access to the form I want to have access to. For the

27
00:02:35,970 --> 00:02:37,850
locate user button here,

28
00:02:37,920 --> 00:02:43,590
I want to get access to this button and as you can see, this button got an ID, so one way of getting

29
00:02:43,590 --> 00:02:50,070
access to the button would be to use that ID, so we can just do document get element by ID and enter

30
00:02:50,070 --> 00:02:56,760
that ID here and with that, we get access to these two DOM elements and we store references to these elements

31
00:02:56,790 --> 00:02:58,830
in these two constants.

32
00:02:58,830 --> 00:03:04,230
Now we can also add event listeners to these buttons and we can do that right here in the constructor

33
00:03:04,230 --> 00:03:05,370
if we want to,

34
00:03:05,370 --> 00:03:12,300
we can go to the locate user button and add an event listener, a click event listener where I want to

35
00:03:12,300 --> 00:03:19,260
fire some method which we have to add to this class that should get the user location. So let's add a

36
00:03:19,260 --> 00:03:26,760
new method here, maybe locate user handler is a fitting name, again I like that pattern where the methods

37
00:03:26,790 --> 00:03:33,540
or the functions that are attached to an event end with handler, It's not a must do, it's just one convention

38
00:03:33,540 --> 00:03:38,610
which I sometimes like to use and then this will be the method I want to trigger when we click that button,

39
00:03:38,610 --> 00:03:43,720
so here we can point at locate user handler. Don't execute it as you learned,

40
00:03:43,710 --> 00:03:50,670
instead just point at it so that Javascript and the browser can execute this function for us or this method

41
00:03:50,670 --> 00:03:58,410
for us whenever this event occurs. Now I also will need another method because we also got the address form

42
00:03:58,450 --> 00:04:04,270
here and of course there I also want to add an event listener here however to the submit event and then

43
00:04:04,270 --> 00:04:10,510
here, again we want to trigger a method and you can name this method however you want of course, I will

44
00:04:10,510 --> 00:04:16,410
name it find address handler because that's ultimately what this method will do

45
00:04:16,510 --> 00:04:23,660
and therefore here, we can point at this find address handler. With that, we get the two buttons connected

46
00:04:23,690 --> 00:04:29,570
or we get the two events connected and now we can start with either of the two things, I will start with

47
00:04:29,570 --> 00:04:31,160
getting the user location here.