All language subtitles for 4. Displaying Content

All right.

Let's go through a solution to this next step.

Do we need to change the content that gets displayed to the user.

Specifically we want to replace this default screen with some basic elements for our application.

Now recall that anytime that we say that we want to change some content that gets displayed to the user

that's always a sign that we want to change a component template.

So let's open up our code Ed right now and inside of our source app folder we're going to find our app

component dot H2 UML file.

This is our app component template.

I will highlight everything inside of here.

So this is all the pre generated default landing page stuff.

You can delete it or then replace it with some elements to show that basic stuff on the screen at the

very top all display.

And each one that says typing challenge that's kind of like our big title.

Next up we need some place to put the randomly generated text though right underneath the H1.

I'll put in a paragraph element that says something like randomly generated text should go here.

Then after that we need to show our input and then finally we need to show a success message at the

very bottom.

I'll put in an H1 down there as well and I'll say success

OK.

So hopefully you got something like this put together as well.

We go back over to our application we'll see those elements appear.

They look kind of ugly right now.

You and I are going to add in a little bit of styling to this right away for a lot of the.

Yes s in each team l structure we're going to go over that stuff together because I don't really expect

you to guess at the exact class names that I want you to use to end up with something that looks like

our original mockup over here.

Let's figure out some additional class names and elements to throw inside of here just to get a little

bit of styling the first off we're going to wrap everything inside this template with another div that

has a class of container and I'll make sure I close that off at the bottom and inside there we're going

to wrap everything once again with another div that has a class of columns and is Dash centered and

I'll close that div off at the bottom then we're going to wrap all this once again with a div that has

a class of box alum and is dash one dash third and once again I'll close that div off at the bottom.

Now if I save this right away and go back over we'll see that we essentially just got thing that looks

like that.

So everything is going to wrapped into a card.

It's centered in the very middle and it's got kind of this one quarter with where it's really only one

quarter of the available width on the screen let's now add some additional styling to the each one the

input that paragraph element and so on they'll find the H1 element we're going to give a class of title

and has text centered I'm going to give the paragraph element a class of has dash text dash centered

as well

on the input elements I'll give it a wrapping div that has a class of field and to the input itself

I'll give it a class of input and then finally for our success message at the bottom I'm going to wrap

that as well but the div of class box and as dash next dash centered

I'll put it closing div on the other side and then finally last thing here on the H1 itself I'll give

it a class of title OK.

There we go.

The double check your spelling inside of here.

Because I did just add in a lot of additional stuff.

Make sure you've got the exact same text.

I do now if I flip back over I should see something it looks closer to this definitely a little bit

closer to our original mockup OK.

That w looks a little bit better.

I'm going to zoom this back in just remember I always run my browser really far zoomed in.

So you're going to start to see a lot of stuff that looks a little bit different than what you have

on your screen.

Now the next thing we're going to do let's bring up a diagram.

We need to randomly generate a sentence to show to a user when our application first starts up and loads

up inside the browser.

We need to somehow randomly generate a sentence to show to the user.

The chances are we should generate that sentence and maybe just as kind of a guess here as a little

tip maybe we should assign that as a prop..

One of the components inside our application and then we should try to get that randomly generated sentence

visible on the screen probably inside of that paragraph element right here.

So we'll probably replace that hard coded text right there with whatever are randomly generated sentence

is.

Now I do not expect you to figure out how to randomly generate some Latin sentence.

We're going to go over that initial step together.

Right now I'm going to show you a little library that we're going to use to randomly generate a sentence

for us.

OK.

So to randomly generate a sentence we're going to flip over to a new browser tab and navigate to NPM

Jess dot com this is a listing of all the different packages that we can easily stall into our project.

We're going to do a search for a very particular package called Baker bakery is a really popular package

that is used to just generate random data essentially fake data and so it makes it really easy to test

out applications and whatnot by throwing in a ton of fake data to it though we're going to use this

package just to generate one single random sentence to show to the user we're going to first install

this as a dependency into our project and then we'll come back over to the documentation and get a better

idea of how to actually use it.

OK.

I'm gonna go back over to my terminal in order to install this.

Once again I'm inside of a second terminal window.

Here's my original one here's my second terminal window.

Again it's inside of my typing project directory inside there.

I'll do an npm install maker install that module while that goes I can go backwards.

The documentation and we'll figure out how to use this to generate a sentence.

I'm going to scroll down for just a little bit and then I'll find demo right here on this demo page.

We can take a look at all the different types of data that we can generate I'm going to scroll down

a little bit on this initial page they land on and we'll see something it says API reference right here.

So inside of API reference we're going to find a link to Lorem right there.

I'll go ahead and click on it

the inside of the Lorem sub module of the faker package.

You can use this thing to generate a random word random words so multiple written into words a full

sentence sentences a paragraph paragraphs and so on.

You get the idea that for you and I we're going to use this sentence function and that's going to generate

a string that looks like that right there though it will be perfect for a little typing test now that

we've installed this module and we've seen the function we want to use.

Let's go back over to our Ed we're gonna find our app component because that's where we're going to

initially use this thing and I'll show you really quickly how to call this sentence method.

It's a back inside my Ed. I'm going to find my app component here it is right here and then at the very

top right underneath our angular core imports I'm gonna add in another import and we're going to get

the Lorem sub module from the baker module.

Now if you see a little underlined right here that says hey cannot find a declaration file then no problem.

If you see that little warning we will flip back over to our terminal and you can install a second little

package npm install at types slash Baker.

You only have to do that if you see that little underline this additional package we're installing has

some information about the faker module in it specifically telling typescript which is what we are writing

right here about the different types of variables and functions available to us inside of the failure

package.

Now if we wanted to generate a random sentence we would call Lorem dot sentence like so that's gonna

give us back a string of characters representing the random sentence.

That's how we generate the random sentence I'm going to delete that and now I'm going to leave it up

to you to figure out what we actually want to do with that sentence that we just achieve step one right

here and it's up to you to figure out the next two it we'll take a pause here.

Go ahead and give those next to a shot and I'll see you in just a moment.