1
00:00:09,190 --> 00:00:09,770
Hey there.

2
00:00:09,790 --> 00:00:10,670
Welcome back.

3
00:00:10,690 --> 00:00:17,020
In this video, we're going to work in this services area, so this is going to be very similar to what

4
00:00:17,020 --> 00:00:17,980
we've done here.

5
00:00:18,460 --> 00:00:26,710
But here the user could click on any of the items and we would just show the text accordingly.

6
00:00:26,980 --> 00:00:33,150
Now, this is a bit different because we only have the back and the forward arrows.

7
00:00:33,490 --> 00:00:42,100
So one we need to do is just controlling at each element we are and then going forward or backwards

8
00:00:42,100 --> 00:00:43,900
inside our array.

9
00:00:43,930 --> 00:00:50,410
So if you go to a visual studio code, you will see that this time instead of having just an object.

10
00:00:50,650 --> 00:00:51,880
So let's go up here.

11
00:00:52,330 --> 00:00:54,130
You can see that for the about us.

12
00:00:54,130 --> 00:00:57,030
We just have an object with properties.

13
00:00:57,460 --> 00:00:59,700
This time we actually have an array.

14
00:01:00,010 --> 00:01:02,140
So this is how we are going to control it.

15
00:01:02,410 --> 00:01:11,040
If we are on element zero and we click the forward arrow, we will just go to aliment one.

16
00:01:11,320 --> 00:01:12,880
So this is going to be simple.

17
00:01:12,880 --> 00:01:19,590
We're just going to have a little challenge when we reach the end or the start of the array.

18
00:01:19,600 --> 00:01:22,300
But let's leave it for a bit later.

19
00:01:22,660 --> 00:01:26,620
Let's start setting the unclick event for the year.

20
00:01:26,980 --> 00:01:36,790
So going down here, if we go to our page and inspect this element, we can see that we have a service

21
00:01:36,790 --> 00:01:41,290
previous and probably service next.

22
00:01:41,350 --> 00:01:42,340
Let's see this.

23
00:01:44,650 --> 00:01:46,700
And service next.

24
00:01:46,720 --> 00:01:50,710
So these are the two buttons that we work with.

25
00:01:50,740 --> 00:01:57,640
So going back to Visual Studio Code, let's create two variables just so we can organize this a bit

26
00:01:57,640 --> 00:02:01,720
better so far, let's say previous.

27
00:02:04,140 --> 00:02:04,830
Aram.

28
00:02:05,900 --> 00:02:16,310
This is going to be documents that get element by idea, and the idea of this element is service previous.

29
00:02:19,920 --> 00:02:23,370
Let's do the same thing for the next arrow.

30
00:02:26,170 --> 00:02:28,900
And here we have service next.

31
00:02:33,080 --> 00:02:40,130
All right, so the first thing we need to do is controlling at what index we are now, so we are starting

32
00:02:40,130 --> 00:02:41,380
from index zero.

33
00:02:41,390 --> 00:02:45,740
This is what it's showing on the page when it's loaded.

34
00:02:45,980 --> 00:02:47,630
So we have that webdesign.

35
00:02:47,630 --> 00:02:50,240
So this is element zero.

36
00:02:51,080 --> 00:02:54,710
So let's create a variable called current.

37
00:02:55,960 --> 00:02:59,230
Index or something like this, or maybe current.

38
00:03:00,240 --> 00:03:01,290
Service.

39
00:03:03,620 --> 00:03:06,870
Or current service index, it's really up to you.

40
00:03:06,890 --> 00:03:09,280
I'm just going to use current services.

41
00:03:09,290 --> 00:03:09,680
Good.

42
00:03:11,290 --> 00:03:14,080
So this is going to start at zero.

43
00:03:15,830 --> 00:03:23,780
So now when we click the next arrow, we are going to increment this value and when we click the previous

44
00:03:23,780 --> 00:03:26,640
arrow, we're going to decrement this value.

45
00:03:26,900 --> 00:03:29,060
So let's set two events here.

46
00:03:29,210 --> 00:03:33,570
So the first one is going to be for the next arrow.

47
00:03:33,590 --> 00:03:35,200
Let's get started with this.

48
00:03:35,540 --> 00:03:38,640
So next arrow dot on click.

49
00:03:39,230 --> 00:03:44,610
We are doing this because we already selected this element here, so it's easier for us.

50
00:03:44,960 --> 00:03:47,270
So next arrow, dot unclick.

51
00:03:48,240 --> 00:03:50,370
Let's create a function for this.

52
00:03:52,020 --> 00:03:57,210
And now what we need to do is incrementing the current service.

53
00:03:58,180 --> 00:03:58,750
Variable.

54
00:04:00,620 --> 00:04:08,180
As you see a bit later, first before doing this, we will need to do a test, but for now, just so

55
00:04:08,180 --> 00:04:13,630
we can get the functionality, the basic functionality working, let's just do this.

56
00:04:13,910 --> 00:04:16,340
So this is going to be current service.

57
00:04:17,810 --> 00:04:28,340
Plus equals one, and after doing this, we just need to get the title and text we want, so let's create

