1
00:00:07,810 --> 00:00:14,670
Hey, everyone, in this video, we are going to work on this about US section, so what we need to

2
00:00:14,670 --> 00:00:19,650
do here, we have three different texts for this section.

3
00:00:19,800 --> 00:00:23,670
So we have the company's mission, vision and values.

4
00:00:24,000 --> 00:00:26,520
So we don't want to overcrowd our page.

5
00:00:26,730 --> 00:00:31,940
So we created something like this so people can only see the ones they want.

6
00:00:31,980 --> 00:00:35,670
So if I want to see the company's vision, I can just click here.

7
00:00:35,700 --> 00:00:39,410
If I want to see the company's values, I can just click here and so on.

8
00:00:39,420 --> 00:00:42,420
This is a common type of element in Web design.

9
00:00:42,430 --> 00:00:44,860
So let's see how we can approach this.

10
00:00:44,910 --> 00:00:51,210
So what we need to do when I click Vision, if you go back to visuals to code, you will see that I

11
00:00:51,340 --> 00:00:54,630
left an object for this section.

12
00:00:54,970 --> 00:00:58,020
So what we need to do is just getting the right text.

13
00:00:58,230 --> 00:01:01,710
So we have different texts for mission, vision and values.

14
00:01:01,980 --> 00:01:06,480
We just need to get the right text and place inside that element.

15
00:01:06,810 --> 00:01:09,690
And there's a second thing that we need to do.

16
00:01:09,720 --> 00:01:14,090
We need to change the background of the element that's selected.

17
00:01:14,370 --> 00:01:16,470
So if we inspect this.

18
00:01:17,700 --> 00:01:24,140
We will see that this is actually just using the same background as down here, it's nothing special

19
00:01:24,330 --> 00:01:29,550
if I copy this and apply to this third tab.

20
00:01:39,000 --> 00:01:45,680
You will see that this is what makes it looks like it's selected, so this is what we need to do.

21
00:01:45,690 --> 00:01:53,400
So changing the background and also the font weight, as you can see, the one that is selected has

22
00:01:53,400 --> 00:01:54,990
a font weight of bod.

23
00:01:55,320 --> 00:01:57,090
So if I do font.

24
00:01:59,790 --> 00:02:00,420
Wait.

25
00:02:02,150 --> 00:02:08,690
Bode, we can see that now, this is exactly like the one that is selected, so these are the two things

26
00:02:08,690 --> 00:02:10,340
that we are going to have to do.

27
00:02:10,370 --> 00:02:12,270
So let me just refresh the page.

28
00:02:12,650 --> 00:02:18,740
So first thing we need to do is setting the unclick event for all these elements.

29
00:02:18,740 --> 00:02:21,350
So probably they have a common class.

30
00:02:21,570 --> 00:02:22,820
So let's see this.

31
00:02:25,860 --> 00:02:32,460
So we have an element called backstabs, which is the parent element, and each of these elements.

32
00:02:34,780 --> 00:02:41,640
Have a class of single tab, so this is what we need to use to apply the click event to all of them,

33
00:02:42,100 --> 00:02:47,260
so I just copy this and right below here.

34
00:02:48,690 --> 00:02:53,970
I'm going to set the event, so this time let's create a variable called.

35
00:02:55,320 --> 00:02:58,560
Maybe about us Tab's.

36
00:03:00,170 --> 00:03:08,750
And then we are going to select all those elements, so document that, get elements by class name.

37
00:03:10,330 --> 00:03:16,630
Let's use that class name, and when we do this, we know that we are going to have an array back with

38
00:03:16,630 --> 00:03:17,910
all those elements.

39
00:03:18,130 --> 00:03:22,250
So now we just need to set the unclick event for all of them.

40
00:03:22,570 --> 00:03:27,080
We know that doing this with pure JavaScript requires a loop.

41
00:03:27,100 --> 00:03:28,750
So let's start a for loop.

42
00:03:29,380 --> 00:03:30,160
So for.

43
00:03:37,850 --> 00:03:42,530
A equals zero, A has to be smaller than.

44
00:03:43,590 --> 00:03:47,340
About us, Tab's that lenth.

45
00:03:48,560 --> 00:03:50,150
And a plus plus.

46
00:03:54,060 --> 00:04:00,000
All right, now we need to select each of these elements, so let's do it like this.

47
00:04:01,980 --> 00:04:07,320
With an index of a and then we just need to set Deon click event.

48
00:04:13,390 --> 00:04:18,350
OK, so when we click a tab, we need to know which one was it.

49
00:04:18,580 --> 00:04:28,800
So before we continue, let's do a console log and see what do we have when we use the key word this.

50
00:04:29,650 --> 00:04:35,370
So do you remember what happens to this keyboard inside and unclick event?

51
00:04:35,800 --> 00:04:36,970
Let's check it out.

