1
00:00:00,180 --> 00:00:00,750
Excellent.

2
00:00:00,780 --> 00:00:08,580
We've got a structure now, of course, let's set up the functionality first, I guess let's test whether

3
00:00:08,580 --> 00:00:12,510
we can see the control log when we click on.

4
00:00:13,810 --> 00:00:16,660
Yes, that would be a first step, Nerdist.

5
00:00:16,770 --> 00:00:20,840
Now we have a world, of course, an inside handle some.

6
00:00:20,840 --> 00:00:25,170
But the first thing that I would want is to call set text.

7
00:00:25,530 --> 00:00:35,280
So that is going to set up my text and I just want to pass in data whatever array I'm getting back from

8
00:00:35,280 --> 00:00:36,060
my dad address.

9
00:00:36,300 --> 00:00:42,510
I would just want to pass it into text since that way we could set up the iteration as well.

10
00:00:42,750 --> 00:00:47,100
So I'm going to go with some text and I'll just pass in the data again.

11
00:00:47,100 --> 00:00:48,870
If you need to console it, please do so.

12
00:00:49,050 --> 00:00:53,160
But I can tell you right away that it is an array with eight items.

13
00:00:53,430 --> 00:00:58,490
And now where I have the alarm text, I'm not going to add those paragraphs, of course, manually.

14
00:00:58,770 --> 00:01:01,500
What I would want instead is to go with text.

15
00:01:01,840 --> 00:01:07,420
Then I'll use my map method and then I'll iterate over my text right now.

16
00:01:07,470 --> 00:01:12,960
And here I'm just going to call this item and then the index since I have the list as well.

17
00:01:13,260 --> 00:01:15,370
And then we're going to go with paragraphs.

18
00:01:15,370 --> 00:01:20,730
So we're returning a paragraph and let's add a key and the value will be indexed.

19
00:01:20,970 --> 00:01:23,220
And in here I would want to see the item.

20
00:01:23,580 --> 00:01:32,790
So what I'm doing in the objects or I guess in the data as I have my array of text and then each item

21
00:01:33,090 --> 00:01:34,590
is this string.

22
00:01:34,770 --> 00:01:37,100
So that is going to be my paragraph.

23
00:01:37,410 --> 00:01:39,840
I'm not in the app, JSM iterating over.

24
00:01:40,050 --> 00:01:47,460
I'm creating paragraphs for every item in that array and then I just grab that string and push inside

25
00:01:47,460 --> 00:01:48,370
of that paragraph.

26
00:01:48,600 --> 00:01:54,120
So what you should notice by default, of course, there's going to be no text, but then if we click

27
00:01:54,120 --> 00:01:59,550
on Generated, we can just get all these eight paragraphs, which is awesome.

28
00:01:59,940 --> 00:02:06,600
So now of course, we would need to start working with our values because, yeah, it is nice to pass

29
00:02:06,600 --> 00:02:13,110
in the whole array, but the whole idea is that we would control how many paragraphs we would want.

30
00:02:13,440 --> 00:02:16,800
And I'm here, of course we can access the account.

31
00:02:16,800 --> 00:02:17,220
Correct.

32
00:02:17,370 --> 00:02:24,300
Because what's really cool, since we have right now the controlled input in the handle segment, I

33
00:02:24,300 --> 00:02:28,140
can just check what is the account value in the state.

34
00:02:28,320 --> 00:02:34,980
So if a log count, you'll see that every time we change the value and then we click on generator,

35
00:02:35,220 --> 00:02:37,620
now it says, well, we're getting six.

36
00:02:37,940 --> 00:02:39,620
So now in here I'm going to go three.

37
00:02:39,630 --> 00:02:46,560
And there is now, of course, I have the three now one Gotcher here is that even though the type is

38
00:02:46,560 --> 00:02:50,310
number, essentially what you're getting back is a string.

39
00:02:50,670 --> 00:02:57,360
So if you don't believe me, you can type here type of count and you'll notice that even though technically

40
00:02:57,570 --> 00:03:01,380
you would expect this one to be number, essentially it is a string.

41
00:03:01,800 --> 00:03:08,520
Now, I can honestly say that in this scenario, the functionality we're about to set up technically

42
00:03:08,520 --> 00:03:09,240
doesn't matter.

43
00:03:09,450 --> 00:03:11,310
But I still want to point that out.

44
00:03:11,520 --> 00:03:12,720
This gotcha.

45
00:03:12,900 --> 00:03:18,960
And that's why I'll show you how you would fix it if there's going to be some cases where you actually

46
00:03:18,960 --> 00:03:20,310
would want it to be a number.

47
00:03:20,310 --> 00:03:23,970
Again, in our case, functionality will work regardless.

48
00:03:24,360 --> 00:03:29,780
But I thought that it was a important point that I definitely wanted to make.

49
00:03:30,030 --> 00:03:34,650
So I'm going to create a new variable and I'm going to use that on purpose.

50
00:03:34,980 --> 00:03:38,930
And that is going to be equal to amount and I'm going to pass.

51
00:03:38,940 --> 00:03:43,980
And so I have my function where I just get the current value.

52
00:03:44,250 --> 00:03:49,890
So that way, even though it is a string, so essentially I'm getting back the string from the number

53
00:03:50,280 --> 00:03:54,690
one side, one percent, you'll see that, of course, it is going to be a number again.

54
00:03:55,110 --> 00:03:55,830
Don't believe me.