58
00:04:28,340 --> 00:04:29,900
a variable called title.

59
00:04:31,860 --> 00:04:36,690
Which is going to be the hour services variable.

60
00:04:38,400 --> 00:04:42,390
With an index of current service.

61
00:04:46,850 --> 00:04:50,540
And we want the title property.

62
00:04:51,820 --> 00:04:54,190
Let's do the same thing for the text.

63
00:05:04,950 --> 00:05:10,860
And now we just need to update our main element, so going back to the page.

64
00:05:12,500 --> 00:05:20,300
Let's see which element is this so we have the idea of service, text and service title.

65
00:05:23,320 --> 00:05:25,430
So let's just copy this.

66
00:05:25,750 --> 00:05:31,270
So, again, let's also create variables for these elements so we don't have to repeat them in the two

67
00:05:31,270 --> 00:05:31,840
event.

68
00:05:33,140 --> 00:05:34,160
So far.

69
00:05:36,180 --> 00:05:43,560
Maybe service title area, just so we don't mix with these variables, so service title area is.

70
00:05:45,190 --> 00:05:48,190
Document that get element by Eddie.

71
00:05:51,850 --> 00:05:56,580
That's it, and let's do the same thing for the text area.

72
00:05:57,690 --> 00:05:58,590
Service.

73
00:06:00,390 --> 00:06:01,680
Text area.

74
00:06:02,820 --> 00:06:09,620
And then we have service text pretty good, so now we can just do a service title area.

75
00:06:12,110 --> 00:06:14,420
Not in her e-mail.

76
00:06:15,380 --> 00:06:17,060
It's going to be the title.

77
00:06:19,640 --> 00:06:22,130
And let's do the same thing for the text.

78
00:06:25,840 --> 00:06:30,820
So service text area, we receive the text.

79
00:06:31,830 --> 00:06:34,980
Let's save this, let's see if this is working so far.

80
00:06:36,320 --> 00:06:42,800
So refreshing the page we are starting with webdesign, so when we click the next arrow now, we can

81
00:06:42,800 --> 00:06:44,180
see that this is working.

82
00:06:44,180 --> 00:06:46,610
We just saw it changing to branding.

83
00:06:46,610 --> 00:06:50,170
So let's go see the object to see if this is correct.

84
00:06:50,390 --> 00:06:53,900
So branding it starting with braze cent or something.

85
00:06:54,930 --> 00:07:02,250
As you can see, this is correct, if we click it again, it should change the digital marketing and

86
00:07:02,250 --> 00:07:05,520
the text starts with this Nunc word.

87
00:07:06,490 --> 00:07:07,290
See this?

88
00:07:08,350 --> 00:07:12,170
Digital marketing Nunk, so it seems to be working.

89
00:07:12,430 --> 00:07:15,970
Now let's do the same thing for this back arrow.

90
00:07:17,340 --> 00:07:19,590
So this is going to be similar.

91
00:07:25,560 --> 00:07:28,140
So for the previous arrow.

92
00:07:37,520 --> 00:07:43,130
This is going to be the same thing, but instead of incrementing, we are just going to decrement it.

93
00:07:43,130 --> 00:07:45,650
So minus equal one.

94
00:07:47,700 --> 00:07:51,820
And the rest of it is just going to be the same thing.

95
00:07:52,140 --> 00:08:00,750
So when we click the arrow, we go to the next index or to the previous index and then we just update

96
00:08:00,900 --> 00:08:01,540
the element.

97
00:08:01,890 --> 00:08:02,970
So by doing this.

98
00:08:04,080 --> 00:08:11,220
Refreshing the page, we can go forward branding, go back to web design.

99
00:08:11,640 --> 00:08:18,920
Let's go to digital marketing, go back to branding, go forward again to digital marketing.

100
00:08:19,230 --> 00:08:20,160
This is all good.

101
00:08:20,160 --> 00:08:26,230
Until we reach the start or the end of the array, then we are going to have problems.

102
00:08:26,250 --> 00:08:28,170
So if we go to the console.

103
00:08:29,990 --> 00:08:37,400
Digital marketing is the last one, and if I click this button again, we will have an error.

104
00:08:39,840 --> 00:08:46,530
So what's going on here is that when we reach the end of the array and we click next, it's not doing

105
00:08:46,530 --> 00:08:50,220
any test, all it's doing is incrementing the value.

106
00:08:50,460 --> 00:08:58,620
So when we reach the last item and we increment the index, we are just trying to get an element that

107
00:08:58,620 --> 00:09:02,280
doesn't exist, which in this case is index three.

108
00:09:02,430 --> 00:09:04,730
It does not exist in disarray.

109
00:09:04,950 --> 00:09:14,190
So we just need to do two basic tests for the previous and the next arrows, because if we reach the

110
00:09:14,190 --> 00:09:16,050
end or the start of the array.

111
00:09:17,050 --> 00:09:21,870
This is going to be a bit different, so let's start with the next arrow.

112
00:09:21,880 --> 00:09:30,220
So going back here when we click it instead of just incrementing disvalue first we should do a test.

