All language subtitles for 8. Character by Character Comparison

All right.

Let's try doing this character by character comparison using a template based approach.

Again the idea here is they're going to stuff in a lot of logic to our template to compare each character

to first begin by going back over to my app components.

I just want to remind you very quickly that we've got two properties available to us.

We have random text and we have entered text.

So we want to iterate over random text and for every character we want to printed out on our template

and then for each of those characters we print out we want to compare the character against entered

text.

If they're the same we want to somehow color green.

Otherwise color it red.

Let's first begin by just trying to print out every character of random text one by one but to do so

I'll go back over to my template I'm gonna find the paragraph elements where currently we are printing

out the entire string I'm going to delete that and replace it with a span element.

They're going to print out every character one by one and side of separate span elements to do so we're

going to use the energy for structural directive on this thing.

They'll say Star and G4 and then inside there we're going to set up our statement to take a look at

the random text property and iterate over it.

Character by character will say let letter of random text.

Now as I mentioned in the last video at the very end when you use energy for angular wants to see an

array right here right now we've got a string.

If you save this as is and then flip back over to your application and open up your console you're probably

gonna see a really big error message like this though it says specifically energy for wants to see an

array but we are providing a string instead but let's go back over to find random text right here and

all we have to do to turn that string into an array is add on that split and split by empty string.

That will take that string right there and give us an array of Strings instead now to test this out

inside the span.

I'm going to try to use string interpolation to print out the value of letter inside of a span.

Put in double curly braces and I'll print out the letter inside their will then save this you know flip

back over.

Now I can see the same text just like we had before.

However if I now inspect that element I'll see that it's actually a big collection of different spans.

And so now we can apply some styling rules like either CSX or direct styling to each individual span

to color each one so either green red or the default black as it is right now that's kind of step one.

Now the next thing we have to do is figure out how to actually compare each character inside of your

eye.

Each character that a user enters into this text input.

That's why I mentioned at the end of last video that you might need the index.

So as we're iterating through using energy for we need to look up the index of each letter that we are

iterating over and we need to compare at each index using our entered text property let's try that out

now writing this out is to be just a little bit messy.

I'm going to zoom out for just a moment so you can see the entire line of code that I'm going to be

working on.

But this is too small.

I am going to zoom back into very shortly so just for a moment I'm going to zoom out so I know first

update my energy for a statement at the very end of it open in a semicolon and then I'll say let I equals

index.

So now we've got a variable I that we can refer to inside the span element anywhere inside the span

to get an idea of what character we are currently iterating over So for right now let's try to print

out every letter that we are iterating over with these corresponding letter out of entered text.

We're going to print them all out inside of sets up parentheses so we can compare each them one by one.

Visually though to do so inside a span I can to wrap that thing with a set of parentheses.

And then after we print out letter and then going to put in another set of curly braces I'll then try

to also print out the corresponding letter out of entered text.

And so I going to say entered text at I am going to say this and then zoom back in really quickly so

you can see what's going on here

OK.

So again I'm trying to print out one opening parentheses and then trying to print out whatever letter

we are iterating over and then immediately after it.

I want to print out the corresponding letter from enter text and I'm printing out a closing parentheses.

Now I'm just doing this right now just to have a manual inspection and say yeah this is like going right

way it's going how we expected going to say this and then look back over right away.

I'm going to see a tremendous number of parentheses.

And by the way you might also see a lot of spaces inside of here as well if you see spaces.

It's probably because you've got something like this right here.

You might have this kind of layout or your HDMI out but if you have that I see all those extra spaces

as well.

So in order to get rid of all those extra spaces you can do exactly what you just saw inside my code.

Ed we're going to make sure that we've got the closing brackets of the opening tag on the same line

and we can make sure that the opening bracket of the closing tag is on the same line as well.

I know that looks kind of ugly but that's how we can get rid of all those extra spaces that I now flip

back over.

No more spaces.

OK.

Now back on track remember we only put in the parentheses here so we can actually compare character

by character.

In this case I want to type out I and V and so on.

So I'll put an I as soon as I do I'll see that I get the same character out of the entered texturing

inside there then n yep those are definitely identical the E and T O R E like so and so in every case

I see the doubling up inside those parentheses which is a sign that I am correctly looking up the characters

of the string right here.

And I have access to them inside that energy for a statement OK.

So now we've got this put together.

Let's take a quick pause right here.

When we come back the next video we're going to wrap up we're gonna make sure that we style usually

span elements appropriately depending upon whether we've got the correct character entered inside of

our input the quick pause and we'll take care of this in just a moment.