1 00:00:00,210 --> 00:00:06,500 Hopefully by now, we already know the drill, we navigate back to our people online. 2 00:00:06,630 --> 00:00:13,050 I'm going to clear my integrated terminal and of course, I'm going to be looking for a project, something 3 00:00:13,410 --> 00:00:15,650 more specifically the of Boulder. 4 00:00:15,990 --> 00:00:18,690 So City, we've got random person. 5 00:00:18,990 --> 00:00:21,060 And then I grab the setup folder. 6 00:00:21,420 --> 00:00:25,800 And once we're here, we're going to go with NPM Install to get all our dependencies. 7 00:00:26,070 --> 00:00:31,140 And of course, we'll also start to start up our dev server. 8 00:00:31,750 --> 00:00:36,540 As far as the setup, I already provided the icons. 9 00:00:36,840 --> 00:00:43,200 So if you take a look at the source and objets more specifically, because there's going to be some 10 00:00:43,200 --> 00:00:47,650 imports, so we're going to have our icons as well as the URL. 11 00:00:48,180 --> 00:00:54,840 So this is the URL that the external API provides, and I'm going to cover this. 12 00:00:54,840 --> 00:01:03,240 You are in more detail in NextRadio when we're going to talk about the external API and then also I 13 00:01:03,240 --> 00:01:04,730 have a default image. 14 00:01:04,920 --> 00:01:09,630 So eventually, of course, we will get all our images from the API. 15 00:01:10,050 --> 00:01:13,110 But for a default one, I would want to display something. 16 00:01:13,110 --> 00:01:18,900 And even though we can use whichever image we would want, you'll notice that I just used one of the 17 00:01:18,900 --> 00:01:21,780 endpoints that the API provides. 18 00:01:22,020 --> 00:01:28,150 Essentially, when we're getting those around users, of course, we get all kinds of images. 19 00:01:28,470 --> 00:01:33,480 So in this case, I just set up the URL that points to one specific one. 20 00:01:33,660 --> 00:01:38,940 Keep in mind, you can use whichever image you want, so that's going to be our default image. 21 00:01:39,210 --> 00:01:44,010 And then, of course, we would want to work on our general structure. 22 00:01:44,400 --> 00:01:51,390 And I think I'm going to start in this case by setting up all our state values and we're going to have 23 00:01:51,390 --> 00:01:51,760 four. 24 00:01:52,260 --> 00:01:57,090 So since we're putting there, there's going to be one for loading while we're loading. 25 00:01:57,300 --> 00:02:03,870 And then we'll also go with set loading, of course, and then we're going to use state and by default, 26 00:02:03,870 --> 00:02:04,790 it is going to be true. 27 00:02:05,380 --> 00:02:07,310 Then also I'm going to have the person. 28 00:02:07,830 --> 00:02:11,880 So that is going to be the person that I'm currently displaying. 29 00:02:12,180 --> 00:02:17,930 So person here and then we're going to go see that person and that one will be equal to now. 30 00:02:18,270 --> 00:02:21,750 So you state of mind, the default value will be no. 31 00:02:22,150 --> 00:02:32,250 And also I would want to go with title value const title and set title, and I will be equal to use 32 00:02:32,250 --> 00:02:35,640 state and by default I would want to have it as a name. 33 00:02:36,060 --> 00:02:40,380 And this value will control what we're displaying here. 34 00:02:40,680 --> 00:02:43,740 So notice how I have my name and then some kind of value. 35 00:02:43,830 --> 00:02:49,020 And then I have email, page and street, of course, the phone and a password. 36 00:02:49,320 --> 00:02:55,950 So the title will be right here in the middle and of course we'll change it depending on which icon 37 00:02:56,280 --> 00:02:58,020 we are hovering over. 38 00:02:58,680 --> 00:03:00,060 And I'm going to navigate back. 39 00:03:00,060 --> 00:03:02,010 That is my title by default is going to be name. 40 00:03:02,320 --> 00:03:03,810 I'll copy and paste. 41 00:03:04,080 --> 00:03:08,370 And I just want to change this one around where it's not going to be title. 42 00:03:08,860 --> 00:03:15,660 We're going to go with a value like so, and that one will be by default a random person. 43 00:03:16,440 --> 00:03:18,720 So say here a random person. 44 00:03:19,230 --> 00:03:27,090 Eventually we will set up our search function to get the data that is coming up in the next video and 45 00:03:27,090 --> 00:03:28,740 also have a user factor. 46 00:03:29,160 --> 00:03:37,740 And also I we want to set up a function that we're going to call every time we hover over the icons, 47 00:03:38,010 --> 00:03:38,760 not the moment. 48 00:03:39,060 --> 00:03:40,740 It is just going to be a placeholder. 49 00:03:41,790 --> 00:03:48,030 So we're going to say here constantly handle value and I'm going to be looking for everand object. 50 00:03:48,270 --> 00:03:55,590 That's why I'll pass any and and here I can just go with E and then DOT Target just so I can see whether 51 00:03:55,590 --> 00:03:56,650 my functionality works. 52 00:03:57,090 --> 00:04:01,970 So that should be our initial set up in our component. 53 00:04:02,250 --> 00:04:04,740 And then, of course, we can start working on the return. 54 00:04:05,100 --> 00:04:11,070 So again, it's not just going to be a heading to it's going to be Maytag's over here. 55 00:04:11,520 --> 00:04:17,810 And then instead of the Maytag's, there's going to be a deal with a class of block and BCG black. 56 00:04:18,210 --> 00:04:22,560 So two classes, BCG and then hyphen black. 57 00:04:23,020 --> 00:04:28,500 And right next to Dev, there's going to be a with a class of block. 58 00:04:28,960 --> 00:04:31,940 So we're going to go here only the block once I serve. 59 00:04:32,320 --> 00:04:34,190 That's something that I should say. 60 00:04:34,530 --> 00:04:38,460 I have two blocks essentially inside of the second block. 61 00:04:38,700 --> 00:04:41,400 This is where I would want to set up my user. 62 00:04:41,730 --> 00:04:44,910 So the user is going to be in there with the class of container. 63 00:04:45,180 --> 00:04:48,030 And I would want to start with my image. 64 00:04:48,420 --> 00:04:55,050 And like I said, eventually, of course, we'll get this from the random user API, but for the time 65 00:04:55,050 --> 00:04:59,880 being is just going to be a default, an image like so. 66 00:05:00,360 --> 00:05:03,990 And also what I would want is set up alternative. 67 00:05:04,380 --> 00:05:09,960 And as far as the alternative, we're just going to say random online user. 68 00:05:10,470 --> 00:05:12,750 And I also want to add a little bit of siestas. 69 00:05:13,380 --> 00:05:21,120 And we're just going to say here, random or I'm sorry, user and user, I've been Imja, let's say 70 00:05:21,120 --> 00:05:24,720 it, and we should have the container as well as the image. 71 00:05:25,020 --> 00:05:30,330 And now let me showcase how we can use the and and or operators. 72 00:05:30,540 --> 00:05:35,670 So imagine the scenario where at the moment I have the person now person is not. 73 00:05:35,850 --> 00:05:39,060 But I know that eventually this person will be an object. 74 00:05:39,480 --> 00:05:45,930 And in that object there's going to be a property by the name of image that will of course, provide 75 00:05:45,930 --> 00:05:52,240 Medoro that will provide me that endpoint, that will point to that specific person. 76 00:05:52,710 --> 00:05:59,100 So here the moment since I have no yeah, technically I can just display the default image, but I also 77 00:05:59,100 --> 00:06:05,070 can write or set up my functionality where I want to say if the person is an object. 78 00:06:05,080 --> 00:06:13,830 So I say if a person is not now, then look for person that I am and I'm sorry image I guess. 79 00:06:14,140 --> 00:06:19,320 And if that is not the case, then just display default image again. 80 00:06:19,320 --> 00:06:25,350 My whole idea here is to get you comfortable with the syntax, what you're saying. 81 00:06:25,350 --> 00:06:32,760 Yeah, if the person is an object, essentially, if it is not now, then look for person image. 82 00:06:33,090 --> 00:06:39,510 And if that is not the case, if the person is still no more than right away, go for default image. 83 00:06:39,780 --> 00:06:45,510 And again, the reason why we're having this person with that and operator, because if I'm just going 84 00:06:45,510 --> 00:06:51,910 to go with person image, I'm going to have a big fat error because at the moment, person is not object. 85 00:06:51,990 --> 00:06:53,450 Eventually it will, but now it is. 86 00:06:53,460 --> 00:07:00,840 Now, if I'm trying to get the property on the person that is actually now at the moment, then of course 87 00:07:01,110 --> 00:07:02,390 I will have that error. 88 00:07:02,640 --> 00:07:04,530 So let me go back person. 89 00:07:05,220 --> 00:07:10,830 If that's not the case, then of course I'll just display my default image, something where we have 90 00:07:10,830 --> 00:07:11,250 covered. 91 00:07:11,550 --> 00:07:17,100 But I think that it is very important for you to be comfortable with that because of course you will 92 00:07:17,100 --> 00:07:21,200 use this particular syntax in your own project as well. 93 00:07:21,570 --> 00:07:24,410 Then we're going to have two programs now. 94 00:07:24,420 --> 00:07:30,450 One is going to have a class name of user and non hyphen title. 95 00:07:30,840 --> 00:07:35,340 And then inside of it, I'm just going to say my then I'm going to look for my title. 96 00:07:35,730 --> 00:07:40,170 And we already know that by default, of course, it is just a name. 97 00:07:40,350 --> 00:07:45,900 So we're going to go your title and then is so we should see my name. 98 00:07:46,500 --> 00:07:48,000 And of course we're doing so. 99 00:07:48,000 --> 00:07:48,600 That's awesome. 100 00:07:48,780 --> 00:07:52,560 And then there's going to be a second program that actually holds the value. 101 00:07:52,830 --> 00:07:57,480 So I'm going to go here with the paragraph with a class of user hyphen value. 102 00:07:57,750 --> 00:08:01,470 And inside of it, I just want to display the value. 103 00:08:01,830 --> 00:08:09,960 So whatever I'm getting from the site, which of course is the random person at the moment, and then 104 00:08:09,960 --> 00:08:12,750 we're going to have the whole list of the icons. 105 00:08:13,170 --> 00:08:19,500 So we have the paragraph, then I would want to create a there with class values list. 106 00:08:19,830 --> 00:08:23,820 And so out of there we're going to have a bunch of buttons. 107 00:08:24,120 --> 00:08:29,570 So we're going to go here with a button and then we're going to add a class name off icon. 108 00:08:29,980 --> 00:08:38,070 Then there's going to be a data label, which essentially is just going to provide that value to our 109 00:08:38,070 --> 00:08:41,280 state so that we all know that if. 110 00:08:41,650 --> 00:08:47,140 I'm, for example, hovering over the name button, I need to change the name, if I'm hovering over 111 00:08:47,140 --> 00:08:51,520 the password button, then of course I'm changing this to the password. 112 00:08:51,940 --> 00:08:56,650 So I go here with data and I'll call this label. 113 00:08:56,920 --> 00:09:02,410 And for the first one, I would want to set it up as a name and then eventually there's going to be 114 00:09:02,410 --> 00:09:04,710 that on mouseover. 115 00:09:04,870 --> 00:09:11,740 So remember, we just set up this placeholder handle value, but I don't want to do that on a click, 116 00:09:11,950 --> 00:09:17,190 even though technically you can make an argument that, of course, we can set up on click event listener 117 00:09:17,380 --> 00:09:18,000 in this case. 118 00:09:18,010 --> 00:09:26,830 Again, I'm going to set up on mouseover register where we're listening for events where our mouse pointer 119 00:09:27,070 --> 00:09:32,920 moves on to the button and then I'll pass in my handle volume and line instead of the button. 120 00:09:33,160 --> 00:09:37,440 I would just want to go with F.A.A. user icon. 121 00:09:37,750 --> 00:09:40,090 That's the whole point, why I got the icons. 122 00:09:40,330 --> 00:09:43,200 So now, of course, we just need the rest of the icons. 123 00:09:43,200 --> 00:09:46,000 So as you can see, we have six total. 124 00:09:46,240 --> 00:09:49,860 So, yes, there's going to be a bit of copying pasting. 125 00:09:50,290 --> 00:09:56,260 So what I would want right now is to grab this button and copy and paste, I believe, five times to 126 00:09:56,260 --> 00:09:59,380 one, two, three, four, five. 127 00:09:59,950 --> 00:10:02,580 Hopefully that makes sense. 128 00:10:02,950 --> 00:10:06,580 So I should have all of the items. 129 00:10:07,030 --> 00:10:10,780 And then what I'm looking for, of course, are different values. 130 00:10:11,320 --> 00:10:12,960 So here I have the user. 131 00:10:12,970 --> 00:10:15,820 OK, good design class name stays the same. 132 00:10:16,060 --> 00:10:17,710 Now the label, of course, will change. 133 00:10:18,110 --> 00:10:20,050 So the second one will be email. 134 00:10:20,410 --> 00:10:24,200 And the good news here is that we can still use the same function. 135 00:10:24,680 --> 00:10:30,610 So remember when we talked about sending them to functions, I said that, yeah, we can technically 136 00:10:30,610 --> 00:10:38,500 setup a separate function for each of our elements, but in some cases it's much more nicer if we group 137 00:10:38,650 --> 00:10:39,060 together. 138 00:10:39,430 --> 00:10:43,020 So in here I'll use the same function for all of them. 139 00:10:43,180 --> 00:10:44,920 I'm not sure if I need to change something. 140 00:10:45,070 --> 00:10:47,920 I only need to do that in one place. 141 00:10:48,220 --> 00:10:48,990 Now, let me say it. 142 00:10:49,030 --> 00:10:49,930 Let me double check. 143 00:10:49,960 --> 00:10:56,620 And of course I have way too many Sumai, but I'm just going to scroll down here and we're going to 144 00:10:56,620 --> 00:11:00,060 remove, I don't know, Lastra hopefully that should do it. 145 00:11:00,190 --> 00:11:00,570 Yep. 146 00:11:00,580 --> 00:11:03,610 Now we have six, so that's what I was looking for then. 147 00:11:03,610 --> 00:11:04,720 Let me scroll up a little bit. 148 00:11:05,080 --> 00:11:07,690 I have my email, so that's my label. 149 00:11:07,690 --> 00:11:08,680 That is very important. 150 00:11:08,920 --> 00:11:11,740 And of course this value also change. 151 00:11:11,980 --> 00:11:13,810 I'm looking for an envelope open. 152 00:11:14,020 --> 00:11:17,260 That's the icon I would want to display again. 153 00:11:17,260 --> 00:11:18,370 Next button. 154 00:11:18,730 --> 00:11:24,370 I have class name the same icon data label will be different in this case. 155 00:11:24,370 --> 00:11:26,230 I'm looking for the age. 156 00:11:26,590 --> 00:11:35,200 And as far as the icon, we have calendar and then times like so serried there is now we have our calendar 157 00:11:35,770 --> 00:11:36,170 now. 158 00:11:36,170 --> 00:11:36,550 What else. 159 00:11:36,550 --> 00:11:36,940 What else. 160 00:11:36,940 --> 00:11:37,330 What else. 161 00:11:37,330 --> 00:11:37,900 What else. 162 00:11:38,410 --> 00:11:42,070 We're looking for the street. 163 00:11:42,520 --> 00:11:48,850 So I'm going to keep on scrolling and here I'm going to say data label is straight. 164 00:11:49,270 --> 00:11:56,440 And then as far as the icon, we have f a map, so save that one and then there's two more. 165 00:11:56,440 --> 00:11:58,300 We have one for phone and one for password. 166 00:11:58,750 --> 00:12:00,040 So let me keep on scrolling. 167 00:12:00,040 --> 00:12:10,120 We have phone over here and the icon will be f payphone by phone and then the last one will be the password. 168 00:12:10,120 --> 00:12:13,780 So we go with password on line. 169 00:12:13,780 --> 00:12:18,030 The value for the icon, of course, will be F.A.A. lock. 170 00:12:18,700 --> 00:12:21,910 Now we're almost, almost almost done. 171 00:12:22,270 --> 00:12:25,300 But right outside is there where I have the values. 172 00:12:25,570 --> 00:12:31,510 I also want to get the button that gets that new user. 173 00:12:31,750 --> 00:12:38,830 So we're going to go here with a button, then I'll add the class name and the name will be beaten and 174 00:12:38,830 --> 00:12:40,150 type will be button. 175 00:12:40,720 --> 00:12:42,070 So button. 176 00:12:42,370 --> 00:12:48,490 And once we're click, then of course we will invoke our get. 177 00:12:48,490 --> 00:12:51,640 Here's a function, but we're not going to worry about that right now. 178 00:12:51,940 --> 00:12:55,590 And then instead of the button, I, we just want to display whether we're loading or not. 179 00:12:56,080 --> 00:12:59,410 So in this case, I'm not going to set up a separate component. 180 00:12:59,680 --> 00:13:04,510 I'm just going to say if I'm loading, then I would want to display loading up. 181 00:13:04,840 --> 00:13:09,340 And if I'm not loading, well, then I'm just going to say a random user. 182 00:13:09,610 --> 00:13:11,710 So here's by default loading. 183 00:13:11,710 --> 00:13:12,130 It's true. 184 00:13:12,490 --> 00:13:15,280 That's what I would have it over here as far as the value. 185 00:13:15,610 --> 00:13:19,930 And that's how the general setup should look like. 186 00:13:20,200 --> 00:13:21,700 Again, we have some kind of image. 187 00:13:21,700 --> 00:13:26,590 We have some kind of values for a text, and then we have a bunch of icons. 188 00:13:26,890 --> 00:13:34,930 And as we're hovering, if everything is correct in the console, we should get some pass unnoticed 189 00:13:34,930 --> 00:13:35,140 here. 190 00:13:35,380 --> 00:13:41,050 As I'm hovering over, we're just making sure that I'm hovering over. 191 00:13:41,220 --> 00:13:45,630 The buttons, not a button icon, button class icon. 192 00:13:45,930 --> 00:13:49,140 So that means that all our setup is correct. 193 00:13:49,480 --> 00:13:52,200 Now, of course, we can add more functionality.