1
00:00:02,260 --> 00:00:05,530
So without further ado, I'd say let's dive right in

2
00:00:05,650 --> 00:00:13,780
and of course feel free to pause this section right now and try this on your own first or pause from

3
00:00:13,780 --> 00:00:17,300
time to time whilst we go through this mini demo here

4
00:00:17,320 --> 00:00:21,710
so that you can also try out things on your own before we then do it together.

5
00:00:21,730 --> 00:00:23,830
I will show you my approach,

6
00:00:23,830 --> 00:00:26,660
my solution here, as always in programming

7
00:00:26,710 --> 00:00:31,600
there will be more than one possible solution and therefore I would definitely recommend that you also

8
00:00:31,600 --> 00:00:37,840
try this on your own first or that you temporarily or from time to time pause and try the next steps

9
00:00:38,110 --> 00:00:41,020
on your own first before you then follow along with me

10
00:00:41,110 --> 00:00:46,720
because that will help you find out where you need to practice more, what you already know pretty well

11
00:00:46,900 --> 00:00:47,770
and so on.

12
00:00:47,860 --> 00:00:50,310
So the goal is to make these buttons work

13
00:00:50,320 --> 00:00:52,120
and of course that sounds very trivial.

14
00:00:52,120 --> 00:00:57,340
Now the first important decision we'll have to make is whether we want to use classes, whether we want

15
00:00:57,340 --> 00:01:02,710
to use an object oriented approach or not. Both works and both is OK,

16
00:01:02,740 --> 00:01:08,440
you could go into your script file and just dump in a couple of constants where you kind of select all

17
00:01:08,440 --> 00:01:12,810
the buttons, add event listeners, work with some global arrays here,

18
00:01:12,850 --> 00:01:18,220
you probably want one array of projects for the first box and one array of projects for the second box

19
00:01:18,610 --> 00:01:22,280
and then you move items between these boxes, between these two arrays

20
00:01:22,360 --> 00:01:25,590
and you'll also update the DOM by moving the elements there.

21
00:01:25,720 --> 00:01:28,620
You can do that and you can do it with or without classes.

22
00:01:28,630 --> 00:01:35,400
Now since we worked a lot with classes in the last modules, I will use classes here to also practice this

23
00:01:35,400 --> 00:01:42,550
object oriented approach and this OOP way of thinking a bit more and therefore I will not throw in

24
00:01:42,550 --> 00:01:44,530
a couple of global constants,

25
00:01:44,530 --> 00:01:50,890
instead I will start by defining a couple of classes which we then can work on. Now which classes would

26
00:01:50,890 --> 00:01:52,150
that be though?

27
00:01:52,210 --> 00:01:55,180
Now of course as I said, there are many ways of structuring this,

28
00:01:55,210 --> 00:02:01,410
I will create a class, a project list class which in the end manages all the projects of one box.

29
00:02:01,420 --> 00:02:06,790
I will also create a class for a single project item,

30
00:02:06,790 --> 00:02:08,710
so for such a rendered item

31
00:02:08,710 --> 00:02:11,500
and keep in mind we'll not have to render these items,

32
00:02:11,510 --> 00:02:17,710
they're already there but we'll have to add some logic to read them from the DOM and populate some

33
00:02:17,710 --> 00:02:21,580
Javascript logic with data that can be found in the DOM.

34
00:02:21,580 --> 00:02:28,660
I'll also add a class that manages the app overall and I'll also add a class, a tooltip class which helps

35
00:02:28,660 --> 00:02:31,560
us display a tooltip when we click on this button.

36
00:02:31,570 --> 00:02:40,100
So therefore if we go back, I'll add a class, tooltip which will be helpful for this more info button, I

37
00:02:40,100 --> 00:02:47,420
will add another class, project item because I got a couple of projects here and a single item there

38
00:02:47,420 --> 00:02:53,600
should be managed with a project item class which then is responsible for listening on clicks on that

39
00:02:53,600 --> 00:02:56,240
finish or activate button.

40
00:02:56,240 --> 00:03:00,920
Of course we've got multiple projects though and we're managing them in multiple lists,

41
00:03:01,010 --> 00:03:07,340
so I'll add another class here, the project list class so that we can create multiple instances of this class

42
00:03:07,340 --> 00:03:08,890
for the different lists

43
00:03:08,890 --> 00:03:13,370
we have and as I said, I will add an app class.

44
00:03:13,370 --> 00:03:19,130
Now these might not be all classes we work with in this module but these are the classes with which

45
00:03:19,130 --> 00:03:20,540
I want to start.

46
00:03:20,540 --> 00:03:25,260
Now speaking of getting started, the interesting thing about this project is that

47
00:03:25,260 --> 00:03:27,530
we already have some items rendered here.

48
00:03:27,620 --> 00:03:33,470
This could be a page we're getting from some server, where this page was created and rendered on the

49
00:03:33,470 --> 00:03:39,860
server so to say, where the HTML code was created on the server I mean and now in the frontend, in the

50
00:03:39,860 --> 00:03:46,130
browser, we just want to add some Javascript so that we can't add new items or delete them but we can

51
00:03:46,130 --> 00:03:50,810
move them between the boxes and this would be a common use case, a common scenario by the way, you're

52
00:03:50,810 --> 00:03:56,310
not always building applications where you manage everything in the browser with Javascript,

53
00:03:56,420 --> 00:04:02,630
it's quite common to also have applications where the HTML code is pregenerated on the server and you

54
00:04:02,630 --> 00:04:07,910
with your Javascript in the browser, you only want to add some interactions to that content and that's

55
00:04:07,910 --> 00:04:09,660
exactly what we're doing here.

56
00:04:09,680 --> 00:04:13,420
Therefore our HTML code is the source of truth

57
00:04:13,430 --> 00:04:19,360
we could say, the data we're interested in, things like the IDs of the projects are part of that HTML

58
00:04:19,400 --> 00:04:28,530
code and therefore we need some logic, some code to parse the HTML code, parse the two different

59
00:04:28,530 --> 00:04:35,550
sections we have which are these boxes which hold the projects to find out which projects with which

60
00:04:35,550 --> 00:04:41,550
ID are currently active and which are finished so that thereafter we can add logic to switch these elements

61
00:04:41,730 --> 00:04:43,290
and switch these projects in code.