And we can go to the next steps over here by clicking on this next button and then we can finish the steps over here now in the previous video we added the css of this onboarding screen and this.
Is how it looks right now so we have added the design of the onboarding screen now in this video we're going to add the functionality for this onboarding screen so right now if you.
Click on this next button nothing happens because we haven't added the javascript so in this video we're gonna add the javascript so let's get started .
Right here in our html file we can see that we have already linked our javascript file over here now before getting started with the javascript let's add some classes to the style.css.
File so what we're going to do is we're going to add a class called active to this onboarding container when we want it to be displayed and we're going to remove the active class from.
If you scroll down here we can see we have the styles for the onboarding container so what we're going to do is by default we will set the position of this.
Onboarding container a little lower than default so here for the y-axis let's add a calc function so i'll just type calc.
And here we'll type negative 50 plus let's say 15 pixels right now you can see it has moved a little bit to the bottom let's move it a.
Little bit more so let's tap 25 pixels and uh we will also set the opacity to zero so let's type opacity 0 and we'll also add a transition so that we will have smooth animation so let's.
Start transition and let's set it to all 100 milliseconds is and here we will type onboarding container.
Dot active Wesdigital
So when we have the active class we're going to reset the transform and also the opacity so i'll just copy this line of code and.Paste it down here and i'll just bring it back to negative 50 i'll just remove this calc function from here.
And we'll also set the opacity back to one all right now let's go back to our index.html file and in the onboarding container let's add the class active.
And now we can see that the onboarding container is being displayed over here and if we remove the active class it is hidden and we have the same for the onboarding.
Overlay as well so we have already added the active class so here we can see for the active class we are adding the opacity to one so if we remove the active class from.
The onboarding overlay we can see that the overlay is hidden all right now we're going to add and remove the active class using javascript when we click on this onboarding button.
So let's reference these three elements in our javascript we need to reference the onboarding button the onboarding overlay and the onboarding container so let's go to our main.js file and let's.
Type const onboarding button equals document.queryselector and here i'll just type onboarding button and the next thing we will reference is.
The onboarding container so let's type const onboarding container equals document.queryselector onboarding container and let's also reference the onboarding.
Overlay so let's tap const
Onboarding overlay equals document.queryselector and onboarding overlay right now let's add an event listener to.This onboarding button so let's type onboarding button dot add event listener and let's listen for the click event and he will create an arrow function.
Now here we need to add the active class to this onboarding container and the onboarding overlay so let's type onboarding container dot class list dot add.
And here we'll just type active and let's also type onboarding overlay dot class list dot add and here let's tap active right now let's test it out so let's.
Click on this button and now we can see that the onboarding container is being displayed over here now the next thing we will do is when we click on the skip button we want to hide.
This onboarding container so let's reference the skip button so for the skip button we have this anchor tag with the class of skip btn so let's target this.
So here i'll just have const skip button equals document dot query selector onboarding container skip btn.
And let's add an event listener for the skip button so i'll just type skip btn dot add event listener and here we'll just type click and let's create an arrow function over.
Here and i'll just copy these two lines of code and paste it over here and instead of add i'll just type remove right now let's test it out so let's.
Click on this show demo button and we have the onboarding screen displayed over here and let's click on the skip button and it is hidden so everything is working.
All right i think we need to reduce the transition time for the overlay so let's go back over here to style.css and for the onboarding container we have set a transition duration of 100.
Milliseconds so let's add the same over here for the overlay so just have 100 milliseconds now let's test it out and we can see everything works all.
Right right now the next thing we will do is we will add the functionality for the next button so let's go to the original design and let's click on this button.
And here we can see we have this next button and if i click on that we go to the next step so we are basically changing the position of the steps so if you go over here to our.
Css and if you go to steps here we can see we have set the width to 300 percent and here for the content if i just remove the overflow hidden from here we can see that the next step is.
Displayed over here on the right now we need to position this over here to the left so that the second step is displayed over here and when we click on the next button we.
Need to position it even more to the left so that the third step is displayed over here now for that the first thing we need to do is we need to get the width of this.
Single step over here so we need to reference two things from this html so if you go back to our html file here we can see we have this division with the class of steps so we need to reference.
This so that we can move it to the left and we also need to reference the step division inside the steps division because we need to get the width of this step division so that we can move.
It in the correct position and then lastly we also need to reference this next button so let's reference all of this in our.
Javascript let's go over here to the main.js file and let's type const steps equals document dot query selector all now here we are using query selector all.
Because we want to select multiple steps so here i'll just type onboarding container step so this will store all the steps inside.
The steps constant now let's reference the container division which has a class of steps so i'll just name it steps container so i'll just type const steps container.
Equals document.queryselector and here we'll just type onboarding container steps.
And then we also need to reference the next button so let's type const next btn equals document.queryselector onboarding container next btn.
Right now let's write the code for the next button so the first thing we will do is we'll create a variable for storing the position.
So let's create a variable called step position and by default we will set it to zero all right now let's add an event listener for this next button.
So here i'll just type next btn dot add event listener and here i'll start click and let's create an arrow function over here.
Now what we need to do over here is that we need to move the steps container to the left and first of all let's get the width of the single step.