1 00:00:00,880 --> 00:00:03,670 And this, again, is going to be a functional of components or legislator. 2 00:00:04,040 --> 00:00:05,890 OK, so let's just create a company. 3 00:00:06,520 --> 00:00:07,780 Just hit on R-S.C.. 4 00:00:10,110 --> 00:00:13,140 And if it isn't working, then I must say that we have to type it manually. 5 00:00:13,470 --> 00:00:14,760 So it is going to be a concert. 6 00:00:16,910 --> 00:00:17,540 Catalyst. 7 00:00:22,950 --> 00:00:27,570 Now, this is not just going to be an out of function, so let's just make this an add on. 8 00:00:30,980 --> 00:00:38,500 And to their data that they were getting items that we're getting no exporter. 9 00:00:50,540 --> 00:00:53,000 OK, so now it needs to have a written statement, right? 10 00:00:53,000 --> 00:00:57,290 So let's just put up a written statement and inside this written statement, we are going to have many 11 00:00:57,290 --> 00:00:58,450 nested elements. 12 00:00:58,490 --> 00:01:08,550 The first one is going to be a depth of class name being equal to card and inside the this inside of 13 00:01:08,550 --> 00:01:12,310 this day, we are going to have another debate that is going to be of class name class enough. 14 00:01:12,740 --> 00:01:20,900 So let's just name it there and give it a class name equal to class in know, perhaps cardinal. 15 00:01:25,280 --> 00:01:30,290 Now, after this gardener, let's just close it first, us now inside this card today, we are going 16 00:01:30,290 --> 00:01:35,660 to have another day and that day is going to spell quite frank because you might recall there were two 17 00:01:35,660 --> 00:01:36,170 cards. 18 00:01:36,320 --> 00:01:40,460 One is going to hold up a front view and going to upper back view. 19 00:01:40,460 --> 00:01:45,020 So in our front card will give it that last name of card from. 20 00:01:49,050 --> 00:01:54,660 Now, close this now this is going to hold one particular image, so let's just give it that image and 21 00:01:54,660 --> 00:02:01,140 give it a source, and the source is going to be equal to the image that we're getting from the API. 22 00:02:01,140 --> 00:02:04,590 So this is going to be call to item or image. 23 00:02:05,220 --> 00:02:06,360 OK, so we have that image. 24 00:02:06,850 --> 00:02:08,910 Now it also needs to have an alternative name, right? 25 00:02:08,910 --> 00:02:11,640 Because every image element has to have an alternative name. 26 00:02:12,060 --> 00:02:16,590 So let's just give it an art with a name like Derica. 27 00:02:20,130 --> 00:02:22,440 OK, so we have an image now after this. 28 00:02:23,170 --> 00:02:26,650 God, then we are going to have another live outside of this card surrender. 29 00:02:27,300 --> 00:02:34,100 So let's just move out of our crowd front and create another death and we'll give it a last name off 30 00:02:35,550 --> 00:02:37,290 and guard back. 31 00:02:40,680 --> 00:02:45,870 So here we have a card back now, close this now inside this card that we're going to have the details 32 00:02:45,870 --> 00:02:51,030 of the actor like the named about the date of birth, their nickname, as well as their status, whether 33 00:02:51,030 --> 00:02:52,020 they're alive or dead. 34 00:02:52,530 --> 00:02:55,260 So let's give it to an element. 35 00:02:55,260 --> 00:02:59,520 So this element is going to have the name of the particular actor. 36 00:03:00,030 --> 00:03:04,590 So let's just put an item or name, not last name, just name. 37 00:03:05,790 --> 00:03:08,010 OK, so we have our items actor's name. 38 00:03:08,490 --> 00:03:12,420 Now, after this, we are going to have a list of unordered. 39 00:03:12,990 --> 00:03:13,980 Maybe another list. 40 00:03:13,980 --> 00:03:15,480 So let's just make another list. 41 00:03:15,780 --> 00:03:17,940 And inside this, I going to have elements. 42 00:03:18,150 --> 00:03:28,350 So First Element is going to hold up the actor's name because this name is the character's name, right? 43 00:03:29,040 --> 00:03:30,570 So this one is going to be a character's name. 44 00:03:38,140 --> 00:03:44,680 So let's give it in L.A., we'll give it a strong element and said the strong we are going to have the 45 00:03:44,680 --> 00:03:45,430 actor's name. 46 00:03:47,710 --> 00:03:49,360 An actor's name is going to be. 47 00:03:51,010 --> 00:03:57,520 Equal to and I'll say the strong, we will be putting up a -- portrait because this will be holding 48 00:03:57,520 --> 00:04:00,210 the date of the actor's name, so item. 49 00:04:01,370 --> 00:04:02,960 The portrait. 50 00:04:08,270 --> 00:04:12,350 Now, after this act, those, we're going to have another list element, so let's just copy it. 51 00:04:15,530 --> 00:04:18,380 OK, so second one is going to be holding their nicknames. 52 00:04:18,830 --> 00:04:21,110 So let's just name it nickname. 53 00:04:24,800 --> 00:04:27,500 And this one is going to hold up the item or nickname. 54 00:04:33,000 --> 00:04:39,210 Let me just close this, OK, so after this nickname will be also putting up their birthdays, like 55 00:04:39,210 --> 00:04:40,020 when is the birthday? 56 00:04:40,290 --> 00:04:42,630 So let's just spell it birthday. 57 00:04:45,290 --> 00:04:48,710 So this is the body and this item, the body. 58 00:04:55,780 --> 00:04:59,080 OK, so here we are having the actor's name, the nickname. 59 00:04:59,650 --> 00:05:06,190 OK, so this should be nice and not so aptly named the nickname, as well as the birth of his. 60 00:05:09,020 --> 00:05:13,670 And after this, we are going to display the status, whether they're alive or dead. 61 00:05:13,820 --> 00:05:18,800 So for that purpose, let's put up a strong again outside of the. 62 00:05:19,340 --> 00:05:22,850 So we will be making another lie and then this alive will be inside. 63 00:05:22,850 --> 00:05:24,560 The strong will be putting up the status. 64 00:05:26,000 --> 00:05:27,640 So let's just put up this vetoes. 65 00:05:31,990 --> 00:05:36,190 Now, this status is supposed to hold the data that whether they're alive or dead, right? 66 00:05:36,580 --> 00:05:38,260 So right after a strong. 67 00:05:39,660 --> 00:05:45,170 About whether or not we would be displaying their status, so let's just remove this and I'll take up 68 00:05:45,180 --> 00:05:46,980 a strong will be displaying a spine. 69 00:05:48,100 --> 00:05:52,770 They're doing this alive or dead and we want it of different colors, right? 70 00:05:52,770 --> 00:05:56,340 If they're alive, then the color should be green of that particular text and if they're dead and the 71 00:05:56,340 --> 00:05:57,000 caller should be dead. 72 00:05:57,780 --> 00:06:02,190 So and that is being displayed by our data like items, drug status. 73 00:06:02,340 --> 00:06:05,370 So will be conditionally rendering it so inside the spam. 74 00:06:05,370 --> 00:06:06,210 Let's give it a style. 75 00:06:07,890 --> 00:06:15,870 Let me just close, this man first said this man will be having the status, so let's just put up item 76 00:06:16,170 --> 00:06:17,310 that status. 77 00:06:20,150 --> 00:06:25,390 Now, this span is going to be a victim of inline styling. 78 00:06:25,430 --> 00:06:27,200 So let's just give it a style of. 79 00:06:30,620 --> 00:06:32,810 So in reality, you might recall how we stole elements. 80 00:06:33,080 --> 00:06:36,230 We give them a set of double set of collaborators. 81 00:06:36,710 --> 00:06:45,800 Now inside this collaboration, we be setting up a CSIS, so if the color so colors should be equal 82 00:06:45,800 --> 00:06:49,010 to item the status. 83 00:06:50,090 --> 00:06:57,260 So if the item that status is triple equals to a life, that means if they're alive. 84 00:07:01,830 --> 00:07:07,860 Then we won the color that should be on our color list should be equal to green. 85 00:07:08,190 --> 00:07:13,980 That means that they're alive in the text, speaking that the allies should be of green color, otherwise 86 00:07:13,980 --> 00:07:14,730 it should be avoided. 87 00:07:15,450 --> 00:07:18,540 So this is what we call conditional operators. 88 00:07:18,540 --> 00:07:24,840 So if, if, if that particular character is alive, then we want it to be displayed in green and if 89 00:07:24,840 --> 00:07:28,290 not, then the character, then the character should be displayed in red. 90 00:07:28,860 --> 00:07:31,290 So we have to enable it. 91 00:07:31,290 --> 00:07:31,950 No hit save. 92 00:07:31,960 --> 00:07:33,060 So here is the status. 93 00:07:33,840 --> 00:07:36,120 So now we have even configured to get a list. 94 00:07:36,150 --> 00:07:37,770 Now let's take a look at it. 95 00:07:38,070 --> 00:07:44,460 I assure you, it is going to be horrible because we haven't actually added any sorts of cases in it. 96 00:07:45,360 --> 00:07:48,150 I see there's a bit of error in that application. 97 00:07:48,660 --> 00:07:50,280 So let us see what it is. 98 00:07:50,550 --> 00:07:54,330 So if you just add to the problems, OK, so we're having some missing. 99 00:07:54,330 --> 00:07:59,330 OK, so here we have double bay brackets now. 100 00:07:59,340 --> 00:08:00,710 Remove this and let's save. 101 00:08:02,070 --> 00:08:04,350 OK, so we have configured most of the application. 102 00:08:04,620 --> 00:08:11,340 Now the only piece of state that remains is to add cases as well as past this loading into a character 103 00:08:11,340 --> 00:08:12,190 list item. 104 00:08:12,210 --> 00:08:13,860 So let's just say for now.