55
00:03:55,830 --> 00:04:01,410
You can just log the amount and you'll see that even though originally it was a string, now it is a

56
00:04:01,410 --> 00:04:01,860
number.

57
00:04:02,670 --> 00:04:08,250
I can definitely see that even without a running type of because the color is below.

58
00:04:08,610 --> 00:04:14,730
So the for numbers color will be blue and for the string, of course it is going to be a black.

59
00:04:15,060 --> 00:04:17,520
OK, so I've got my amount.

60
00:04:17,760 --> 00:04:20,750
So now let's start using it where I have set text.

61
00:04:21,610 --> 00:04:28,480
And then I have my full data, all right, now, I don't want to display all eight paragraphs, correct.

62
00:04:28,830 --> 00:04:33,670
I would want to display as many paragraphs as the user wants.

63
00:04:34,030 --> 00:04:41,650
So if the user wants to, I need to come up with a way where I can remove some items from the array

64
00:04:41,950 --> 00:04:47,420
where essentially I only display the items that the user is requesting.

65
00:04:47,740 --> 00:04:54,490
And in this case, we can use slice method on the array, not slice will return a new copy.

66
00:04:55,960 --> 00:05:01,540
And then we select items from start to the end.

67
00:05:01,720 --> 00:05:07,910
Now the end is not included and those start and unbias represent indexes.

68
00:05:08,200 --> 00:05:16,780
So if I go slice and if I say zero and comma, that means that I'm going to be selecting from the start

69
00:05:16,780 --> 00:05:19,960
of the array and that whatever is the end.

70
00:05:20,260 --> 00:05:25,060
So whatever is the value for end now, the end is not included.

71
00:05:25,510 --> 00:05:31,450
So you need to keep that in mind because later it is going to be important where I'm going to go with

72
00:05:31,450 --> 00:05:31,960
amount.

73
00:05:32,170 --> 00:05:33,890
So that is when I'm passing in.

74
00:05:34,660 --> 00:05:40,630
And now if we go with correct values, because there's still a little bit of gotcha, we should see

75
00:05:40,630 --> 00:05:42,450
some paragraphs on the screen.

76
00:05:42,670 --> 00:05:46,390
So if I go, for example, with one, I should generate one.

77
00:05:46,790 --> 00:05:51,610
If I go to then of course I'm going to go to and then so on and so forth.

78
00:05:51,940 --> 00:06:00,640
Now the educations are going to be if I go, we have negative, OK, because at the moment if someone

79
00:06:00,670 --> 00:06:08,200
goes bananas and it just displays all the items, or you'll also notice that if we refresh, for example,

80
00:06:08,680 --> 00:06:14,920
and if I go with, I don't know, 10 or whatever, something above eight, again, I'm going to get

81
00:06:14,920 --> 00:06:17,290
all the items, which is kind of OK.

82
00:06:17,290 --> 00:06:23,710
But I would want to have a bit stricter set up here in my function where I would want to check.

83
00:06:23,710 --> 00:06:26,650
Hey, listen, what is the value for the count?

84
00:06:26,950 --> 00:06:30,640
And depending on that, I'll change the value for the amount as well.

85
00:06:30,920 --> 00:06:39,940
I'm going to say, if count is less or equal to zero, what I would want is a set up amount equal to

86
00:06:39,940 --> 00:06:40,270
one.

87
00:06:40,600 --> 00:06:43,450
So if that is the case, just this one program.

88
00:06:43,750 --> 00:06:51,970
And the second thing is if the count is bigger than eight, then always, always make sure that the

89
00:06:51,970 --> 00:06:54,630
amount will be equal to eight.

90
00:06:54,850 --> 00:07:01,600
And with that in place, I can just say what I notice here, how the amount is equal to it.

91
00:07:01,930 --> 00:07:05,950
So what happens since I have eight items in my data?

92
00:07:05,950 --> 00:07:08,810
Just the last index will be seven.

93
00:07:09,280 --> 00:07:14,650
So in here, if it is bigger than eight and that means that amount will be equal to it.

94
00:07:14,890 --> 00:07:18,260
Now the thing is, the end is not included.

95
00:07:18,760 --> 00:07:25,540
So when we are looking at the set up, don't think that just because the last the seven and I'm spending

96
00:07:25,540 --> 00:07:29,570
is equal to that, there is going to be that one last empty value.

97
00:07:29,620 --> 00:07:34,210
No, because it ends up to that and value.

98
00:07:34,450 --> 00:07:36,400
So the end value is not included.

99
00:07:36,660 --> 00:07:41,260
However, the first one, of course, in my case, zero, that one is included.

100
00:07:41,290 --> 00:07:42,550
So if I never get back.

101
00:07:43,430 --> 00:07:49,610
Now I have my functionality where I can generate two or I can generate one, and if I go with zero,

102
00:07:49,760 --> 00:07:57,070
if I go with negative and if I remove items altogether, I'll always, always have this one paragraph.

103
00:07:57,680 --> 00:08:04,640
And then if I go with, I don't know, 50, then of course I'll generate my max of eight, which of

104
00:08:04,640 --> 00:08:10,560
course, in your case, if you have more paragraph's, you can definitely display more paragraph's.

105
00:08:10,730 --> 00:08:12,280
So that's our application.

106
00:08:12,500 --> 00:08:16,700
Hopefully everyone enjoy the project and I hope to see your next one.