Hey, everyone, in this video, we are going to work on this about US section, so what we need to
do here, we have three different texts for this section.
So we have the company's mission, vision and values.
So we don't want to overcrowd our page.
So we created something like this so people can only see the ones they want.
So if I want to see the company's vision, I can just click here.
If I want to see the company's values, I can just click here and so on.
This is a common type of element in Web design.
So let's see how we can approach this.
So what we need to do when I click Vision, if you go back to visuals to code, you will see that I
left an object for this section.
So what we need to do is just getting the right text.
So we have different texts for mission, vision and values.
We just need to get the right text and place inside that element.
And there's a second thing that we need to do.
We need to change the background of the element that's selected.
So if we inspect this.
We will see that this is actually just using the same background as down here, it's nothing special
if I copy this and apply to this third tab.
You will see that this is what makes it looks like it's selected, so this is what we need to do.
So changing the background and also the font weight, as you can see, the one that is selected has
a font weight of bod.
So if I do font.
Wait.
Bode, we can see that now, this is exactly like the one that is selected, so these are the two things
that we are going to have to do.
So let me just refresh the page.
So first thing we need to do is setting the unclick event for all these elements.
So probably they have a common class.
So let's see this.
So we have an element called backstabs, which is the parent element, and each of these elements.
Have a class of single tab, so this is what we need to use to apply the click event to all of them,
so I just copy this and right below here.
I'm going to set the event, so this time let's create a variable called.
Maybe about us Tab's.
And then we are going to select all those elements, so document that, get elements by class name.
Let's use that class name, and when we do this, we know that we are going to have an array back with
all those elements.
So now we just need to set the unclick event for all of them.
We know that doing this with pure JavaScript requires a loop.
So let's start a for loop.
So for.
A equals zero, A has to be smaller than.
About us, Tab's that lenth.
And a plus plus.
All right, now we need to select each of these elements, so let's do it like this.
With an index of a and then we just need to set Deon click event.
OK, so when we click a tab, we need to know which one was it.
So before we continue, let's do a console log and see what do we have when we use the key word this.
So do you remember what happens to this keyboard inside and unclick event?
Let's check it out.
I'm just saving this.
Refreshing the page.
Let's go to the console and now I'm going to click it.
So as you can see, we are able to get the element that has been clicked.
So I'm just going to click Vision.
Now I'm going to click mission.
So as you can see, we can get this information.
So now what we need to do is getting the inner HTML, because, as you can see, we have values, vision
and mission.
So we just have to pick the inner HTML so we can get the information from that object.
So going back there.
You can see that we don't even have to set it to lower case because.
The object property has already been written exactly the same way, so we just need to get it.
So let's say.
Clicked value is going to be this dot in our age html, and now instead of sending only the element
to the console, let's try to access this aboutus object.
And as the property, we are just going to use this collect value.
So when we do this.
Refreshing the page again, if I click values, now I'm getting what's inside that object for the values.
If I click vision the same thing, if I click mission, the same thing.
So now we just need to send this inside this element.
So this one here has an idea of box text.
So document that yet, element by BIID.
The idea is spox text, and we are going to set it in our e-mail to exactly what we just sent to the
council.
Saving this refreshing the page, let's try it out, I'm going to click Vision.
As you can see, we just changed the content of this element.
Let's see values this time.
This is cool because we have a list inside here.
And as you can see, this is rendering really well.
If I click Mission, everything's working.
So now what we need to do is just solve the problem of the tabs here.
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
to reset the background color of all of them and then we will just get the one that has been clicked
and we will set the correct background color.
So going back to Visual Studio Code, after we change the HTML of the element inside here, we are going
to have to start another loop because now we need to run through all the elements again so we can just
copy this for a loop.
And started here.
Let's change the name of the variable to be so we don't have any conflict.
All right, so now when any of those elements are clicked, so this is why we are inside this loop,
we are just setting the unclick event for all those elements.
So when any of them has a click event, we're just going to start a loop so we can change the background
color for all the elements.
So here we are just going to use.
About a stabs with an index of B and now we are going to set the style property.
Then the back ground collar, remember that since it has a dash, it does not follow the variable naming
rules, we can just use the lower cammo case for it or we can just use.
The braces, so if you want to use the exact name of the style, you can do like this, so background
color, it's going to work exactly the same way.
So now we are just setting the background color for all of them to the unselected color.
So we already have a variable for this.
So we just need to copy the name of the variable and use it right here and now.
When we finish with this loop, we just need to get the elements that has been clicked.
So let's remember that we can access the clicked element using this keyword.
So all we need to do is just using this.
Then the same thing here.
But this time we are going to use the selected color.
And we also need to change the font weight, so let's do font.
Wait, which is going to be normal for all the other elements.
So this is just pure success.
And for the conflict element, so this.
We are going to say that it's a bold.
So let's save this and let's see if this is working.
Refreshing the page now when we click any element, we can see that we are simulating this selected
effect.
But as you can see, all we did was any time any of these elements are clicked, we are just setting
this unselected background color to all of them.
And then after doing this, we just get the one that has been clicked and we set the background color
to the selected color.
So then we have this cool effect of selection and we are updating the HTML inside these elements.
One thing I think I made a mistake here on my original age HTML.
I have this longer text, and when I go to vision and then go back to mission, as you can see, it's
a different text.
Well, it doesn't matter much because this is just a simulation.
But the correct thing would be.
To have the same thing I have here.
So I'm just going to copy this, since it starts with the mission selected, I just need to go to the
HTML and find the mission.
So here it is.
And just use the same text.
So now if we save this and refresh the page, so this is the text for the mission, I'm just going to
go to vision values and now everything's correct.
I already talked about lorem ipsum previously in the course.
If you haven't watched this lesson, Lorem Ipsum is just a simulated text that web designers use just
so they can test things without having to write something for real.
So if you go to Google and just search for lorem ipsum, you have many websites that generate this text.
So I'm just going to click here and as you can see, I can generate paragraphs of lorem ipsum.
This text doesn't mean anything, but this is very good for testing layouts in web design.
So this is why we are using this nonsense text, just so you know where this comes from.
Pretty cool.
So this section is done in the next video.
We're going to do this service slider.
This is similar to what we have here.
We also need to change the content here.
But instead of clicking on tabs like this, here we have a little slider with an arrow right and arrow
left.
And we just need to change the content when we click the arrows.
So this is going to be very similar and this is what we are going to do in the next video.
I'll see you then.