OK we'll come back.
So I think it's time for you to give some of this a shot on your own.
So I have a quick exercise.
All that you need to do is create a new age or file a new javascript file and add a single button to
the age to my file.
That's it.
And then when I click that button all you need to do is change the background color of the body from
white to purple.
How you do that.
I'll leave it up to you.
There's a few different ways that you could do it given the different things that we've talked about
so far but you need to run some code when you click on the button and that code should change the background
color between two colors whether it's purple and white or you pick some better colors.
Totally up to you.
So Pasic video right now.
Give that a shot on your own.
That's really important that you do that and then come back when you're ready and we'll go over a solution
together.
OK.
So let's talk about how we can make this work.
First things first we need an aged female file which I have right here need to add in my HMO.
Let's call this color toggle and all we need is a single button and we'll just add click me just like
that.
Now we need our javascript file and we could easily do something where we just add a script tag right
here and at our javascript in there but it's not a great practice.
So just to get you in the right habit and make a new file we'll just call it toggle.
J.S. in the same directory and inside like I always like to do I'll add an alert just to make sure they're
connected OK and then we need to go and link to that script
and that needs to be source equals toggle dot Jay Yes just like that.
So let's go ahead and open this file in the browser and see what we get.
First thing that I'll point out here.
Notice that we got the alert that says things are connected but the button isn't on the page yet.
So we don't actually see the button until I get rid of the alert.
And that's really important and we want to fix that.
What that tells us is that our code over here is running first before the button is on the page at all
and the code that we're going to write is going to rely on the fact the button is on the page.
We can't add a quick listener otherwise the event listener is only going to work and add events to items
that are on the page at the time that it's run.
So we have a few ways of fixing this.
The simplest one for now is just to move our script down to the end of the body so that we know for
sure OK this button has loaded.
We will learn about another way of doing this when we get to Jay query but this works perfectly fine
for now.
So if we refresh now you'll see the buttons already there.
And then we get the alert that says connect it.
So now let's talk about the logic.
Let's go to our toggle J.S. and select the button.
So var button equals document queries selector button and that's just one way to select it of course
.
And then we want to add our event listener so button that add event listener click
and then our function that will run the callback function just like that.
And I always like to start again with an alert that just says clicked just to make sure that we're selecting
the right thing and that this function is being run.
When we do click so refresh Let's click and we get clicked.
So that's great.
Things are hooked up correctly now all we need to do is change the background color of the body.
So I would start by just doing document dump body and let's just set it to be purple.
So document up body style that background equals purple and you'll see I used document dot body.
We could also do document that queries selector and give the body tag name or something like document
diked get elements by tag name body zero but it's much easier just to use document dot body.
It's just a shortcut that's built into the document.
So I do that I change it to purple and we should be good to go here.
If I click we get a purple body but of course part of this problem was toggling back and forth.
So when I click here it goes back to white and then I click again and goes back to purple and it keeps
switching between the two.
So what we'll need to do is add some logic and our logic is going to look something like this if White
may get purple else make it with something like that.
So the way that I'm going to handle this I'm going to create a boolean value called is purple Savar
is purple and it's going to start as false because when I refresh the page it's not purple so purple
is false.
And then what we'll need to do is inside of our javascript we're going to check if is purple.
So if it is purple then we're going to want to make the background color white
just like this.
And change has to be white
and then Otherwise we'll do the same thing except we will make it purple.
The only issue of course is that is purple right now is always false.
We're going to want to change that.
So if is purple if it is purple document up body style but background is equal to white and then we
would say is purple is now called the false because we just change it to white and then when we said
it to be purple we would say is purple equals true.
And this needs to be a boolean value of course not the string true or the string false.
So what we've done here is create our own little target tracker.
This boolean is purple start's is false.
The first time through it is purple.
That doesn't happen.
So we go to the else we change the background to be purple and then is purple is now true.
So next time the user clicks it is purple that's now true.
So if we change the background to be white and then is purple is set to false and we keep switching
back and forth.
So refresh checker council makes sure we have no errors.
And now let's try clicking purple white purple and white.
So there's a small re factor that we can do which is we don't have to set is purple to be false and
is purple to be true inside the if statement.
We have a shorter way of doing that just by writing.
Is purple equals not is purple.
So that's just going to switch it between true and false or false and true just negates it.
So that is a nice shortcut.
You can see here it now it's Heigl's and it's a little bit shorter but there's an even shorter way of
doing office which hopefully some of you thought about when we learned about the class list.
There was a method called toggle.
So if we define a CSA as class and let's go ahead and do that instead of my style I'm just going to
make a style tag for now and add a class called Dot.
And let's just call it purple or just purple.
That's a class name and we'll just say background is purple and that's all we need to do what we're
going to do is toggle this class on and off on the body.
So go back here and I'm going to just copy this for now and counted out and all we need to do is when
you click on the button and they comment this out or get rid of this get rid of this as well.
All of this all we want to do is document up body.
Classless toggle.
And then the name of the class we just made was called a purple.
So remember what this will do is if the body doesn't have the class named purple it will add it.
But it checks if it does have the class name purple already.
It will remove it.
So we don't have to keep track of if it's purple or white.
Currently if the class is applied or if it isn't we don't need this is purple Boullion anymore.
That's basically all wrapped up instead of classless toggle.
So I refresh.
I click and you can see it looks the same.
But if we inspect and we look at the body.
Here we go.
Notice class equals purple.
And then I click and now we don't have classical purple anymore.
It goes away.
That's document up body.
Class list toggle which is really really useful.
It's a lot shorter than this logic here.
All right so that's my solution.