52
00:04:37,570 --> 00:04:38,950
I'm just saving this.

53
00:04:39,760 --> 00:04:41,170
Refreshing the page.

54
00:04:41,410 --> 00:04:44,900
Let's go to the console and now I'm going to click it.

55
00:04:45,640 --> 00:04:51,070
So as you can see, we are able to get the element that has been clicked.

56
00:04:51,250 --> 00:04:53,060
So I'm just going to click Vision.

57
00:04:53,080 --> 00:04:55,270
Now I'm going to click mission.

58
00:04:55,720 --> 00:04:58,780
So as you can see, we can get this information.

59
00:04:58,810 --> 00:05:04,660
So now what we need to do is getting the inner HTML, because, as you can see, we have values, vision

60
00:05:04,660 --> 00:05:05,350
and mission.

61
00:05:05,590 --> 00:05:12,220
So we just have to pick the inner HTML so we can get the information from that object.

62
00:05:12,340 --> 00:05:13,570
So going back there.

63
00:05:17,540 --> 00:05:21,620
You can see that we don't even have to set it to lower case because.

64
00:05:22,970 --> 00:05:29,630
The object property has already been written exactly the same way, so we just need to get it.

65
00:05:31,170 --> 00:05:32,370
So let's say.

66
00:05:37,000 --> 00:05:47,560
Clicked value is going to be this dot in our age html, and now instead of sending only the element

67
00:05:47,560 --> 00:05:52,570
to the console, let's try to access this aboutus object.

68
00:05:55,030 --> 00:06:00,250
And as the property, we are just going to use this collect value.

69
00:06:02,590 --> 00:06:04,060
So when we do this.

70
00:06:06,390 --> 00:06:14,870
Refreshing the page again, if I click values, now I'm getting what's inside that object for the values.

71
00:06:14,880 --> 00:06:19,110
If I click vision the same thing, if I click mission, the same thing.

72
00:06:19,140 --> 00:06:23,150
So now we just need to send this inside this element.

73
00:06:23,160 --> 00:06:27,690
So this one here has an idea of box text.

74
00:06:31,080 --> 00:06:35,910
So document that yet, element by BIID.

75
00:06:38,080 --> 00:06:49,240
The idea is spox text, and we are going to set it in our e-mail to exactly what we just sent to the

76
00:06:49,240 --> 00:06:49,780
council.

77
00:06:51,440 --> 00:06:57,080
Saving this refreshing the page, let's try it out, I'm going to click Vision.

78
00:06:57,260 --> 00:07:01,040
As you can see, we just changed the content of this element.

79
00:07:01,280 --> 00:07:03,760
Let's see values this time.

80
00:07:04,160 --> 00:07:07,700
This is cool because we have a list inside here.

81
00:07:07,880 --> 00:07:10,580
And as you can see, this is rendering really well.

82
00:07:10,700 --> 00:07:13,820
If I click Mission, everything's working.

83
00:07:14,150 --> 00:07:19,450
So now what we need to do is just solve the problem of the tabs here.

84
00:07:19,460 --> 00:07:26,720
So any time we click on a tab, so the way we do this, any time we click on a tab, we are just going

85
00:07:26,720 --> 00:07:33,110
to reset the background color of all of them and then we will just get the one that has been clicked

86
00:07:33,380 --> 00:07:36,950
and we will set the correct background color.

87
00:07:38,790 --> 00:07:47,850
So going back to Visual Studio Code, after we change the HTML of the element inside here, we are going

88
00:07:47,850 --> 00:07:56,010
to have to start another loop because now we need to run through all the elements again so we can just

89
00:07:56,340 --> 00:07:58,380
copy this for a loop.

90
00:08:01,160 --> 00:08:02,240
And started here.

91
00:08:05,190 --> 00:08:09,600
Let's change the name of the variable to be so we don't have any conflict.

92
00:08:11,280 --> 00:08:17,430
All right, so now when any of those elements are clicked, so this is why we are inside this loop,

93
00:08:17,430 --> 00:08:20,840
we are just setting the unclick event for all those elements.

94
00:08:21,090 --> 00:08:29,610
So when any of them has a click event, we're just going to start a loop so we can change the background

95
00:08:29,610 --> 00:08:31,640
color for all the elements.

96
00:08:31,980 --> 00:08:34,530
So here we are just going to use.

97
00:08:39,470 --> 00:08:48,380
About a stabs with an index of B and now we are going to set the style property.

98
00:08:49,520 --> 00:08:58,640
Then the back ground collar, remember that since it has a dash, it does not follow the variable naming

99
00:08:58,640 --> 00:09:04,580
rules, we can just use the lower cammo case for it or we can just use.

100
00:09:06,490 --> 00:09:14,350
The braces, so if you want to use the exact name of the style, you can do like this, so background

101
00:09:14,740 --> 00:09:18,170
color, it's going to work exactly the same way.

