Hello and welcome to the part two of creating calculator's structure.
The next thing I want to do is add an import element inside our Form element input element is going
to be used as an input field where the user can enter or import some data input elements are common
when you use form elements.
He used that to declare input control that allows the user or users to input some data.
So let's put a limit so inside the form element that's going to tab down and type in input.
So again you do leston sign and then you type in the word input
output an amount is going to take a couple of attributes.
So I'm going to give it a name attribute.
That's the first attribute I am going to set this to your course to display
display.
Basically will specify the behaviour of the element how the elements are going to be displayed next
attribute.
Hi one to add is going to be an online style so I want to apply some CSA.
This is going to be in line here.
When you apply.
Is a thin line you have to use this down element.
So I'm going to sit down to be forced to see this style attribute So this now is the style attribute
where you are using.
Yes this New Years to style as an attribute.
So now I need to keep the value the attribute the value value for the attribute this time attribute
is going to be.
See it says properties.
Hi one to start.
I'm going to be using a call or pick a tool.
This tool here is a tool I normally use called web page effect dot com So basically you can pick up
X..
This is the exact decimal value.
If you find the colour you want by mixing different colours together you can either use the hex value
or if you know the name on the call or just type in the name of the column.
This is where I'm going to be picking up my columns from.
I have just added value for my style attribute so I'm just going to go through that with you.
So here is the way this will determine the winner of this play here.
So given it a value of 6 7 5 pixels high and give you an 800 pixels in height text.
I want the text and the text is going to be entered into the display.
I want that to be centred.
Have given it a background call all of this is in the hex decimal finally.
So if I bring up mine.
You can see this is what it looks like at the moment.
So this is what I have just applied the style into.
This is the display for my Cup later this is where the imputed value or the calculated values will be
displayed.
Saw this time here is is responsible for this area here.
Okay not here when your why you see this in line like this is not a common practice.
His name is I'm doing this because this is a small project we are using.
Like this is not an effective way at all.
I'm only doing it because it's a small project and we use this line like this.
You use it with this style attribute.
I am now going to add some more input element.
The type of input this time is going to be buttons.
When you're using this star tribute don't forget to include the values.
So the beginning and the end must be close in quotes he can see here I've got quotes at the beginning
here and quotes at the end.
Another thing I want to do here is to break a tie break element so that he creates a space between this
input and the other inputs.
I'm just kind of typing.
Ah.
That will create a line break.
So there be a gap from one input to the other.
So I bought my first potman on line 17.
You can see it again it's an input element at the type which is the attribute it has a button and the
value here refers to the value attribute this specifies the value that will be displayed inside the
button and it will display zero.
So if I show you this in the web browser you can see that's the button there and you can see he's got
zero.
So I'm going to create the other buttons the same way just by copying and pasting.
I have added the rest of the buttons inside the form element so we can see here with represents an attribute
that displays more initials inside the button.
So what if I just played and the button is going to be the value of that button.
And these are represented by these numbers here.
So we have the buttons that will have 0 1 2 and then this is the addition button.
We've got the suppression button here we've the multiplication button on line 27 929 we've got the clear
button 30 we will be equal to bottom line among the division button.
But because there is no deviation on the keyboard you have to use this symbol to add the division symbol
to the button.
So we have the symbol hash to force 7 the semicolon DAO will add a division button o a devotion symbol
to the button.
I have closed all the values in quotes here because they are values for these attributive family so
this value is an attribute and you always have to enclose the value of attributes in quotes.
No it is called 3 break element here.
This basically means that I have three buttons three buttons here will be on the same line and they
will be break and then we have these three buttons.
There'll be a break and then we have this three button to be another break and then there will be this
button so all these buttons would be on wherever you were the break element means that the buttons will
be separated.
So I have one line to line every line.
So these are all the various lines so on this line here we're going to have zero the one did too.
And the plus button.
Let's take a look at how this looks in the browser so that's how the buttons were presented in typee
Web browser here.
This is a display area for these various buttons.
The buttons will not work at the moment.
I click on it you can see each time I click on it.
He will show in the corresponding court here.
You can see here that shows have a click.
It will show but nothing will be displayed.
And that's because we've not added the javascript part of the code that will create that interaction.
So going to be doing that in the next to you.
Thank you so much for watching.
Bye for now.