In this part we were going to do the same if that but this time we are going to used and at the library
court style component.
And you will see the CSF and it's Office Square Cam makes it in the same file together.
Very nice.
So first we are going to install the Dow component.
We go to the style component and we copy each line of code and paste it here
and then we go to the top of the file with it is disfigure and we import styled
styled component.
Now we are going to create a button by using cornerstone button and then you go to what we just imported
and we piece a bad tech here and now inside this bad tech you can pay us to see us ask that already
exist here.
So now we can copy exactly the same CSF.
Wow.
And pages in the Apogee as
now we have these dual component and then we can have a try on putting this button at the top of the
Web site
so we back to it a random area and then we paste button and we type toggle.
So there are some differences.
We have this button now we can take a look you can see this button.
The style is exactly the same.
We have the buttons that we already created.
Now we are going to add some condition such that you will also can create a sound effect when the card
is needed.
So which part we are going to depends on because we depends on the length of the card what the number
of the cards.
So this is the name that you can decide.
But we are going to use depends on the class length.
So this is from the above.
State
so we are depending on the constant length.
So now we can go to the pops off a button.
Now we can delete this one and using some time pay later wrote The pope Pops
and since we have the length pops so we can use pop length.
So if this is quit it then to
we will use the original color otherwise we will have another conditions which is if the Pops thought
length is less than two then this is red.
Otherwise it is pink it should be a question mark.
We should also add a semicolon.
Now we tried to delete a card and you can see both buttons.
We were trying to paint.
And if we did it one more both and we also turned red.
So now there are some more.
You have to do is to change the font style for the first one.
Use the color instead of just white.
We are going to turn Bragg
if this is smaller than or equal to one it will become black otherwise it will become white.
And now we also need to add the fallen weight
of the possible length if less than or equal to 1 then this is bold.
Otherwise it will become normal.
Also we have to pay each the semicolon at the end.
Now we can have it tried again.
If we delete this your term pink and if we did it one more of them turn red.
And also that hash style also changed in.