Hey there.
Welcome back.
In this video, we're going to work in this services area, so this is going to be very similar to what
we've done here.
But here the user could click on any of the items and we would just show the text accordingly.
Now, this is a bit different because we only have the back and the forward arrows.
So one we need to do is just controlling at each element we are and then going forward or backwards
inside our array.
So if you go to a visual studio code, you will see that this time instead of having just an object.
So let's go up here.
You can see that for the about us.
We just have an object with properties.
This time we actually have an array.
So this is how we are going to control it.
If we are on element zero and we click the forward arrow, we will just go to aliment one.
So this is going to be simple.
We're just going to have a little challenge when we reach the end or the start of the array.
But let's leave it for a bit later.
Let's start setting the unclick event for the year.
So going down here, if we go to our page and inspect this element, we can see that we have a service
previous and probably service next.
Let's see this.
And service next.
So these are the two buttons that we work with.
So going back to Visual Studio Code, let's create two variables just so we can organize this a bit
better so far, let's say previous.
Aram.
This is going to be documents that get element by idea, and the idea of this element is service previous.
Let's do the same thing for the next arrow.
And here we have service next.
All right, so the first thing we need to do is controlling at what index we are now, so we are starting
from index zero.
This is what it's showing on the page when it's loaded.
So we have that webdesign.
So this is element zero.
So let's create a variable called current.
Index or something like this, or maybe current.
Service.
Or current service index, it's really up to you.
I'm just going to use current services.
Good.
So this is going to start at zero.
So now when we click the next arrow, we are going to increment this value and when we click the previous
arrow, we're going to decrement this value.
So let's set two events here.
So the first one is going to be for the next arrow.
Let's get started with this.
So next arrow dot on click.
We are doing this because we already selected this element here, so it's easier for us.
So next arrow, dot unclick.
Let's create a function for this.
And now what we need to do is incrementing the current service.
Variable.
As you see a bit later, first before doing this, we will need to do a test, but for now, just so
we can get the functionality, the basic functionality working, let's just do this.
So this is going to be current service.
Plus equals one, and after doing this, we just need to get the title and text we want, so let's create
a variable called title.
Which is going to be the hour services variable.
With an index of current service.
And we want the title property.
Let's do the same thing for the text.
And now we just need to update our main element, so going back to the page.
Let's see which element is this so we have the idea of service, text and service title.
So let's just copy this.
So, again, let's also create variables for these elements so we don't have to repeat them in the two
event.
So far.
Maybe service title area, just so we don't mix with these variables, so service title area is.
Document that get element by Eddie.
That's it, and let's do the same thing for the text area.
Service.
Text area.
And then we have service text pretty good, so now we can just do a service title area.
Not in her e-mail.
It's going to be the title.
And let's do the same thing for the text.
So service text area, we receive the text.
Let's save this, let's see if this is working so far.
So refreshing the page we are starting with webdesign, so when we click the next arrow now, we can
see that this is working.
We just saw it changing to branding.
So let's go see the object to see if this is correct.
So branding it starting with braze cent or something.
As you can see, this is correct, if we click it again, it should change the digital marketing and
the text starts with this Nunc word.
See this?
Digital marketing Nunk, so it seems to be working.
Now let's do the same thing for this back arrow.
So this is going to be similar.
So for the previous arrow.
This is going to be the same thing, but instead of incrementing, we are just going to decrement it.
So minus equal one.
And the rest of it is just going to be the same thing.
So when we click the arrow, we go to the next index or to the previous index and then we just update
the element.
So by doing this.
Refreshing the page, we can go forward branding, go back to web design.
Let's go to digital marketing, go back to branding, go forward again to digital marketing.
This is all good.
Until we reach the start or the end of the array, then we are going to have problems.
So if we go to the console.
Digital marketing is the last one, and if I click this button again, we will have an error.
So what's going on here is that when we reach the end of the array and we click next, it's not doing
any test, all it's doing is incrementing the value.
So when we reach the last item and we increment the index, we are just trying to get an element that
doesn't exist, which in this case is index three.
It does not exist in disarray.
So we just need to do two basic tests for the previous and the next arrows, because if we reach the
end or the start of the array.
This is going to be a bit different, so let's start with the next arrow.
So going back here when we click it instead of just incrementing disvalue first we should do a test.
So if.
If current service is the last index of that array, how do we know what's the last index of an array?
Let's remember that the last index is always its length, minus one.
So taking a look at this array, the length is tree and the index of the last element is two.
So no matter the size of an array, the last index is always its length, minus one.
So let's just copy the name of this variable.
In here, if current service is the same as our services dot lenth.
Minus one, so let's put this inside parentheses just so we make sure that.
We are just going to do this before making the comparison.
So if this is true, it means that we just reached the end of the array.
So in this case.
Instead of incrementing the value, we are just going to Saddat to zero again, so current service is
going to be zero.
Otherwise.
We can just incremented.
So doing this, let's test before we do it to the previous arrow, so refreshing, the page, second
element, third element, this is the last one.
So when we click this arrow again, it's just going back to the start.
It identified that we are already at the last index, so it just went to zero again.
So we can do this as many times as we want.
And this is always going to work.
Now we need to do the same thing for the previous arrow so we can just copy this.
Now, this is going to be the code for the alse, and this time what we need to test is if current service
is zero.
So I'm just going to cut this with control X, and if current service is zero, it means that we just
reach the start of the array instead of decrement it.
What we are going to do is setting it to the last element.
So what is the last element?
Well, it's the array length minus one.
So when we reach the start of the array, we are just going to set it to the end again.
Saving this.
Refresh the page, we are at the first element, let's try to go back, so we we are going to the last
element.
So let's do some tests, reached the end of the array.
Click next.
This is working well, clicking back.
This is working well.
So no matter the size of this array, we can even make a test here.
Let's try to add another.
Element.
So the title is going to be.
Test service.
We can do this just to see if this is working.
Saving this refreshing the page.
Second element, third element.
Now, the last one is the one we just tested, I just wrote it wrong, but that's OK because that's
a test.
So we can see that this is working no matter how many elements we have, if you want to add more services,
this is still going to work.
So when I click next, it's just going to the beginning of the array.
If I'm at the start and I click back, it's just going to the last element.
So this is working well and this one is done.
So I'm just going to erase this test.
Refresh the page now, this is good, we are making some progress now in the next video, we are going
to work in this contact form.
I'll see you then.