1 00:00:02,150 --> 00:00:03,020 Welcome back, my friend. 2 00:00:03,080 --> 00:00:11,630 Welcome to another lecture today we are going to do is we are going to work in our art galleries function. 3 00:00:11,660 --> 00:00:13,970 Now, let me just say this. 4 00:00:15,380 --> 00:00:23,270 We want this form fields data that is stored here to grab it somewhere in the function. 5 00:00:23,280 --> 00:00:23,600 Right. 6 00:00:24,080 --> 00:00:27,290 And we can do just right here in this function. 7 00:00:27,890 --> 00:00:34,490 But remember that we created a couple of controllers and everything that is related with this graphical 8 00:00:34,490 --> 00:00:35,360 user interface. 9 00:00:35,630 --> 00:00:44,870 It's we are going to do an app UI controller, and that is why we in this controller, what we can do 10 00:00:45,740 --> 00:00:52,090 is we can create a function here that will be a public in order. 11 00:00:52,100 --> 00:01:00,980 This main controller or in this in this add calories function be able to access because remember this 12 00:01:01,280 --> 00:01:05,870 closure and if it functions, they create data, encapsulation. 13 00:01:05,870 --> 00:01:12,050 Everything that is private will remain private and it's not be accessible by outside school, but it 14 00:01:12,050 --> 00:01:17,050 can be accessible by the by this function here. 15 00:01:17,330 --> 00:01:23,150 So I'm going to create a variable here for storing the data and it will be get form input. 16 00:01:24,740 --> 00:01:33,080 And this variable I will show you just later, this variable will hold the entire object or the data 17 00:01:33,080 --> 00:01:35,480 of the dysfunction that will return it from here. 18 00:01:35,480 --> 00:01:35,770 Right. 19 00:01:35,780 --> 00:01:36,440 It will store. 20 00:01:36,560 --> 00:01:38,240 It will keep it everything. 21 00:01:38,690 --> 00:01:44,890 Now, the most easiest thing is we can just say return. 22 00:01:45,230 --> 00:01:54,320 So we need to return a public function to return and we can return here an object. 23 00:01:54,330 --> 00:02:02,630 So I will say get form data like that and I will create a function without any parameter, without any 24 00:02:02,630 --> 00:02:03,200 arguments. 25 00:02:03,830 --> 00:02:06,370 That's pretty much it inside. 26 00:02:06,470 --> 00:02:06,890 No. 27 00:02:07,070 --> 00:02:12,280 The most interesting part is how to grab all of this data here. 28 00:02:12,290 --> 00:02:12,800 Let's look. 29 00:02:13,130 --> 00:02:15,410 We do have this select we do have this input. 30 00:02:15,860 --> 00:02:19,190 We do have this quantity and we do have this calories. 31 00:02:19,190 --> 00:02:21,590 We do have four form fields. 32 00:02:22,010 --> 00:02:23,510 So here it is in a short form. 33 00:02:23,810 --> 00:02:31,040 We do have this and we can use the square we selected to target each individual classes in grep what's 34 00:02:31,040 --> 00:02:32,060 inside that form. 35 00:02:32,270 --> 00:02:33,040 So let's do this. 36 00:02:33,060 --> 00:02:36,860 I'm just going to grab the type first and now inside. 37 00:02:36,860 --> 00:02:39,320 What I'm going to do is I'm going again. 38 00:02:39,320 --> 00:02:47,450 I'm going to return an object, for example, the type L.C type in document, that query selector. 39 00:02:47,720 --> 00:02:51,620 And I'm going to select this one, but with a dot. 40 00:02:51,620 --> 00:02:51,980 Right. 41 00:02:52,730 --> 00:02:55,100 And I'm just going to say dot value. 42 00:02:56,450 --> 00:02:59,390 Now, this not no value, just the value. 43 00:03:00,650 --> 00:03:01,580 Now what? 44 00:03:01,580 --> 00:03:04,940 We'll do this because we're dealing with select here. 45 00:03:05,090 --> 00:03:05,510 Right? 46 00:03:05,990 --> 00:03:15,230 This is a select and based on the selection, I will have food and exercise, but now the food and exercise 47 00:03:16,640 --> 00:03:19,100 or consider it as a placeholder. 48 00:03:19,100 --> 00:03:19,460 Right. 49 00:03:20,390 --> 00:03:24,740 And what this that dot value will return. 50 00:03:24,950 --> 00:03:28,190 The option values this to here. 51 00:03:28,520 --> 00:03:33,980 When we do with inputs, the value will be everything that we have in the input that we're going to 52 00:03:33,980 --> 00:03:34,520 write here. 53 00:03:34,730 --> 00:03:41,650 But we the select is going to grab this option in what inside this value added burn will be returned. 54 00:03:41,900 --> 00:03:42,280 Right. 55 00:03:42,320 --> 00:03:44,760 Let's test this out to see if it's going to work. 56 00:03:45,590 --> 00:03:52,760 Now, I do have this right and it's going to return this data. 57 00:03:53,450 --> 00:03:56,610 So I'm going to store it here and get for my input. 58 00:03:56,630 --> 00:03:58,310 But how are we going to do this now? 59 00:03:58,520 --> 00:04:08,180 The main controller will talk with this app UI controller to this app with this app UI controller here 60 00:04:08,180 --> 00:04:08,930 that we're passing. 61 00:04:09,170 --> 00:04:11,840 So how are we going to see it get form input? 62 00:04:12,140 --> 00:04:20,480 It will be equal to Abdulahad controller DOT, get form data or that will be the public method that 63 00:04:20,480 --> 00:04:21,740 we are returning here. 64 00:04:22,010 --> 00:04:22,370 Right. 65 00:04:22,640 --> 00:04:24,560 And we actually returning an object. 66 00:04:25,340 --> 00:04:31,410 So let's see if it's going to work because we're talking too much and we don't know. 67 00:04:31,430 --> 00:04:38,290 So if I click here, I'm just going to refresh and yeah, it's not going to work. 68 00:04:38,300 --> 00:04:44,480 One reason because we we're not cancelling log the get form input. 69 00:04:44,570 --> 00:04:46,100 Right when it comes a lot. 70 00:04:46,280 --> 00:04:47,790 What's is stored in this. 71 00:04:48,140 --> 00:04:54,550 So actually this gets from data will return to an object and that object will be stored in this one 72 00:04:55,220 --> 00:04:55,530 now. 73 00:04:55,550 --> 00:04:58,820 So if I click now here and if I select food. 74 00:05:00,380 --> 00:05:08,360 In the food in our home I was actually at, so I would like to see that our our logic, it will return 75 00:05:08,360 --> 00:05:11,560 an object with the value of at it. 76 00:05:11,590 --> 00:05:11,870 It is. 77 00:05:12,020 --> 00:05:14,450 So the type is at right. 78 00:05:14,630 --> 00:05:19,400 This type can be anything you can see, but you can see even select. 79 00:05:20,450 --> 00:05:20,860 Right. 80 00:05:21,080 --> 00:05:22,250 It's not going to change much. 81 00:05:24,390 --> 00:05:28,160 It is going to be selecta so you can choose your name. 82 00:05:28,590 --> 00:05:36,010 I'm just naming because this is the input type of of art or burn we are adding on burning calories. 83 00:05:36,270 --> 00:05:37,440 This will be here. 84 00:05:37,590 --> 00:05:40,140 We're going to see description these here. 85 00:05:40,140 --> 00:05:41,580 We will say quantity. 86 00:05:41,920 --> 00:05:43,510 This year we will see calories. 87 00:05:44,100 --> 00:05:44,860 How cool is this? 88 00:05:45,190 --> 00:05:50,390 Now we know that the type is done, so I'm just going to copy it here. 89 00:05:50,640 --> 00:05:56,130 I just want to return to the last three other things. 90 00:05:56,400 --> 00:06:02,490 So I'm just going to grab this description and I'm going to say, OK, this should be name description. 91 00:06:04,590 --> 00:06:11,190 And you can even use a short name, short form description and grab the value. 92 00:06:11,580 --> 00:06:13,830 Now, the next one will be quality. 93 00:06:14,130 --> 00:06:20,880 And I'm going to say quantity and I'm going to grab the quantity class. 94 00:06:22,340 --> 00:06:29,690 And remember, we do have this two here, this is two classes just going to grab this one, they're 95 00:06:29,690 --> 00:06:32,930 both no, I'm going to grab that one. 96 00:06:33,300 --> 00:06:35,980 Yeah, I did. 97 00:06:36,720 --> 00:06:37,160 I did. 98 00:06:37,850 --> 00:06:38,260 Yeah. 99 00:06:38,570 --> 00:06:44,650 So now I do have we need to change this into calories, right? 100 00:06:46,050 --> 00:06:55,140 Because that is for the calories, so let's make it like this so I have type description, calories, 101 00:06:55,140 --> 00:06:55,570 quantity. 102 00:06:55,870 --> 00:07:01,920 Now I expect an object with all these four input form fields. 103 00:07:02,790 --> 00:07:03,720 Let's see what's happening. 104 00:07:03,960 --> 00:07:13,920 So if I go back here and if I type food, if I go ice cream, it's not a food quantity to add calories. 105 00:07:15,030 --> 00:07:18,630 And if I hit, enter or receive, I should have type of ad. 106 00:07:18,630 --> 00:07:24,930 So I have this object containing calorie description, quantity and type. 107 00:07:24,970 --> 00:07:33,590 And so if I go back to exercise and I will see run, I will say one lap and 180. 108 00:07:34,440 --> 00:07:37,000 Now I click enter and here it is. 109 00:07:37,140 --> 00:07:38,030 So it's a burn. 110 00:07:38,340 --> 00:07:42,300 The type is burn because that is the type that we have here. 111 00:07:42,450 --> 00:07:50,670 So if I say burn one and add to like that burn add one now next time when I save something. 112 00:07:51,090 --> 00:07:56,690 So let's say food to five hundred and fifty five. 113 00:07:56,910 --> 00:08:02,130 Now we'll have add one whatever we have here as a value that will be displayed there. 114 00:08:02,910 --> 00:08:12,320 So I hope I'm clear now everything is working food and because this is selected by, by I'm means preselected, 115 00:08:12,600 --> 00:08:13,740 that's why it's going to give us. 116 00:08:14,070 --> 00:08:18,300 But we do have a one problem here and then we need to we need to fix this problem. 117 00:08:18,570 --> 00:08:20,760 We do have description calories in quantity. 118 00:08:20,760 --> 00:08:21,510 They are empty. 119 00:08:21,810 --> 00:08:27,450 And we don't want to store something in our storage or data that is empty. 120 00:08:27,450 --> 00:08:29,370 So that is not a good thing. 121 00:08:29,910 --> 00:08:31,700 But we can fix that one later. 122 00:08:31,770 --> 00:08:33,660 But what else we can do? 123 00:08:33,720 --> 00:08:37,230 No, let's see what we have done. 124 00:08:37,230 --> 00:08:48,660 So we've created an object here that is returning this get form data inside the form data we return 125 00:08:48,900 --> 00:08:57,270 object containing that description, calories quantity that we grabbing from the from the form and why 126 00:08:57,270 --> 00:09:03,900 we put it in your controller, because this is related with APU and controller and now we know how this 127 00:09:03,900 --> 00:09:05,220 breach is working. 128 00:09:05,430 --> 00:09:09,630 We use this app, you controller and here it is, you change its color because we use it. 129 00:09:09,930 --> 00:09:14,880 We haven't used the calories controller because the calories controller will be for this module here. 130 00:09:15,260 --> 00:09:16,230 Right here. 131 00:09:16,350 --> 00:09:17,190 And I'm CONSOLI. 132 00:09:17,190 --> 00:09:18,560 Well that's pretty much it. 133 00:09:18,660 --> 00:09:24,090 So get form input contains everything that we returning from this object here. 134 00:09:24,720 --> 00:09:30,170 Now, one more thing before we finish this lecture. 135 00:09:30,210 --> 00:09:37,800 Now, the thing is that we are using class names here, right here, OK, class names to target this 136 00:09:37,800 --> 00:09:38,760 query selector. 137 00:09:39,000 --> 00:09:43,140 But what if we can do it in a little bit better way? 138 00:09:43,500 --> 00:09:49,140 We can create an object here that is private and I will not be able to access it here, but I will be 139 00:09:49,140 --> 00:09:51,960 able to access it if I return to something right. 140 00:09:52,230 --> 00:09:57,270 And that object will hold this class name values. 141 00:09:57,870 --> 00:09:58,890 So we can do that. 142 00:09:59,220 --> 00:10:04,920 Now I'm going to create here very, very variable HTML class. 143 00:10:06,780 --> 00:10:15,510 Names and why choose to class name, because I'm going to store all the class names from now on into 144 00:10:15,510 --> 00:10:19,880 this private object and why it's private, you will see. 145 00:10:20,190 --> 00:10:25,520 Now I'm just going to say type class in here. 146 00:10:25,530 --> 00:10:28,780 I will store these type class. 147 00:10:29,280 --> 00:10:30,090 How cool is this? 148 00:10:30,210 --> 00:10:31,140 I'm just going to copy it. 149 00:10:31,800 --> 00:10:32,160 All right. 150 00:10:34,050 --> 00:10:42,510 So next, what I do have I do have short form description and this type class, you can name it according 151 00:10:42,510 --> 00:10:50,030 to your project, or if you think that this should be select class, just use it to let class or. 152 00:10:50,040 --> 00:10:57,000 Yeah, you can say, yeah, this is most most logical for me to use this name. 153 00:10:57,180 --> 00:11:03,830 Now, here I'm going to say description class and I'm going to paste this one here. 154 00:11:04,620 --> 00:11:05,760 Now I do. 155 00:11:05,760 --> 00:11:09,720 The next one will be about about calories class. 156 00:11:09,720 --> 00:11:10,010 Right. 157 00:11:16,090 --> 00:11:25,750 So these names sometimes, as I told you, they need to be exactly as you feel, because I'm not going 158 00:11:25,750 --> 00:11:27,510 to tell you that you can't change this name. 159 00:11:27,530 --> 00:11:28,030 We can't. 160 00:11:28,300 --> 00:11:28,580 Right. 161 00:11:28,630 --> 00:11:33,440 It's up to you if you think that that's a reasonable name for your class. 162 00:11:33,680 --> 00:11:35,070 Yeah, just like that. 163 00:11:35,260 --> 00:11:38,960 Now, I do have quantity class here. 164 00:11:39,070 --> 00:11:40,750 I'm going to make it. 165 00:11:43,610 --> 00:11:46,730 DOT quantity, and I think we're done for now. 166 00:11:48,140 --> 00:11:50,870 Now what we can do, just keep put semicolon here. 167 00:11:52,160 --> 00:12:00,920 So remember that these function can access even after this episode, controller function is closed, 168 00:12:01,130 --> 00:12:02,630 finished because of the closure. 169 00:12:02,780 --> 00:12:05,830 We can still use this object here. 170 00:12:05,840 --> 00:12:06,190 Right. 171 00:12:06,590 --> 00:12:09,920 And it's going to be storing this user selector class names. 172 00:12:10,080 --> 00:12:11,690 So how we can just call it here. 173 00:12:11,960 --> 00:12:13,270 So it's very easy. 174 00:12:13,280 --> 00:12:21,410 I'm going to say HTML class names DOT and I'm just going to look for a type class here and let's remove 175 00:12:21,410 --> 00:12:21,950 everything. 176 00:12:22,100 --> 00:12:22,490 No. 177 00:12:24,830 --> 00:12:34,040 So I don't want to make a mistake now H.T. middle class names, that this one was for the description. 178 00:12:35,530 --> 00:12:42,450 Plus, I'm just going to copy those one pasted times that this one was for the calories. 179 00:12:42,460 --> 00:12:48,060 Here it is, the calories class and this one was for the quantity class. 180 00:12:48,490 --> 00:12:49,440 So I'm going to save it. 181 00:12:50,260 --> 00:12:55,360 And let's see if we have done some mistake or error or if we break something. 182 00:12:55,360 --> 00:13:00,700 Now, I'm just going to click enter and I expect to have the same result. 183 00:13:00,710 --> 00:13:01,000 Right. 184 00:13:01,390 --> 00:13:07,510 So if you put here run two laps, five thousand calories, that's not possible. 185 00:13:07,510 --> 00:13:07,980 But yeah. 186 00:13:08,470 --> 00:13:14,140 So five hundred fifty five quantitative calories description, everything that we have. 187 00:13:14,140 --> 00:13:15,510 Here it is. 188 00:13:15,520 --> 00:13:16,380 Get it now. 189 00:13:17,020 --> 00:13:25,060 I didn't tell you that when we have this input type what we have in here, not value will grab it. 190 00:13:25,390 --> 00:13:25,870 Right. 191 00:13:26,440 --> 00:13:29,040 But Food Select was a little bit different. 192 00:13:29,050 --> 00:13:31,120 We grab the option value. 193 00:13:31,420 --> 00:13:32,680 What's inside this value. 194 00:13:32,920 --> 00:13:37,390 It's going to be there if it's no, it's going to be a number, but it's going to be as a string. 195 00:13:37,730 --> 00:13:38,040 It is. 196 00:13:39,190 --> 00:13:39,840 Be careful. 197 00:13:39,850 --> 00:13:40,990 This is a string calories. 198 00:13:40,990 --> 00:13:42,970 They're not number and quantity is not number. 199 00:13:43,240 --> 00:13:44,350 They're strings at the moment. 200 00:13:44,350 --> 00:13:47,320 We we will learn how to do this little bit later. 201 00:13:47,650 --> 00:13:50,380 But for now, that's it. 202 00:13:50,380 --> 00:13:54,970 And I think we are done for this case for now. 203 00:13:55,300 --> 00:13:56,920 We will have one problem here. 204 00:13:57,700 --> 00:14:03,040 I will not be able to use this HTML class because here I do have another query selector. 205 00:14:03,250 --> 00:14:07,720 I do select one other the button html class. 206 00:14:07,720 --> 00:14:08,040 Right. 207 00:14:08,710 --> 00:14:09,850 So how I can do this. 208 00:14:10,150 --> 00:14:14,680 So now the middle class name is not visible in this main controller. 209 00:14:14,680 --> 00:14:15,760 We need to find a solution. 210 00:14:16,330 --> 00:14:22,750 Let's create a function same as this one that's going to return the HTML class names. 211 00:14:22,750 --> 00:14:23,100 Right. 212 00:14:23,470 --> 00:14:25,570 So let me know where it is here. 213 00:14:25,570 --> 00:14:37,150 I'm just going to write Tomáš under the same return and I'm going to say get get html class name and 214 00:14:37,150 --> 00:14:38,410 I'm going to say function. 215 00:14:39,370 --> 00:14:44,980 It's going to be a function without parameters and we're going to return this object here. 216 00:14:46,360 --> 00:14:47,260 How cool is this? 217 00:14:47,410 --> 00:14:50,920 You see the power now public in private functions. 218 00:14:51,160 --> 00:14:56,140 These can be this is object, but you can be a function and we can return it here, can return its result. 219 00:14:56,150 --> 00:15:02,230 Now, I need the story here so I can create a different variable name, but I'm going to use the same 220 00:15:02,230 --> 00:15:04,210 one e-mail class names. 221 00:15:04,810 --> 00:15:06,010 I want to use the same one. 222 00:15:06,250 --> 00:15:11,950 But if you want, you can do HMO class names for me to be a little bit different, I'm going to go with 223 00:15:12,100 --> 00:15:12,490 this one. 224 00:15:12,700 --> 00:15:15,160 But for you, you can do it like this. 225 00:15:15,850 --> 00:15:18,370 I don't want to confuse you with different names, that's why. 226 00:15:18,850 --> 00:15:28,090 So I'm going to use this app control UI, what's happened and I'm going to access now get HTML class 227 00:15:28,090 --> 00:15:30,190 name just like that. 228 00:15:30,700 --> 00:15:41,170 So I should be able but before we need to add it in our list here and let's add it, let's see at BTE 229 00:15:41,200 --> 00:15:50,320 in class, because that was pretty much what was for the comma there and yeah. 230 00:15:50,320 --> 00:15:55,090 So now we can use the same logic as here. 231 00:15:55,300 --> 00:15:58,690 Class name each class names Dot. 232 00:16:01,310 --> 00:16:05,690 At Beaky in class, so let's hope it's going to work. 233 00:16:07,520 --> 00:16:10,380 So if I click, enter, yeah, I do have the same result. 234 00:16:10,400 --> 00:16:12,750 Now it is working, right? 235 00:16:12,770 --> 00:16:15,890 We don't have any anywhere else that we can use. 236 00:16:15,910 --> 00:16:19,430 This is a class name see as a selector. 237 00:16:19,440 --> 00:16:22,150 So I hope you understand this lecture was a little bit too long. 238 00:16:22,160 --> 00:16:27,890 So what we did in a private object, we store the class names that we're going to use in a query selector 239 00:16:28,190 --> 00:16:30,530 and we call it because this is the object we've got. 240 00:16:30,530 --> 00:16:38,600 We call it the type, whatever we need and why we do this, because in future, if you change the class 241 00:16:38,600 --> 00:16:45,890 name from show form, type to short form type, I don't know, impanelled like this. 242 00:16:46,220 --> 00:16:51,740 So if you change it here, show form, where was it typed? 243 00:16:51,990 --> 00:16:52,570 Here it is. 244 00:16:52,610 --> 00:16:54,470 This one to Pano. 245 00:16:55,010 --> 00:16:57,980 I need only to change it here and everywhere. 246 00:16:57,980 --> 00:17:00,120 I don't need to change it right in our code. 247 00:17:00,380 --> 00:17:06,070 Everything will be clean because this will go there every every time. 248 00:17:06,530 --> 00:17:10,630 What we have here, it will be represented on the left side. 249 00:17:10,820 --> 00:17:15,820 So I'm just going to go back, just going to go back here and say that that will just to show. 250 00:17:15,830 --> 00:17:21,790 So if we have in our HTML class names one change here, we can change it once and that's it. 251 00:17:21,800 --> 00:17:23,860 Everywhere else will remain the same. 252 00:17:24,110 --> 00:17:28,550 And imagine if we call this one ten times, we need to change it ten times otherwise. 253 00:17:29,030 --> 00:17:30,370 So that is pretty much it. 254 00:17:30,560 --> 00:17:35,780 We return everything that we have from the form, right. 255 00:17:35,790 --> 00:17:39,830 We store it in one object, we return it back in. 256 00:17:39,830 --> 00:17:44,340 That object was saved in this get form input. 257 00:17:44,790 --> 00:17:51,080 Now now you know how we going to use from now this main control. 258 00:17:51,090 --> 00:17:54,950 This is a main control will be a bridge between the the rest of the controls. 259 00:17:55,220 --> 00:18:02,060 And that's why, you know, now why we put this here and not everywhere else. 260 00:18:02,060 --> 00:18:04,640 This is connected with the user interface. 261 00:18:04,880 --> 00:18:09,170 That's why we put these functions here and we can grab it through the main control. 262 00:18:09,260 --> 00:18:10,970 Otherwise it will work. 263 00:18:10,970 --> 00:18:13,190 If we put it here, it will work. 264 00:18:13,190 --> 00:18:14,000 It will still work. 265 00:18:14,150 --> 00:18:15,320 But that's not logic. 266 00:18:15,320 --> 00:18:17,900 That's not our our vision. 267 00:18:18,140 --> 00:18:18,560 Right. 268 00:18:18,800 --> 00:18:19,940 So thank you very much. 269 00:18:20,090 --> 00:18:23,660 I hope you understand what we are doing and I will see you in the next one.