All language subtitles for 7. Conditional Display

All right.

Let's make sure that we can hide or display that success message at the bottom the screen.

Remember that's the exercise that we just laid out.

There's definitely many different ways we can accomplish this.

I'm going to show you what you probably came up with.

You probably came up one of two different ways.

So I got to show you one way and then as we are implementing this I will mention another way that you

very likely might have implemented this as well.

Either approach that I'm going to show you or mention really quickly is 100 percent appropriate though.

Let's get to it.

I mean first begin inside of my app component class.

So essentially we want to take a look whenever this event handler right here gets called.

You want to look at the value that the user has entered.

And if a user entered a value that is equal to random text and we want to communicate that into our

template and specifically we want to either hide or show this div down here along with the H1 inside

of it

the first way that we could do that is by taking the value that a user has entered and storing it as

a property on our components.

So for example I could define a new property called entered text and default it to be an empty string

and whenever on input gets called I can update the value of enter text.

Let's say this not entered text equals value whenever we update a property on the class that is going

to cause our template to automatically update itself so we can now go back over to our template and

down on that div at the very bottom we can compare the enter text property against random text and then

if they are identical we can either show or hide the message at the bottom.

Now remember there is another way that you very likely might have taken care of this.

I will mention that in just a moment they will now go back over I'll find the div at the very bottom

and remember to conditionally show or hide some content we can use that energy for DirecTV.

I'll find a div and on the devil add star to me I said energy four I meant to say Gee if my mistake

will say if the enter text properly is equal to random text then we will show this.

Otherwise we'll hide it.

We'll say random text.

Equal equal equal enter text

while say this and then going to flip back over I'm going to copy that string right there exactly and

throw it into the input.

Mr as I do I see success appear but if I change the entered string then the message goes away by I can

delete and re-enter that last character and every single time I toggle the visibility of the message

at the bottom like I said this is one way to take care of this another way that you might have handle

this is by creating a new property on the class called if you like solved or something and by default

maybe we are not solved mean every single time a user enter some piece of text you could take a look

and compare that value against random text and if they are equal then we can update solved to be true

like so that if you came up with some solution like this.

Like I said this is 100 percent ok as well.

Totally appropriate either solution works just fine.

The only reason that I'm trending towards this initial solution of storing the text value or the entered

text like this is that I know that in just a moment we're going to have to enter or limit access entered

text inside of our template in order to compare all those characters one by one but in my scenario I

just kind of know the future here.

You're having already implemented this thing so if you added in that solve property totally fine.

Either way you're good to go okay.

Now that we've got this put together let's talk about our next step our next step is where things are

going to get a little bit challenging though for our next step.

This is where the real meat and potatoes comes into play.

We want to display every character of our random text inside of the template.

Well we want to color each character depending upon whether it's right wrong or if it hasn't been entered

yet.

Let me give you a couple notes on how to accomplish this because there's definitely many different ways

to solve this.

I'm going to show you one very particular way definitely a lot of different ways of taking care of it.

The first thing I want to mention is that we are not trying to just find the first character that is

wrong and then color everything after it inside red.

Instead we really want to do an exact character by character comparison and we want to color each character

precisely depending upon whether the user has entered the correct character down here inside the text

input.

So in this example we are supposed to enter Lorem if some dealers said Ahmet and then in the text input

we imagine that we entered Lorem everyone those characters is correct.

So they all show up as green then a space and then K.B. some is what was entered the K in the B are

incorrect here.

So up here inside of the randomly generated text we should color just I N P as red because those are

the two characters that were entered incorrectly and then after that we do in fact enter s you m correctly

so in the generated text we should color those as green and everything after that.

We haven't entered any character at s yet so far.

Those should all be just black or gray or something similar again.

We want to make sure that we do a character by character comparison.

Let me give you a couple notes now on how you might approach this there's definitely two over all possibilities

of solving this problem.

The first way that you might solve this is taking a class based approach.

So when I say class based I mean we are going to stuff as much code on the component side or the class

side inside of a method as we can to compare these two strings and then maybe generate some kind of

data structure that describes how our template should actually render out all this data.

So inside this class based approach we might add in a lot of logic too on input right here to take a

look at enter text and take a look at random text and then for every single character generate some

description something somehow to say okay let's show this character in it should be this color that

is the first approach we might take the other approach we might take is to really just take the information

that has been entered by the user and then through a lot of logic into our template to decide how to

show each character.

So in this template based solution what we have already inside of on inputs is like almost enough inside

of your already and we would rely upon a lot of template syntax.

So a lot of stuff that we go through inside of here rely upon rendering out each character and then

coloring each one is readily you and I are going to go with a template based solution.

We're going to rely a lot on making sure that we enter in some template syntax to show each character

and apply some styling or some class to give some styling readily to each individual one which way you

go totally up to you.

Either way really is appropriate here.

Now if you go with the template based solution there is one thing that you're probably going to need

to be aware of chances are you might use say an end G4 to iterate over every entered care or see every

character of random text right here and print out every character as a separate element.

You might use an energy for four that's an N for each character.

You might try to look up the accompanying index inside of enter text so when we discussed energy for

just a little bit ago we just discussed how to use it to iterate through some array of things and print

each one out and we didn't actually discuss how to access the index of every element that we are iterating

over a little hint that I want to give you here is that if you ever need to access the index of an element

as we are iterating over it with energy for you can write out the original or let letter of random text

or whatever else and then a semicolon and then let I equals index and then you will have access to this

variable inside of your template of I.

And that will tell you the exact index that you are working with that they want to mention really quickly.

This is something you might figure out on your own when we're making use of energy for we have to iterate

over an array random text is a string.

And so to turn that string into a array of characters you'd call split on it with an empty string just

one throw that in there really quickly.

Now the other big challenge you're probably going to run into is how to style each individual character.

I'm gonna let you do a little bit of research on that front.

Is that something that you definitely have to figure out.

Again if you're not sure how to tackle any of this don't sweat it.

This really is a very challenging little exercise.

But feel free to pop over to the next video and I'll show you exactly how we would walk through this.

This is definitely it like I said the most challenging aspect of this whole project that you got everything

up to this point.

That is fantastic.

It's let's take a quick pause here and then start to tackle this in just a moment.