1 00:00:01,830 --> 00:00:02,740 Welcome back, guys. 2 00:00:02,760 --> 00:00:09,180 Welcome to the first lecture of this project, and this is an important lecture for the people that 3 00:00:09,180 --> 00:00:09,890 want to learn. 4 00:00:10,140 --> 00:00:14,370 If you don't want to learn about how this project is done, how this project we're going to start, 5 00:00:14,620 --> 00:00:18,870 and if you do want to skip it, you can skip it because it's going to be simple. 6 00:00:18,870 --> 00:00:23,740 HTML says something like that so you will know how this project is working. 7 00:00:23,760 --> 00:00:28,860 Now you're going to have to do for two starting folder, I mean two folders. 8 00:00:29,010 --> 00:00:34,320 The first one will be Berney starter and the second one will be the final the finished version that 9 00:00:34,320 --> 00:00:38,520 we are going to do, we are going to complete in the last lecture. 10 00:00:38,550 --> 00:00:47,670 So what I suggest is to open the Vaskov or whatever text editor you do have and open that starter folder. 11 00:00:47,670 --> 00:00:57,380 Right now in this starter folder, I'm going to have successful a Sears's folder, IMG, J.S., SAS. 12 00:00:57,480 --> 00:01:00,360 Now this Sears's folder. 13 00:01:00,360 --> 00:01:01,620 I do have some comments here. 14 00:01:01,620 --> 00:01:03,710 I just want you to read it right. 15 00:01:04,740 --> 00:01:06,660 And this is the main Sears's folder. 16 00:01:07,020 --> 00:01:10,950 IMAG all the images here in this folder are from on splash. 17 00:01:10,960 --> 00:01:14,850 I'm very thankful for this guys here and I'm seeing things there. 18 00:01:15,110 --> 00:01:15,500 Right. 19 00:01:16,740 --> 00:01:17,430 Let's move on. 20 00:01:17,430 --> 00:01:21,110 Geass, you're going to have to files at the edges here. 21 00:01:21,120 --> 00:01:25,920 We're going to put our code here in Berney that JS in the burning edges. 22 00:01:26,250 --> 00:01:30,780 I'm giving this code and I'm not going to create this code together with you. 23 00:01:30,780 --> 00:01:31,620 It's going to be given. 24 00:01:32,070 --> 00:01:32,550 Why? 25 00:01:32,550 --> 00:01:34,380 Because this is not something difficult. 26 00:01:34,380 --> 00:01:36,450 You will see how it's going to be done here. 27 00:01:36,720 --> 00:01:39,270 And that's pretty much easy to understand in here. 28 00:01:39,270 --> 00:01:40,740 I just want to start from somewhere. 29 00:01:40,740 --> 00:01:42,150 I don't want to start from scratch. 30 00:01:42,900 --> 00:01:49,020 Now, the SAS folder, you don't have to touch it because here it's compiled into Cyesis. 31 00:01:49,170 --> 00:01:49,560 Right. 32 00:01:49,980 --> 00:01:57,330 But if you want to do some changes here, I'm just going to show you you need to install a live server 33 00:01:57,450 --> 00:01:57,960 plugin. 34 00:01:58,260 --> 00:02:03,180 So if I click it here now, it will create a bunch of files here. 35 00:02:03,210 --> 00:02:03,600 Right. 36 00:02:03,960 --> 00:02:05,370 That is happening in my place. 37 00:02:06,360 --> 00:02:09,240 That is how it's configured right now. 38 00:02:10,380 --> 00:02:11,940 One more thing that I want to show you. 39 00:02:11,940 --> 00:02:14,970 This is the HTML file that I have in. 40 00:02:14,970 --> 00:02:16,260 I use the live server. 41 00:02:16,260 --> 00:02:21,030 And please, if you do have this fiasco, please install that plugin right now. 42 00:02:21,030 --> 00:02:29,400 This is the this is the starter folder that we are going to work on. 43 00:02:29,610 --> 00:02:35,280 So I'm just going to show you that if you change something here, for example, I'm going to comment 44 00:02:35,280 --> 00:02:35,730 this one. 45 00:02:36,360 --> 00:02:41,430 This is the main container, actually, and I'm going to change the color to whatever green. 46 00:02:42,090 --> 00:02:42,540 Right. 47 00:02:42,540 --> 00:02:43,620 I just want green. 48 00:02:43,950 --> 00:02:45,990 Maybe in the other application we use green. 49 00:02:48,120 --> 00:02:49,980 And here is now it's green. 50 00:02:50,130 --> 00:02:51,540 This is how powerful it is. 51 00:02:51,540 --> 00:02:52,680 I don't have to refresh. 52 00:02:53,100 --> 00:02:55,110 The live server is doing that for me. 53 00:02:55,170 --> 00:02:55,550 Right. 54 00:02:56,160 --> 00:02:56,640 So. 55 00:02:58,470 --> 00:03:00,370 I'm just going to go back, I'm going to save it. 56 00:03:00,660 --> 00:03:04,460 Success having here, and that's pretty much it. 57 00:03:04,740 --> 00:03:06,800 Now, I'm going to stop watching. 58 00:03:06,810 --> 00:03:09,090 I don't need to change, do any more changes. 59 00:03:09,340 --> 00:03:11,340 And I don't need these files. 60 00:03:13,970 --> 00:03:20,500 I just need to he says, why, because in this man says this is just importing the styles from here, 61 00:03:20,630 --> 00:03:21,070 that's it. 62 00:03:21,410 --> 00:03:23,030 You don't need to worry about anymore. 63 00:03:23,660 --> 00:03:26,230 Now, it's good to have to look in this house. 64 00:03:26,250 --> 00:03:26,940 I've done this. 65 00:03:26,970 --> 00:03:27,380 Yes. 66 00:03:28,160 --> 00:03:36,320 And if you don't understand, says you can take my other courses, which it will be of your great help 67 00:03:37,190 --> 00:03:38,030 about styling. 68 00:03:38,030 --> 00:03:41,920 You will learn about lot of styling because that's what I'm doing in there in that project. 69 00:03:42,740 --> 00:03:47,670 So ultimately be a Laravel Cyesis and SACE so you can take that course. 70 00:03:47,930 --> 00:03:55,040 Now this is the style Cyesis and this is the sash, so you can compare and see how things is done because 71 00:03:55,160 --> 00:03:57,980 here it's going to be a little bit different. 72 00:03:58,530 --> 00:04:00,040 No, I'm done with that. 73 00:04:00,230 --> 00:04:03,520 So I use that live server already explained to you. 74 00:04:03,840 --> 00:04:09,470 You really know I do have the main container contains everything. 75 00:04:09,740 --> 00:04:14,740 I do have this date panel that's pretty much battle on top. 76 00:04:15,170 --> 00:04:16,690 I do have this button here. 77 00:04:17,630 --> 00:04:18,590 Don't worry about the button. 78 00:04:18,590 --> 00:04:19,730 It's not there anymore. 79 00:04:19,770 --> 00:04:21,050 I mean, it's not there now. 80 00:04:21,050 --> 00:04:22,280 I do have the graph. 81 00:04:22,580 --> 00:04:24,980 The graph is actually what's happening. 82 00:04:25,790 --> 00:04:33,960 This part contains this two thousand three hundred calories remaining and this graph here now. 83 00:04:33,970 --> 00:04:42,890 Now, don't worry about how I'm doing this, because later we are just going to change one. 84 00:04:43,040 --> 00:04:49,490 I'm going to show you in the first lectures we're going to change one part here and that will actually 85 00:04:49,490 --> 00:04:57,200 create that spinning when we have the cut, when we adding the calories now remaining two thousand three 86 00:04:57,200 --> 00:04:58,330 hundred, that's pretty much it. 87 00:04:59,000 --> 00:05:02,600 So take note of these notes here and comments now. 88 00:05:02,600 --> 00:05:05,690 The main panel result is actually this sport here. 89 00:05:05,900 --> 00:05:10,090 So if you go inspect it, you can actually go here. 90 00:05:10,090 --> 00:05:11,660 And this is the main panel for the food. 91 00:05:11,870 --> 00:05:16,100 This is main battle for the for the bar together. 92 00:05:16,250 --> 00:05:17,420 So that's for the food. 93 00:05:17,420 --> 00:05:18,860 That's for the exercise. 94 00:05:18,860 --> 00:05:19,660 How cool is this? 95 00:05:19,880 --> 00:05:22,370 No, I do have one more panel here. 96 00:05:22,490 --> 00:05:27,620 I want to show you two and this is the button that I'm telling you. 97 00:05:27,830 --> 00:05:29,810 It's for that one. 98 00:05:30,270 --> 00:05:32,720 OK, so one more thing. 99 00:05:33,770 --> 00:05:37,970 For example, if this icons here, they are not working. 100 00:05:38,150 --> 00:05:42,740 The reason they are not working, probably in future, they can be changed by a font. 101 00:05:42,740 --> 00:05:43,310 Awesome. 102 00:05:43,550 --> 00:05:51,350 That's why here I did include my script here, mine for an awesome kid and you can download font. 103 00:05:51,350 --> 00:05:51,740 Awesome. 104 00:05:51,950 --> 00:05:54,200 Maybe in the future they're going to change the way they do. 105 00:05:54,740 --> 00:05:57,260 So you can download seedling for the fun. 106 00:05:57,260 --> 00:05:58,400 Awesome and put it here. 107 00:05:58,670 --> 00:06:03,620 I don't want to put sidedly because at the moment they do have some kind of errors or warnings. 108 00:06:03,770 --> 00:06:05,390 So when I do the cons a lot. 109 00:06:06,110 --> 00:06:06,530 Right. 110 00:06:06,530 --> 00:06:10,910 So I'm just going to show you when I do, the console is going to have more than this. 111 00:06:11,300 --> 00:06:13,310 They're going to have warnings and that's not cool. 112 00:06:13,310 --> 00:06:15,740 I don't want them to be displayed here. 113 00:06:16,220 --> 00:06:17,270 That is why. 114 00:06:17,270 --> 00:06:25,370 But if you want to be a developer or to have to start working in some some more serious stuff, you 115 00:06:25,370 --> 00:06:32,180 need to learn how to get this one awesome for yourself, because in future, they can change it before. 116 00:06:32,210 --> 00:06:34,370 I'm just going to show you to where it is. 117 00:06:35,760 --> 00:06:39,680 It is before was F.A.A. every time circle. 118 00:06:39,690 --> 00:06:44,780 Now it's free ah free time circle so they can change the way they do things. 119 00:06:44,900 --> 00:06:45,260 Right. 120 00:06:45,680 --> 00:06:47,570 And in future it might not working. 121 00:06:47,570 --> 00:06:52,820 So if it's not working, please find a way how you can use your own icons. 122 00:06:52,820 --> 00:07:01,220 I mean you can grab it under your name or if it works for you, just delete this one, put a clear link 123 00:07:01,220 --> 00:07:01,880 and that's it. 124 00:07:02,000 --> 00:07:02,630 You're done. 125 00:07:02,840 --> 00:07:03,890 This is under my name. 126 00:07:04,100 --> 00:07:09,160 And that is why I'm just saying to you that you can do it in your name if you want. 127 00:07:09,230 --> 00:07:13,070 No, the food slider is closed at the moment. 128 00:07:13,380 --> 00:07:16,580 You're just going to open it here. 129 00:07:16,590 --> 00:07:17,140 Here it is. 130 00:07:17,720 --> 00:07:22,040 So this is one simple image that we are loading here. 131 00:07:22,790 --> 00:07:24,140 I have the food container. 132 00:07:24,150 --> 00:07:26,690 I'm glad that I'm smiling there and inside. 133 00:07:26,690 --> 00:07:31,670 I have this food container with the idea of zero. 134 00:07:31,670 --> 00:07:37,190 Now we're going to learn that this idea zero next idea and it's ending here. 135 00:07:37,220 --> 00:07:41,090 So, for example, if I want to do another one, I can copy this one. 136 00:07:41,090 --> 00:07:41,900 I can put it here. 137 00:07:42,230 --> 00:07:50,180 So I'm going to have two right there in the same same name, same because I just copy and paste it, 138 00:07:50,360 --> 00:07:53,180 then the Z and that's pretty much it. 139 00:07:53,390 --> 00:08:00,890 Now, that idea should be one here and you will understand why those ideas will be important. 140 00:08:01,070 --> 00:08:07,340 The same goes this for when we click, food is going to list all the foods that we add it. 141 00:08:07,340 --> 00:08:09,340 And this is the lead button, right? 142 00:08:10,640 --> 00:08:13,010 This is actually that button here we. 143 00:08:13,280 --> 00:08:17,000 The lead item in Effy Times circle. 144 00:08:17,360 --> 00:08:18,240 How cool is this? 145 00:08:18,570 --> 00:08:23,930 No, the other one shoe form closed is this button here. 146 00:08:23,930 --> 00:08:29,530 I'm just going to show you this one one click it here is going to open up this floor. 147 00:08:29,540 --> 00:08:33,710 And in this form, I do have select option. 148 00:08:33,890 --> 00:08:37,340 I do have the description that I do have. 149 00:08:38,070 --> 00:08:38,540 What else? 150 00:08:38,660 --> 00:08:39,080 Just wait. 151 00:08:39,580 --> 00:08:45,920 I need to close that one here to get I do have the calories and I do have the quantities. 152 00:08:45,920 --> 00:08:46,260 Right. 153 00:08:46,460 --> 00:08:48,790 There is all inputs in there inside a form. 154 00:08:48,800 --> 00:08:50,000 Why do that inform? 155 00:08:50,150 --> 00:08:51,020 There is no action. 156 00:08:51,020 --> 00:08:52,000 They don't go anywhere. 157 00:08:53,270 --> 00:08:59,870 Why I do this because maybe in future you're going to use this project for BHP or whatever programming 158 00:08:59,870 --> 00:09:03,620 language and you want to take some action here, right? 159 00:09:03,680 --> 00:09:06,110 We don't want to do everything to through JavaScript. 160 00:09:06,110 --> 00:09:09,570 And that's why that is why I include this form here. 161 00:09:09,620 --> 00:09:09,960 Right. 162 00:09:10,760 --> 00:09:17,120 So saving this one and it's going to put the calories here. 163 00:09:17,360 --> 00:09:22,400 You can put the quantity here, calories description and you're going to go there. 164 00:09:22,400 --> 00:09:24,320 Now, it's not going to work here because it's form. 165 00:09:24,330 --> 00:09:26,030 See what's happening on top. 166 00:09:27,920 --> 00:09:35,000 And the last panel is this exercise panel, and it's pretty much a copy of the food panel. 167 00:09:35,480 --> 00:09:35,900 Right? 168 00:09:37,550 --> 00:09:38,480 Where is that one? 169 00:09:39,440 --> 00:09:40,340 Here it is. 170 00:09:42,390 --> 00:09:46,810 Exercise Spanel, let me just find the other one here is a calorie burn. 171 00:09:47,130 --> 00:09:48,170 This is the exercise. 172 00:09:48,600 --> 00:09:48,940 Right. 173 00:09:49,290 --> 00:09:53,940 So it's pretty much copy of the food battle, food sliders. 174 00:09:53,940 --> 00:10:02,170 So we do have these three buttons here in the work, actually, by I'm just going to save this one. 175 00:10:03,450 --> 00:10:05,970 They're working here that's burning. 176 00:10:06,180 --> 00:10:07,950 So one is it closing? 177 00:10:07,950 --> 00:10:09,120 One, it's opening. 178 00:10:09,120 --> 00:10:10,060 And that's pretty much it. 179 00:10:10,230 --> 00:10:13,200 I toggle here in adding classes. 180 00:10:13,200 --> 00:10:17,750 I remove classes in some of the instances and that's pretty much it. 181 00:10:18,000 --> 00:10:20,840 This is close lids for this. 182 00:10:20,850 --> 00:10:25,320 So, for example, when you have open up, if you click it again, it will close automatically. 183 00:10:25,320 --> 00:10:28,890 But if you do it here, it will close everything. 184 00:10:29,100 --> 00:10:32,580 It will close it even if this one is open, this one and this one. 185 00:10:32,880 --> 00:10:33,750 That is my logic. 186 00:10:33,750 --> 00:10:38,630 If something is messed up in the code, at least that will kick in and it will close everything. 187 00:10:39,000 --> 00:10:42,380 So that's pretty much eat of these projec walk through. 188 00:10:42,630 --> 00:10:44,400 So I hope you like this one. 189 00:10:45,840 --> 00:10:50,100 So this is the first election was too boring, but I needed to get out of my chest. 190 00:10:50,100 --> 00:10:52,890 I need to explain to you why I use this font. 191 00:10:52,890 --> 00:10:53,310 Awesome. 192 00:10:53,310 --> 00:10:55,320 And why it can be changing the future. 193 00:10:55,560 --> 00:11:00,220 And you need to take care of the icons you need to search. 194 00:11:00,330 --> 00:11:08,490 These icons have been changed or the writings here in my class, if they call it a little bit different, 195 00:11:08,490 --> 00:11:13,500 because maybe I'll not have time to update this lecture, but you can do it with your own search. 196 00:11:13,950 --> 00:11:15,130 So that's pretty much it. 197 00:11:15,180 --> 00:11:16,410 This is the entire structure. 198 00:11:16,650 --> 00:11:19,530 We have one, two, three, four folders in one file. 199 00:11:19,710 --> 00:11:25,440 Inside these folders, we do have files, but from next lecture, we are going to work only in that 200 00:11:25,450 --> 00:11:26,060 dodgiest. 201 00:11:26,070 --> 00:11:34,020 And I didn't just told you, we are linking those two project to files here in the bottom below the 202 00:11:34,020 --> 00:11:34,290 bottom. 203 00:11:34,290 --> 00:11:34,580 Right. 204 00:11:34,830 --> 00:11:35,910 So thank you very much. 205 00:11:36,060 --> 00:11:37,970 And I will see you in the next.