1 00:00:02,430 --> 00:00:08,760 So let's now use these queries or these fetched project items from the DOM to get some information 2 00:00:08,760 --> 00:00:09,550 from them. 3 00:00:09,620 --> 00:00:18,180 We can use a for loop for that and go through all the project items of project items 4 00:00:18,180 --> 00:00:21,580 like this and these are my DOM nodes here, right? 5 00:00:21,580 --> 00:00:22,690 That's what I'm going through. 6 00:00:22,750 --> 00:00:27,700 Now I'm not interested in the full node, I'm interested in the ID because we could say a project list 7 00:00:28,120 --> 00:00:31,030 also has a projects field 8 00:00:31,030 --> 00:00:33,070 and initially, this is an empty array let's say, 9 00:00:33,070 --> 00:00:40,330 now keep in mind fields are translated to properties and actually they are translated to properties 10 00:00:40,450 --> 00:00:47,230 just as if you would specify them in your constructor and conveniently actually, the fields are converted 11 00:00:47,230 --> 00:00:54,100 to properties before your other constructor logic runs after any super constructor was called if you 12 00:00:54,100 --> 00:01:00,790 had any. And therefore here, we can conveniently reach out to projects and push items into projects 13 00:01:00,790 --> 00:01:04,600 and what I want to push here are my project items, 14 00:01:04,690 --> 00:01:10,300 so not the IDs but actually instances of the project item class which currently of course doesn't 15 00:01:10,300 --> 00:01:17,380 do too much. Well even though the project item class is empty, we can still instantiate it by calling new 16 00:01:17,380 --> 00:01:18,850 project item 17 00:01:18,850 --> 00:01:21,640 and even though right now we have no constructor in there, 18 00:01:21,640 --> 00:01:28,450 I want to pass on my ID which I can get from projectItem.id, with .id here, we access the 19 00:01:28,510 --> 00:01:34,840 ID property of the DOM node which holds the same value as I set on the ID attribute here, 20 00:01:34,840 --> 00:01:39,280 so with that we're getting access to this ID string which is part of the DOM and I forward that 21 00:01:39,280 --> 00:01:45,880 to the project item. So in project item, even though we're not doing much else, we can at least add the 22 00:01:45,880 --> 00:01:52,360 constructor now, expect an ID here and set this ID equal to ID maybe so that we store that ID 23 00:01:52,360 --> 00:01:58,470 we're getting as a parameter in an instance property. Back to the project list 24 00:01:58,480 --> 00:02:04,660 now, we went through all the project items and we created project item objects based on them so that 25 00:02:04,660 --> 00:02:07,570 we have a Javascript representation of the DOM nodes 26 00:02:07,600 --> 00:02:13,450 so to say without all the other HTML content, without the title and so on, just focusing on the ID at 27 00:02:13,450 --> 00:02:21,730 the moment and therefore here, we now should have a project list which at least manages some data about 28 00:02:21,730 --> 00:02:25,390 the DOM nodes it's connected to, at least we manage the IDs now. 29 00:02:25,540 --> 00:02:29,830 So if we save that and after this for loop, we console log 30 00:02:29,830 --> 00:02:38,020 these projects to have a look at this array and we save that and then reload, we see we got an array with objects 31 00:02:38,010 --> 00:02:44,070 now, not DOM node objects but simpler objects which in the end just have an ID property right, 32 00:02:44,080 --> 00:02:47,230 that's what we have in there and that's a good start, 33 00:02:47,230 --> 00:02:49,350 this is something we can build up on. 34 00:02:49,390 --> 00:02:51,710 So what could we do as a next step now, 35 00:02:51,720 --> 00:02:55,240 now that we have these simple project items created? 36 00:02:55,240 --> 00:03:00,220 Well it would make sense to add an event listener to the finish or to the activate button so that we 37 00:03:00,220 --> 00:03:03,620 can get started adding some logic to that. 38 00:03:03,640 --> 00:03:07,180 Now where is the place where the event listener should be added? 39 00:03:07,180 --> 00:03:12,610 Well I would say in the project item because in the end we have that project item to manage a single 40 00:03:12,730 --> 00:03:13,210 item, 41 00:03:13,540 --> 00:03:20,580 so we want this project item to manage its connected DOM node. So here in project item, I'll add a new 42 00:03:20,580 --> 00:03:21,210 function 43 00:03:21,240 --> 00:03:26,730 and I'm only adding a new function so that the constructors can stay lean and is easier to read and 44 00:03:26,730 --> 00:03:28,830 I'll name this function 45 00:03:28,830 --> 00:03:36,320 connect switch button because in the end, the button is there to switch from active to finished or finished 46 00:03:36,350 --> 00:03:42,820 to active and I'm creating a new method here which I call from inside of the constructor simply to 47 00:03:42,820 --> 00:03:44,640 keep the constructor cleaner. 48 00:03:44,740 --> 00:03:49,650 I'll also add another method which I'll name connect more info button, 49 00:03:49,690 --> 00:03:56,800 same logic, I will call it from inside of the constructor here, connect more info button simply to 50 00:03:56,800 --> 00:03:58,090 keep that leaner. 51 00:03:58,090 --> 00:04:01,330 Now let's start with the switch button though. 52 00:04:01,330 --> 00:04:06,900 So in the switch button here, in the connect switch button method, I want to get access to that switch 53 00:04:06,910 --> 00:04:10,360 button and add an event listener. So to get access, 54 00:04:10,360 --> 00:04:17,110 we of course need to get access to the DOM node, so to the project item element if you want to call it 55 00:04:17,110 --> 00:04:17,680 like this, 56 00:04:17,680 --> 00:04:23,170 of course the constant name is up to you and we can get this with document get element by ID because 57 00:04:23,170 --> 00:04:25,620 the ID is something we're storing here, 58 00:04:25,690 --> 00:04:26,120 right? 59 00:04:26,140 --> 00:04:29,820 So we can say get by ID, 60 00:04:29,900 --> 00:04:35,270 this ID is the value you want to use, therefore you have to make sure you're storing the ID in 61 00:04:35,270 --> 00:04:37,930 this property before you call this method 62 00:04:37,940 --> 00:04:40,680 because in this method, we rely on this property. 63 00:04:41,120 --> 00:04:45,080 So with that, we get access to the underlying DOM node object, 64 00:04:45,080 --> 00:04:48,100 now we just need to get access to the button in there, 65 00:04:48,140 --> 00:04:54,840 so to the switch button if you want to call it like that. For that we can reach out to the project item 66 00:04:54,840 --> 00:04:59,100 element which we just selected here in line number 13 67 00:04:59,100 --> 00:05:06,110 and in there with query selector, I want to find the last button and we can do this for example with 68 00:05:06,120 --> 00:05:12,270 button last of type because I have two buttons in there, in every list item, these two buttons and the 69 00:05:12,270 --> 00:05:18,980 last button is this button which switches the project from box A to box B or the other way around. 70 00:05:18,990 --> 00:05:24,960 So now it's this switch button where we can add an event listener and of course that should be a click 71 00:05:24,960 --> 00:05:30,640 event listener because we want to react to button clicks and then here, what should be executed? 72 00:05:30,690 --> 00:05:38,450 That's a tricky question. Well in the end here, I want to trigger a method which should actually be part 73 00:05:38,960 --> 00:05:41,120 of the project list 74 00:05:41,120 --> 00:05:46,540 I would say, to be precise I want to trigger multiple methods 75 00:05:46,540 --> 00:05:53,570 you could say. We need to remove this project item from the project list it's currently in and then add 76 00:05:53,570 --> 00:05:56,630 it to the other project list 77 00:05:56,670 --> 00:05:59,470 and now there are various ways of achieving this, 78 00:05:59,480 --> 00:06:05,510 we could work with a static class again which in the end then can be called from inside the item or 79 00:06:05,510 --> 00:06:11,580 from inside of any list instance to kind of let that static class manage this for us 80 00:06:11,690 --> 00:06:17,120 but here I'll show you an approach which we haven't used like this before but we learned about all the 81 00:06:17,120 --> 00:06:18,560 core components of that, 82 00:06:18,710 --> 00:06:25,890 we can use a callback function so to say. In the project list, let's start with that. In the project list, 83 00:06:25,910 --> 00:06:27,530 we need two methods 84 00:06:27,530 --> 00:06:34,460 as I said in the end, one is to switch the element away, so to switch the project, we could name it switch 85 00:06:34,460 --> 00:06:35,030 project. 86 00:06:35,030 --> 00:06:42,050 The idea is that here, we remove the project from the projects array we have in that list because it will 87 00:06:42,050 --> 00:06:51,640 be switched to the other list and then we also call a method in the other list instance to add it there. 88 00:06:51,650 --> 00:06:58,670 So since the project list class is used to instantiate these list instances, we have to add the method 89 00:06:58,670 --> 00:07:06,830 here and we could name this add project. So keep in mind this is a blueprint for our project list instances 90 00:07:06,830 --> 00:07:12,300 and we create two instances and when we move a project in instance to instance B, so from active 91 00:07:12,320 --> 00:07:16,220 to finished, then we have to trigger a method in instance A, 92 00:07:16,280 --> 00:07:20,720 so in active where we remove the item and a method in instance B, 93 00:07:20,900 --> 00:07:26,720 so in the finished project list where we add this project and because we're moving it to that list. 94 00:07:26,750 --> 00:07:31,610 So here in switch project, removing the item, that's not too hard, 95 00:07:31,610 --> 00:07:36,710 we can reach out to this project and we can remove an item with splice for example, for that we need 96 00:07:36,710 --> 00:07:39,910 to find the index of the project in that array, 97 00:07:39,920 --> 00:07:46,520 we can't use index of because a project is an object and for that, index of doesn't really work but we can 98 00:07:46,520 --> 00:07:49,120 find it for example project index 99 00:07:49,250 --> 00:07:57,910 with this projects find index, you learned about this method earlier and there, you can find the index by passing 100 00:07:58,130 --> 00:08:03,650 in that anonymous function where you receive every element that is part of the array which you can give 101 00:08:03,650 --> 00:08:04,730 any name you want here, 102 00:08:04,760 --> 00:08:10,520 p for example and then here in this anonymous function, I am using an arrow function, you want to return 103 00:08:10,520 --> 00:08:16,430 true if it's the item you are looking for, in my condition for that is that the ID of the item I'm looking 104 00:08:16,430 --> 00:08:16,720 at 105 00:08:16,910 --> 00:08:21,950 and again this will basically be every item in the array because the function is executed for every 106 00:08:21,950 --> 00:08:22,900 item in the array., 107 00:08:23,060 --> 00:08:30,110 if that is equal to and now we need to expect that here in switch project, we get the ID of the item 108 00:08:30,110 --> 00:08:31,220 that should be switched, 109 00:08:31,220 --> 00:08:33,780 so if that's equal. If that is equal, we know OK 110 00:08:33,830 --> 00:08:39,980 now this function executed on the element in this project which is the element we want to move 111 00:08:39,980 --> 00:08:45,770 and then this projects find index will return the index of that project in the projects array, 112 00:08:45,770 --> 00:08:50,150 so the project index can then be used here in splice like this for example. 113 00:08:50,150 --> 00:08:52,960 This is an option, a shorter 114 00:08:52,960 --> 00:09:00,820 alternative is to set this project equal to this projects filter, so to a filtered list where we then 115 00:09:00,820 --> 00:09:03,500 use almost the same logic, 116 00:09:03,610 --> 00:09:05,100 just the opposite. 117 00:09:05,140 --> 00:09:09,850 So where we filter for the ID not being equal because what does this do? 118 00:09:09,910 --> 00:09:16,210 It executes this function here on every element in this projects and it keeps all items where this returns 119 00:09:16,210 --> 00:09:17,080 true, 120 00:09:17,080 --> 00:09:22,840 so we want to return true for everything but when the ID of the item we're currently looking at in 121 00:09:22,840 --> 00:09:28,360 the projects array is equal to the ID of the project we want to remove because if they're equal, this is 122 00:09:28,360 --> 00:09:29,680 the item we want to remove, 123 00:09:29,680 --> 00:09:35,320 so then in filter we want to return false so that this item is dropped from this newly created array 124 00:09:35,620 --> 00:09:39,260 and this newly created array is then stored back in this project. 125 00:09:39,370 --> 00:09:42,700 So that's us removing a project, that's the easier part, 126 00:09:42,700 --> 00:09:48,640 now the trickier part is to make sure that we can now call add project in the other instance of this 127 00:09:48,640 --> 00:09:49,360 list. 128 00:09:49,360 --> 00:09:54,800 So doing this add project will not work because this would call it in the same instance, 129 00:09:54,850 --> 00:09:55,630 right, 130 00:09:55,660 --> 00:09:57,040 so that's something we'll have to fix.