102
00:09:18,760 --> 00:09:25,330
So now we are just setting the background color for all of them to the unselected color.

103
00:09:25,340 --> 00:09:27,810
So we already have a variable for this.

104
00:09:27,820 --> 00:09:33,700
So we just need to copy the name of the variable and use it right here and now.

105
00:09:33,700 --> 00:09:39,240
When we finish with this loop, we just need to get the elements that has been clicked.

106
00:09:39,460 --> 00:09:45,400
So let's remember that we can access the clicked element using this keyword.

107
00:09:45,580 --> 00:09:48,460
So all we need to do is just using this.

108
00:09:50,080 --> 00:09:51,640
Then the same thing here.

109
00:09:53,800 --> 00:09:57,790
But this time we are going to use the selected color.

110
00:09:59,520 --> 00:10:06,510
And we also need to change the font weight, so let's do font.

111
00:10:09,000 --> 00:10:13,740
Wait, which is going to be normal for all the other elements.

112
00:10:15,010 --> 00:10:17,410
So this is just pure success.

113
00:10:19,450 --> 00:10:22,990
And for the conflict element, so this.

114
00:10:26,270 --> 00:10:28,070
We are going to say that it's a bold.

115
00:10:29,490 --> 00:10:32,570
So let's save this and let's see if this is working.

116
00:10:33,870 --> 00:10:42,960
Refreshing the page now when we click any element, we can see that we are simulating this selected

117
00:10:42,960 --> 00:10:43,740
effect.

118
00:10:43,980 --> 00:10:50,880
But as you can see, all we did was any time any of these elements are clicked, we are just setting

119
00:10:51,690 --> 00:10:55,290
this unselected background color to all of them.

120
00:10:55,560 --> 00:11:02,640
And then after doing this, we just get the one that has been clicked and we set the background color

121
00:11:03,150 --> 00:11:04,980
to the selected color.

122
00:11:05,460 --> 00:11:14,160
So then we have this cool effect of selection and we are updating the HTML inside these elements.

123
00:11:14,790 --> 00:11:19,620
One thing I think I made a mistake here on my original age HTML.

124
00:11:20,840 --> 00:11:27,200
I have this longer text, and when I go to vision and then go back to mission, as you can see, it's

125
00:11:27,200 --> 00:11:28,160
a different text.

126
00:11:28,520 --> 00:11:31,940
Well, it doesn't matter much because this is just a simulation.

127
00:11:32,330 --> 00:11:34,100
But the correct thing would be.

128
00:11:36,000 --> 00:11:38,580
To have the same thing I have here.

129
00:11:39,740 --> 00:11:47,360
So I'm just going to copy this, since it starts with the mission selected, I just need to go to the

130
00:11:47,660 --> 00:11:49,370
HTML and find the mission.

131
00:11:53,060 --> 00:11:54,230
So here it is.

132
00:11:55,970 --> 00:11:58,520
And just use the same text.

133
00:11:58,550 --> 00:12:04,940
So now if we save this and refresh the page, so this is the text for the mission, I'm just going to

134
00:12:04,940 --> 00:12:09,770
go to vision values and now everything's correct.

135
00:12:10,130 --> 00:12:14,390
I already talked about lorem ipsum previously in the course.

136
00:12:14,390 --> 00:12:22,100
If you haven't watched this lesson, Lorem Ipsum is just a simulated text that web designers use just

137
00:12:22,100 --> 00:12:26,540
so they can test things without having to write something for real.

138
00:12:26,570 --> 00:12:35,900
So if you go to Google and just search for lorem ipsum, you have many websites that generate this text.

139
00:12:36,200 --> 00:12:42,560
So I'm just going to click here and as you can see, I can generate paragraphs of lorem ipsum.

140
00:12:42,980 --> 00:12:49,490
This text doesn't mean anything, but this is very good for testing layouts in web design.

141
00:12:49,500 --> 00:12:55,100
So this is why we are using this nonsense text, just so you know where this comes from.

142
00:12:55,280 --> 00:12:55,830
Pretty cool.

143
00:12:55,850 --> 00:12:59,690
So this section is done in the next video.

144
00:12:59,690 --> 00:13:02,780
We're going to do this service slider.

145
00:13:02,790 --> 00:13:05,110
This is similar to what we have here.

146
00:13:05,390 --> 00:13:07,670
We also need to change the content here.

147
00:13:07,910 --> 00:13:14,930
But instead of clicking on tabs like this, here we have a little slider with an arrow right and arrow

148
00:13:14,930 --> 00:13:15,380
left.

149
00:13:15,590 --> 00:13:20,000
And we just need to change the content when we click the arrows.

150
00:13:20,240 --> 00:13:24,820
So this is going to be very similar and this is what we are going to do in the next video.

151
00:13:24,830 --> 00:13:25,640
I'll see you then.