4.5 On Deck

Hello and welcome back now that we've gotten our slides in their initial positions in our slideshow. I want to start animating them whenever we click on the up and down arrow. Now the way that they animate is gonna be slightly different depending on whether you get the down arrow or the up arrow they're gonna be going in different directions. So I want to create a single function that will perform those animations. But that single function needs to accept some kind of parameter that tells it whether we're going forward or backwards. So let's come down here just after our set up slides function. Skip a couple of lines and let's create a new function called animateSlides. And into this animateSlides function, I wanna pass a Boolean value and I'm gonna call this variable isNext. So we're just gonna pass in a true or false. If we pass in true, that means we've clicked on the next button. If we pass in false, then we've clicked on the previous button and will go the other direction. Now, the first thing we need to consider before we create this animation is which location is our onDeck slide supposed to be in. Remember we have our active, our previous up here, and then our next slides. And then our onDeck slide is gonna be the one that's either below the next slide or above the previous slide depending on which direction we're moving. So if we hit the next arrow, the onDeck slide will be the one down here below the next slide. And as the next slide animates up into the active position, the onDeck slide will animate up into the next position. On the other hand, if we hit the up arrow everything's gonna animate downwards. So the previous slide will animate into the active slide position and the onDeck side will be up above the previous slide and it will animate down into the previous position. So again, the first thing we need to figure out is where that onDeck slide needs to be. And not only where it needs to be, but which slide is our onDeck slide. If we're currently looking at slide one, which is this desktop computer here. Then the next slide is slide two and if we're clicking the down arrow, the on deck slide will be slide three. If we're going the other direction then if we have eight slides, our previous slide is gonna be slide eight, and our on deck slide is gonna be slide seven. So we have the onDeck slide to consider, but we need to consider which slide it is first of all and secondly where it's going to end up, where we're going to position it. And we've already created our up and down positions here. The up position will be where that onDeck slide will be if we click on the previous button, and the down position will be where that onDeck slide is if we click on the next button. And again, that's gonna be the starting location for the animation. It's either going to start in the up position and animate down to the previous position or it's gonna start in the down position and animate up to the next position. So let's go ahead and program some of this functionality into our animate slides function. So as soon as we click on the up or down arrow we're going to trigger this Animate slides function. And we're gonna pass any value, true or false, that tells us whether we click the next button or not. If not, then we click the previous button. So I'm going to create a variable here called onDeck, and in this variable we're going to store the index number of the slide that is supposed to be onDeck. So we need to first of all consider whether we click next or previous. So we're going to run an if statement that says, if (isNext) then we're gonna do one thing else, we're gonna do something different. If (isNext), if we clicked on the next button, then our onDeck slide is going to be equal to the slide after the next slide. But we can't just say next plus one, because let's say that we're on slide seven of eight right now. The next slide would be slide eight and the onDeck slide since there is no slide nine would actually be slide one. Similarly, if we're already on slide eight, then the next slide would be slide one and the onDeck slide would be slide two. So there are a couple of things to consider, we can't always just add one to the next value. So let me show you what I'm going to do and then I will explain it after I type it out. I'm gonna do next plus one inside parentheses. And then I'm gonna type the modulus operator or the percentage sign and we're going to divide that by slides.length;. Now the modulus operator as you may know, returns for us the remainder of a division operation. So let me explain how this works, I'm gonna use some comments here to kind of explain this. And let the zoom in a little bit so you can see what I'm doing, and here we go. So let's say that we have eight slides. So we have slide 0 through slide 7. Slide 0 is our first slide, slide 7 is our 87th slide, and we need to figure out what our next slide is going to be. It's going to be next + 1 usually unless we're currently on the very last slide. If we're on the last slide, then our next slide is going to be zero. Now we could use an if else statement to figure this out. We could say, if we're currently on the last slide then onDeck is going to be the first slide. Otherwise, our onDeck slide will simply be next + 1. But I like to keep things clean and concise. And if I can do this in one line of code like I've done here, then I will. And so as I mentioned this modulus operator here, returns for us a remainder. So let's say that the active slide is slide 3 for example. If the active slide is slide 3 then the next slide is gonna be slide 4. So let's take this next + 1 modulus slides.length. So next + 1 is gonna be 5 and then we'll say, 5 modulus and slides.length is going to return 8 because there are 8 total slides. So 5 modulus 8, so if you take 5 and divided by 8 that will give you 0 with a remainder of 5 and for those of you who are as old as me. It's been a long time since you've had to deal with remainders. But if you think back to I don't know, what is that 4th grade math then hopefully you can remember how to work out remainders. So if you do 5 divided by 8 that's gonna give you 0, with the remainder of 5. And if we are currently on slide 3 then slide 5 is going to be the on the next slide. So even if we're not at the end of the arrays yet, this calculation will still work. Well let's say we are at the end of the array. Let's say that our active slide equals 7 and our next slide would be the one after that, I'm sorry, let's go backward. Let's say our active slide is 6, then our next slide would be 7. Again, 7 would be the 8th slide because remember it's a 0 based array. So if our active slide is 6, our next slide is 7 then our onDeck slide should be 0 or the first slide. So let's take this next + 1 again. So next is 7, next + 1 would be 8 and if we do 8 modulus 8, because this value is always gonna be 8 because that's how many slides we're dealing with. So if we do 8 modulus 8 that gives us 1 with a remainder of 0. And again this modulus is just going to return to us that remainder. So this will result in a value of 0, which is where our onDeck slides should be. So this formula here whether we're at the end of the array or at the beginning of the array or somewhere in the middle, it's going to give us the value that we need. So hopefully that made sense, I'm gonna zoom back out here, so that we can see everything again and there we go. So we have this modulus operator which gives us the result that we need if we're going to the next slide. Now the previous slide we're kind of gonna need it if else statement, but I'm gonna use what's called a turn area operator to figure that out. So, if we didn't use a ternary operator this is what it would look like, onDeck = prev- 1 and then we would say if onDeck is less than 0. So if the previous slide was the first slide in the array or the slide with an index of 0, then the one before that would be -1, if we just did previous minus 1, and there is no negative 1. So if this number is less than 0, if we've gone past that first slide then inside curly brackets here, we would say onDeck = slides.length -1. But once again, I'm going to keep this concise by pulling all of this together into a single statement with a ternary operator in it. So here's what that's gonna look like. Let's ignore all of this down here for now. And I'm just gonna start from scratch, but I'll leave that there as we type this out. So we're gonna say onDeck = and the way a ternary operator works is first of all we have some kind of Boolean value. So I'll just put (bool) here, so we're gonna have some kind of expression inside the parenthesis that evaluates to either true or false. And then we're gonna have a question mark and another expression, and then it's a colon excuse me, and a third expression and then a semi-colon to end our statement. So again, the way this works is we're going to evaluate what's inside the parentheses. If that evaluates to true then we're going to perform this expression. If it evaluates to false then we're going to perform the expression after the colon. So this is kind of an if then else statement we're saying, if this is true then we're gonna do this else, we're gonna do this. So what we want to check for is if prev-1 is less than 0. So let's do that. So we're gonna replace this here with, and we need another set of parentheses inside this. So if prev- 1, all inside parentheses, if that is less than 0. Then we're going to return whatever value we've put here after the question mark. And if prev-1 is less than 0 that means we need to go to the end of the array and we're gonna return slides.lenghth- 1. So let's do that here slides.length- 1 and if that evaluates to false then we're simply going to set our value to prev- 1. So if prev-1 again works out to a negative number, then we're gonna jump to the end of the array. Otherwise, we're just gonna use prev-1 and then we don't need these expression down here or this evaluation down there. So we've done this with one simple line of code and we now know which slide the onDeck slide is. And that's again determined by whether we've hit the next button or the previous button. So I realize, it's taken a while to explain just a few lines of code here, but hopefully bow that we've got this underway, the rest of this should move along a little bit quicker. So let's save our work, and we'll move on with the next lesson.