113
00:09:30,610 --> 00:09:31,510
So if.

114
00:09:37,550 --> 00:09:46,270
If current service is the last index of that array, how do we know what's the last index of an array?

115
00:09:46,280 --> 00:09:53,390
Let's remember that the last index is always its length, minus one.

116
00:09:53,960 --> 00:10:02,730
So taking a look at this array, the length is tree and the index of the last element is two.

117
00:10:03,110 --> 00:10:09,980
So no matter the size of an array, the last index is always its length, minus one.

118
00:10:11,270 --> 00:10:14,150
So let's just copy the name of this variable.

119
00:10:17,380 --> 00:10:25,600
In here, if current service is the same as our services dot lenth.

120
00:10:28,550 --> 00:10:34,940
Minus one, so let's put this inside parentheses just so we make sure that.

121
00:10:36,570 --> 00:10:42,360
We are just going to do this before making the comparison.

122
00:10:44,450 --> 00:10:49,450
So if this is true, it means that we just reached the end of the array.

123
00:10:52,020 --> 00:10:53,280
So in this case.

124
00:10:54,350 --> 00:11:01,490
Instead of incrementing the value, we are just going to Saddat to zero again, so current service is

125
00:11:01,490 --> 00:11:02,850
going to be zero.

126
00:11:03,700 --> 00:11:04,640
Otherwise.

127
00:11:08,950 --> 00:11:10,900
We can just incremented.

128
00:11:11,980 --> 00:11:20,290
So doing this, let's test before we do it to the previous arrow, so refreshing, the page, second

129
00:11:20,290 --> 00:11:23,660
element, third element, this is the last one.

130
00:11:23,680 --> 00:11:28,170
So when we click this arrow again, it's just going back to the start.

131
00:11:28,570 --> 00:11:35,230
It identified that we are already at the last index, so it just went to zero again.

132
00:11:35,470 --> 00:11:38,380
So we can do this as many times as we want.

133
00:11:38,380 --> 00:11:40,010
And this is always going to work.

134
00:11:40,360 --> 00:11:46,510
Now we need to do the same thing for the previous arrow so we can just copy this.

135
00:11:52,880 --> 00:12:01,610
Now, this is going to be the code for the alse, and this time what we need to test is if current service

136
00:12:01,610 --> 00:12:02,480
is zero.

137
00:12:03,700 --> 00:12:12,430
So I'm just going to cut this with control X, and if current service is zero, it means that we just

138
00:12:12,430 --> 00:12:16,230
reach the start of the array instead of decrement it.

139
00:12:16,240 --> 00:12:20,540
What we are going to do is setting it to the last element.

140
00:12:21,130 --> 00:12:23,080
So what is the last element?

141
00:12:23,110 --> 00:12:27,070
Well, it's the array length minus one.

142
00:12:28,030 --> 00:12:33,400
So when we reach the start of the array, we are just going to set it to the end again.

143
00:12:35,540 --> 00:12:36,500
Saving this.

144
00:12:38,430 --> 00:12:46,290
Refresh the page, we are at the first element, let's try to go back, so we we are going to the last

145
00:12:46,290 --> 00:12:46,860
element.

146
00:12:47,610 --> 00:12:52,050
So let's do some tests, reached the end of the array.

147
00:12:52,680 --> 00:12:53,660
Click next.

148
00:12:53,700 --> 00:12:55,740
This is working well, clicking back.

149
00:12:55,740 --> 00:12:56,910
This is working well.

150
00:12:57,300 --> 00:13:01,100
So no matter the size of this array, we can even make a test here.

151
00:13:01,530 --> 00:13:03,180
Let's try to add another.

152
00:13:04,190 --> 00:13:04,940
Element.

153
00:13:08,710 --> 00:13:10,810
So the title is going to be.

154
00:13:12,150 --> 00:13:13,860
Test service.

155
00:13:17,410 --> 00:13:20,010
We can do this just to see if this is working.

156
00:13:21,890 --> 00:13:24,380
Saving this refreshing the page.

157
00:13:26,000 --> 00:13:28,320
Second element, third element.

158
00:13:28,340 --> 00:13:34,790
Now, the last one is the one we just tested, I just wrote it wrong, but that's OK because that's

159
00:13:34,790 --> 00:13:35,540
a test.

160
00:13:36,470 --> 00:13:42,820
So we can see that this is working no matter how many elements we have, if you want to add more services,

161
00:13:43,190 --> 00:13:44,880
this is still going to work.

162
00:13:45,140 --> 00:13:48,830
So when I click next, it's just going to the beginning of the array.

163
00:13:49,310 --> 00:13:54,210
If I'm at the start and I click back, it's just going to the last element.

164
00:13:54,620 --> 00:13:57,590
So this is working well and this one is done.

165
00:13:58,100 --> 00:14:00,740
So I'm just going to erase this test.

166
00:14:02,490 --> 00:14:10,050
Refresh the page now, this is good, we are making some progress now in the next video, we are going

167
00:14:10,050 --> 00:14:12,750
to work in this contact form.

168
00:14:12,930 --> 00:14:13,740
I'll see you then.