All language subtitles for 9. Styling by Comparison

All right.

Now that we've seen one hundred percent that we can compare these two characters by each other or at

least we can get access to them.

I'm going to remove the extra stuff inside of here.

Specifically I'm going to take out that opening parentheses going to take out the closing parentheses

and I don't really need to print out entered text at I anymore.

I just did that to prove that we could take a look at a specific character inside of that property.

So now I'm back to just printing out the single letter if I say this I should be back to seeing just

the sentence by itself.

Now the last thing we really need to do year is to make sure that we compare that letter with whatever

is that entered text at I.

And depending upon whether those things are the same or different we need to apply some styling to the

span there's two ways we can help this.

We could either tried to apply some direct styling rules to the span element or we can try to apply

a class to it instead in our case we're going to try to apply a class to it though in order to apply

a class to this band right here and have it be kind of a direct computation of a comparison between

a letter and enter text at I.

We're going to use property binding though I want to set the last property on the span and I want to

do it using some code.

That's why I'm going to use the binding syntax right here.

Remember as soon as we add on those square brackets Whatever's inside of those double quotes will be

evaluated as code for inside there.

What we really want to do is a comparison between the letter and like entered text at I.

Now the only reason I'm writing it out like this is to just make sure it's really clear.

These are the two things that we want to compare and when we compare these two things there's really

three different outcomes.

The first outcome is a user might have not entered anything for entered text yet the user hasn't entered

anything there.

In other words if they haven't like entered any text at all then what we probably want to show is like

the black text right there.

That is one possible outcome of the comparison.

The next possible outcome is if these two are different characters.

That's another.

And then if they're the same.

That is a third though in doing this comparison right here.

We're really talking about getting one of three different class names applied to the span to style it.

Now adding in all the logic right here to handle those three different outcomes that would be really

challenging to read rather than writing out the entire comparison right there inside this little block.

I'm going to instead call a method on my app component class.

I'm going to pass in the entered text like these specific character and the letter that we are currently

iterating over then inside this method we're gonna do our comparison and then return the appropriate

class name but remember inside of property binding syntax or interpolation string syntax and so on we

can call any method that we want to on our class.

And so I'm going to take care or I'm going to take advantage of that for determining the class name

that we want to make use of right here.

Now if you did not do this if you did not define a method on the class that is a 100 percent just fine.

I really did not expect you to do so.

Hundred percent did not expect it if you did not add a method on really don't feel bad whatsoever OK.

So long story short when we do our property binding right here I'm going to try to call a method of

it.

Class How about a better name.

Let's just call it compare stats we're really doing here.

So when we call the compare method I can pass in the letter that we are currently iterating over and

entered text at I then we'll go back over to our app components are going to implement that compare

method back over here I'm going to add in the compare method and then our first argument to this thing

is going to be the character that the user is me and the character that was generated so I'll call that

thing generated actually about just random letter will be direct here and I'm got to say that's a string

and then there is the entered letter and that's a string.

So again there's three possible outcomes here.

We're gonna first check to see if a user has entered a letter for this particular spot just yet.

So if there is not an entered letter if one was not entered yet that means that a user has not yet typed

out the rest of the string.

And so we should probably return some class that's just going to color this as like gray or something.

I'm going to return a string of how about pending but this string right here whatever you return from

this function is going to be applied as the class name to the span elements.

Right now when I return pending I'm saying I'm going to apply a pending class to that span.

Next up we can check to see if a user entered the correct one or the incorrect one.

We can either do that with some comparisons like we could say if entered letter is equal to random letter

then return wrecked another more direct way to do this would be to use a ternary expression.

We could say return random letter equal to entered.

Letter and I'll put down a question mark though if this is true if random letters equal to edit will

enter a letter and I want to return a string of rect otherwise I'll return a string of incorrect and

so again that's a Turner expression.

The question mark is where we separate the thing and say if that is true the return that otherwise give

us that this is not typescript right here by the way.

This is just normal javascript okay.

Let's now save this.

I'm going to go back over and tested out the back over if I open up my element Inspector.

I'll now see that every element has a class of pending that means that I have not entered anything for

these bands just yet.

But as I start to type in here character by character we'll see all the different class name starts.

UPDATE As soon as I put in a capital V which is correct I see the class name update to correct as well.

Well then put in the next couple.

Correctly open in a couple of incorrectly and I'll see very quickly that those also get marked as incorrect

nonetheless and we really have to do here is add in some classes and RC SS file and style.

Each of these things based on the class names will go to my app component c s ss file year app component

Nazi SS and then inside of here we're gonna add in some selectors for pending correct and incorrect.

So first off pending if we have an element with a class of pending I'm gonna give it a color of gray

if we've got one with a rect class I'll add on a color of green and I'll also add in a font weight of

bolt and then finally if we have an incorrect I'll put in a color of red.

Like so you know what.

Maybe just to make sure it's really clear to the user when they enter and a character incorrectly.

I'm going to take the font weight and I'll move it over to incorrect.

So we kind of highlight when a user enters something incorrectly.

All right.

Let's save this.

I'm gonna flip back over and we'll do a quick test.

Now I can see that every character starts off as grey meaning we still need to visit this character

and if I enter DL o r e correctly each character starts to turn green.

Then if I start to enter stuff incorrectly it all starts to turn red at any point time.

I can't continue to start entering the correct character.

So right now I need to enter an I.T. if I do so.

Those do show up as green and so I'd have to go back to all these previous characters and fix those

up.

Well I'd say this looks pretty good.

If I now entering the full string correctly I'm gonna do a copy paste here.

Everything turns green and I get the success message at the bottom.

While I'd say this looks pretty good on its last step I know it's kind of challenging to understand

especially because we added in the call to a method on our class which is something we've definitely

not really done before.

Again if you did not add that part in absolutely no problem whatsoever and if you got stuck entirely

on a step.

Also no problem whatsoever.

This really was a challenging little application.

I just wanted to kind of push you a little bit and get you to try some different things out all right.

So that is it for this application.

I hope you enjoy putting this thing together step by step and at the very end here we've got a fun little

application where we can write out the sentence a quick little typing test and so on.

Though we still got a lot to learn about TypeScript and angular so click pause right here and I'll see

you in just a minute.