Let's go for the solution of the project number four, and to apply the solution, we're going to divide
this problem into two parts.
The first one is the prompt with the variable, and the second one is sending the data variable into
the web page.
So for the first one, just make sure that everybody is on the same page.
My HTML file has references to the style dot CSS and the main and domain.
Yes, that's it.
Yeah.
Styles a style that's empty and main is empty as well.
Okay.
So if I console the log, just a high message, it should work.
And it is working over here.
So we have the link working first step.
Let me create a variable called first.
Name and this variable, we have a prompt processing structure.
Now you will have a prompt and this prompt will have a question.
Please enter your first name.
Okay.
There we go.
Like this.
Please enter your first name.
Let's make sure this is working.
And console.log and first name.
Save my first name, Andre Return.
And Andre's being returned to the console.
This is the problem.
I don't want to return to the console.
I want to return to the web page.
To return to the web page.
We need to do something else first.
Where am I going to return this to the web page?
To which place?
To the head, to the body, to the HTML.
And if you pick one, what position is going to go?
So let's check it out to the index HTML file.
Normally, we're going to return this into the body because if you return to the head, you should be
able to see it.
So inside of the body, I need to make some sort of reservation or a placeholder into a paragraph,
for example.
So I'm going to type over here the P and press tab.
This is a paragraph and inside of the paragraph I'm going to give this paragraph ID a name, I'm going
to call it ID.
So space ID, I press tab and the the name for that is going to be greeting just like this.
So whenever I send to a greeting is going to be displayed inside of this paragraph, it's going to be
displayed here.
I'm not going to leave the here over here, but it's going to be placed over there.
I'm going to save this config and just type.
Nothing happens.
Why?
Because I have the placeholder into a paragraph.
But nothing is descended to greeting to this IED.
So when I go to the main file, I need to take the content of this variable and send to the HTML page
into the greeting position ID.
How do I do that?
There is a function called document dot get element by ID.
This is the method, get element by ID and inside of these get element by IED.
I need to type the ID of the html page in our case is greeting.
Did I say in a singular or plural?
Singular.
Greeting.
Perfect.
That's it.
Dot.
And I'm going to add property called Inner HTML to insert into the HTML.
So I'm using the function.
To get the ID and the ID name I'm giving.
The name is greeting.
Insert into the HTML but inserted what equals to.
My variable first name.
So insert into that my variable first name, which is a string.
I'm going to save the config.
Type my name, press return and voila, it's working.
So my name is being returned into the paragraph which is inside of the HTML OC.
But as far as I remember, the project was giving me an extra message.
You were saying Hello, Space, and then my name.
So in the next class, I'm going to show you how to do that.
If you want to challenge yourself, try to do that without watching the next class and then just go
for the next class just to make sure you got that right.
So we should the best have a go.
And I see you in the next one.