Building Your JavaScript

Now open up your main.js file. And the first thing we’re going to want to do is add a comment at the top. So just forward slash forward slash, scroll to bottom. And this is going to be the comment for the code that we’re about to type. So what we’re trying to achieve here is when you click this arrow, we want it to scroll down to roughly about here on the page. And that’s where the main dot, the main actually element begins. So when we hover over, you can see it highlighting the boundary box. So let’s go ahead and start that. So we’re going to write the first thing called a function. We’re going to call it find position. And then we’re going to just say object on the inside. We’re going to write a variable, and we’re going to do current top position equals zero If object offset the parent do current top plus plus equal object, offset and then save it. And then next we’re going to add in while object equals object, offset parent. And if that does prove to be true, we’re going to say, return current top. So let’s add a new variable. We’re going to just call it buttons scroll down, and then we’re going to use document query selector. This is going to look for that div called scroll down on our button. If you remember, if you remember, we look here, we called this scroll down. So it’s going to be looking for that next. So what is this going to do? Well, it’s not going to do anything right now is just going to look for it. And that’s about it. So we’re going to add in a function to actually tell it to do something. So functions scroll down. window, scroll, zero, find position, document, get element by ID, which is product and then close it out with a semi colon. So we’re telling it to look instead for instead of main we’re saying look at product and the reasoning is because mean has padding of 40 pixels there. And I don’t, I don’t want to deal with that I want to get to the actual product, which is the white space over here. So if we refresh and you click again, strangely, nothing is happening. You can actually click here, and nothing. Nothing shows up in the console as an error. And I’ll explain why. The reasoning is with JavaScript. There are things called event listeners, they’re going to be listening on the page for things like clicks. So we need to add in in the event listener for click. So we’re going to take the button scroll down, which is the scroll down button. We’re going to say button scroll down, add event listener, and then click scroll down. Now if everything here is typed, appropriately We should be able to click it, and it automatically scrolls down. Great. Now, if you notice it jumps immediately, and that’s not a smooth effect. An easy way to do this, but unfortunately, it’s not supported supported on every browser is by going back to your CSS and clicking and adding a HTML tag and we’re going to do scroll behavior. sleuth and if you like just say, add a comment in there only works in Chrome. Firefox, and I think that’s about it right now and edge. So if we refresh, wow, there you go. Now it’s scrolling and it works just fine. So going back to that main j s, the last thing that we need to do is make this slider actually do something. So let’s go ahead and add in a comment section called slider. And we’re going to create a variable that is an array. And by doing so, we’re going to actually contain all the slide inside of it. So variable slide array equals bracket, and that brackets are going to hold that inside. So you can think of it like this. You could say slide one, slide two, slide three, something like that. Well, let’s go ahead and delete that. Now, just bear with me, this is a lot to type. But we’re going to start with a loop. So what we’re going to want to to do is create a loop that’s going to loop through all our slider divs. Determine how many there are and then push that background to it. So, for variable i equals zero, I greater or sorry, i less than document query selector. All slider IV length and then i plus plus, that’s going to tell the loop to continue and increment as it loops through. Now we’re going to add in slide array, that array that you created. Push the documents query selector all slider yeah dot data set dot back what data set dot background? There you go. Next we’re going to say we’re going to tell it current slide index to be negative one. And then we’re going to do function slider item. current slide index plus plus to auto increment. And if current slide index is greater than or equal to slide array length, then current slide index equals zero and we’re almost done. Now Next, we’re going to actually get the slider to display those images. So, slider style dot CSS style dot CSS text equals background URL plus slide array, current slide index plus no repeat. center center background size cover. Let’s see we have a missed a typo somewhere. So let’s invest Again, what are we possibly missing here? Nope, that actually looks correct. Great. And then lastly, we’re going to set an interval ID. So set interval. So every three seconds, it’s going to do a transition. If you can remember correctly, we have the slider do a WebKit transition of ease in ease out 4.8 of a second. So great. Now let’s refresh and hopefully we don’t have any spelling errors. Ah, we do. Okay, let’s see what we’re missing here. Here we go. I just had a slight typo, it said Ember instead of interval. So as we refresh, you’re now going to see the images load in. And they’re after three seconds, they’re going to start to fade out. Fantastic. Now, if we want to view the website in its entirety, let’s close this. Click this button, it auto scrolls down. And then we can view you know the characters in the game. We can go ahead and see what the features of the game has. And lastly, look at some screenshots of that game.