All right.
Welcome back.
And this video we're going to start by tackling some of the basic functionality of our list.
We're going to start nice and easy by adding the quick listeners to the allies so that when we click
we get a little strikethrough effect that you can see here and they grea out.
And before we do that I'm actually going to change our background a little bit here.
I'm going to get rid of that background.
And then I'm going to add a border instead.
So our border will be two pixel solid gray just a small change but it will make it so that it's easier
to see when we turn these gray.
If we had a great background then it would just totally blend in.
OK.
So what we want to happen is when we click on an ally the text inside the eye is gray and we add a strikethrough
effect.
So let's go to our javascript file.
Let's start by adding a simple comment where we can check off specific to Dewes by clicking and then
let's make that work.
So we need to select all the allies.
So all we need to do is ally instead of the dollar sign and then we'll do a click.
And when we click here is the function that we want to run the callback function and we'll start with
just a nice alert clicked ally and go back and make sure that when we refresh and click on an ally it
tells us that we clicked an ally but nowhere else does that happen.
Great.
Next up let's work on changing the individual ally that we clicked on and changing its color color and
the strikethrough or the text decoration effect rather than alerting what we want to do is use the dot
CSSA method and with that see SS We're going to want to work with the color property and turn the color
gray and the text decoration property and make that line through.
Let's start with the color.
So it would look like color gray just like that.
And then we have to decide what are we applying that to what are we selecting.
And this is not what we want to do if we just select a lie and do gutsiest us.
Now when I click they all turn gray and I know it's a little bit difficult to see if I make that something
more obvious like red when I click.
They all turn red which is not what we want what we want instead is only the one that was clicked.
And that's where the key word this comes in with the J Querrey wrapper.
This refers to the specific lie that was clicked and we want to change only that one SEUS us so that
its color is gray.
And we'll test that out.
Now I click on the individual ally and it turns gray.
Of course it doesn't turn back to black when I click again.
We don't have that functionality.
Now let's get the strikethrough with a line through effect so we can do another line like this.
This does SEUS us and then text decoration colon or comma line dash through and save and go back missing
a Prentis see here.
Now when we click we get a strikethrough effect there and the color changes to be gray.
But of course there's always an easier way of doing that.
So rather than doing it on two separate lines you might have remembered how we could define object with
key value pairs and just do one single this CSSA call.
So we had add an object in here just like that and we need to add in color gray comma.
And this is a little tricky if we do text Dasch decoration in the object and set that to be line through
.
And I save and refresh you see nothing happens.
They actually get an error because in javascript You can't have property names that have hyphens in
them.
So if we are using the syntax where we define an object we need to use text declaration camel case which
is always a little bit tricky.
And if we are fresh Now you can see that it finds that text decoration so CSSA property and it applies
the line through and the gray color.
The next thing you might want to do is turn it back to black and get rid of the line through one click
again.
To do that we'll use a simple IF statement.
So we'll check if Ally is gray then we will turn it black
else
turn it gray.
So to check if the lie is gray we can do if and we can use this stuff.
SS And if we just do it like this so if to check if an ally is gray we can actually use this dot C Ss
and ask it for color without providing another value and that will retrieve the current color.
So we'll have an if statement if this does see a sense of color is equal to gray.
Let's just do a concert log is currently gray and that's all due to start.
So let's clean this up a little bit
and we don't have or else yet so we'll just leave it how it is and go back.
So if we refresh and we open up the console and I click on one of these it doesn't tell us anything
yet because it's not gray.
But now if I click again it still doesn't work.
And the reason for that is a little bit tricky.
If we go back here.
Let's take a look at what this does CSSA color is outside of the if statement.
So we'll do a console that log.
This starts the SS color and refresh the page.
And when I click you'll see that it starts out as R.G. 000.
And if I click again we're setting the color to be gray and we think that it's gray right now if we
inspected.
It says that color is gray but when I click again it's actually the R.G. version.
So when we're comparing to check if the color is equal to Gray that's not going to work.
We need to compare it to R.G. be 1 2 8 1 2 8 1 2 8.
And now if we try this and refresh we should see when I click the first time nothing I click again.
It now says it is currently gray.
OK.
So we can use that.
So instead of just printing it is currently Gray.
What we want to do is turn it black.
So we'll do a this that see us color and we'll just go back to black.
Just like that.
And then we can handle the text decoration in just a second.
So we refresh and we click and we get gray.
And if I click again it still won't work.
And that's because we're just overwriting it at the end here.
We're turning it gray every time.
So we want to move that into our else so we'll add an else statement here and we'll do this only if
it's not currently Gray.
All right.
So we should be good.
Now we just move this comment here clean things up a little bit and refresh.
We click it turns gray cook again it goes back to black.
We still have the line through but at least the color is changing.
So to get rid of the line through all we need to do is basically copy this or redo an object.
And rather than setting color to be gray we'll make it black.
And rather than text decoration to line through we'll set it to be none.
And now if we were fresh and real quick we're toggling that done on and off where we have the gray and
the line through.
Hopefully as we're going through this you're seeing that it's sort of a lot of work to do this checking
.
Is it currently Gray.
RGV 128 128 128 if it is then we'll make it black and remove the text decoration.
Otherwise do this.
There's a much easier way that we don't have to actually do any of this logic.
What we can do is create a class so we'll create a class in our C Ss and we'll call it completed or
just completed and it will have color is gray.
We don't need those quotes.
We're not in javascript and text decoration will be a line through and save and then are to do that
.
Yes we can actually replace all of this code and it deleted all and all we want to do is this dot toggle
class
completed single line.
So when we click on an ally we're going to toggled the class on the slide that we clicked on the class
completed and that will make it gray and give it a line through effect and it will keep track of if
it needs to remove it or added automatically.
So you can see here it looks exactly the same as it did before.
But we only had to write one line of code rather than 10 or so lines and the next video will talk about
how we can get the X to actually to lead it to do