1 00:00:00,510 --> 00:00:06,810 Hello and welcome to the part two of creating calculator's structure. 2 00:00:06,960 --> 00:00:17,130 The next thing I want to do is add an import element inside our Form element input element is going 3 00:00:17,130 --> 00:00:28,560 to be used as an input field where the user can enter or import some data input elements are common 4 00:00:29,000 --> 00:00:30,900 when you use form elements. 5 00:00:31,010 --> 00:00:40,530 He used that to declare input control that allows the user or users to input some data. 6 00:00:40,640 --> 00:00:50,150 So let's put a limit so inside the form element that's going to tab down and type in input. 7 00:00:50,710 --> 00:00:56,850 So again you do leston sign and then you type in the word input 8 00:00:59,410 --> 00:01:06,230 output an amount is going to take a couple of attributes. 9 00:01:06,600 --> 00:01:09,130 So I'm going to give it a name attribute. 10 00:01:09,270 --> 00:01:14,090 That's the first attribute I am going to set this to your course to display 11 00:01:17,370 --> 00:01:18,500 display. 12 00:01:18,630 --> 00:01:27,390 Basically will specify the behaviour of the element how the elements are going to be displayed next 13 00:01:27,570 --> 00:01:28,200 attribute. 14 00:01:28,230 --> 00:01:36,110 Hi one to add is going to be an online style so I want to apply some CSA. 15 00:01:36,300 --> 00:01:39,110 This is going to be in line here. 16 00:01:39,510 --> 00:01:40,510 When you apply. 17 00:01:40,610 --> 00:01:44,420 Is a thin line you have to use this down element. 18 00:01:44,640 --> 00:01:52,290 So I'm going to sit down to be forced to see this style attribute So this now is the style attribute 19 00:01:52,310 --> 00:01:53,770 where you are using. 20 00:01:53,830 --> 00:01:57,580 Yes this New Years to style as an attribute. 21 00:01:57,740 --> 00:02:05,220 So now I need to keep the value the attribute the value value for the attribute this time attribute 22 00:02:05,310 --> 00:02:07,120 is going to be. 23 00:02:07,310 --> 00:02:08,950 See it says properties. 24 00:02:09,000 --> 00:02:10,990 Hi one to start. 25 00:02:11,340 --> 00:02:15,240 I'm going to be using a call or pick a tool. 26 00:02:15,270 --> 00:02:25,010 This tool here is a tool I normally use called web page effect dot com So basically you can pick up 27 00:02:25,050 --> 00:02:25,500 X.. 28 00:02:25,500 --> 00:02:27,560 This is the exact decimal value. 29 00:02:27,560 --> 00:02:34,080 If you find the colour you want by mixing different colours together you can either use the hex value 30 00:02:34,530 --> 00:02:38,560 or if you know the name on the call or just type in the name of the column. 31 00:02:38,600 --> 00:02:42,690 This is where I'm going to be picking up my columns from. 32 00:02:42,690 --> 00:02:50,410 I have just added value for my style attribute so I'm just going to go through that with you. 33 00:02:50,580 --> 00:02:56,260 So here is the way this will determine the winner of this play here. 34 00:02:56,750 --> 00:03:06,810 So given it a value of 6 7 5 pixels high and give you an 800 pixels in height text. 35 00:03:06,830 --> 00:03:11,370 I want the text and the text is going to be entered into the display. 36 00:03:11,430 --> 00:03:14,010 I want that to be centred. 37 00:03:14,050 --> 00:03:19,980 Have given it a background call all of this is in the hex decimal finally. 38 00:03:20,270 --> 00:03:22,210 So if I bring up mine. 39 00:03:22,260 --> 00:03:25,530 You can see this is what it looks like at the moment. 40 00:03:25,800 --> 00:03:29,430 So this is what I have just applied the style into. 41 00:03:29,430 --> 00:03:37,710 This is the display for my Cup later this is where the imputed value or the calculated values will be 42 00:03:37,830 --> 00:03:39,240 displayed. 43 00:03:39,330 --> 00:03:44,720 Saw this time here is is responsible for this area here. 44 00:03:45,270 --> 00:03:52,600 Okay not here when your why you see this in line like this is not a common practice. 45 00:03:52,610 --> 00:03:58,120 His name is I'm doing this because this is a small project we are using. 46 00:03:58,130 --> 00:04:01,550 Like this is not an effective way at all. 47 00:04:01,620 --> 00:04:07,130 I'm only doing it because it's a small project and we use this line like this. 48 00:04:07,260 --> 00:04:11,860 You use it with this style attribute. 49 00:04:12,110 --> 00:04:18,460 I am now going to add some more input element. 50 00:04:18,740 --> 00:04:23,630 The type of input this time is going to be buttons. 51 00:04:24,850 --> 00:04:31,010 When you're using this star tribute don't forget to include the values. 52 00:04:31,070 --> 00:04:37,360 So the beginning and the end must be close in quotes he can see here I've got quotes at the beginning 53 00:04:37,360 --> 00:04:40,000 here and quotes at the end. 54 00:04:40,090 --> 00:04:49,070 Another thing I want to do here is to break a tie break element so that he creates a space between this 55 00:04:49,150 --> 00:04:51,480 input and the other inputs. 56 00:04:51,490 --> 00:04:53,700 I'm just kind of typing. 57 00:04:53,820 --> 00:04:55,460 Ah. 58 00:04:56,260 --> 00:04:59,970 That will create a line break. 59 00:05:00,110 --> 00:05:05,520 So there be a gap from one input to the other. 60 00:05:05,650 --> 00:05:10,880 So I bought my first potman on line 17. 61 00:05:10,900 --> 00:05:20,020 You can see it again it's an input element at the type which is the attribute it has a button and the 62 00:05:20,020 --> 00:05:27,700 value here refers to the value attribute this specifies the value that will be displayed inside the 63 00:05:27,700 --> 00:05:30,410 button and it will display zero. 64 00:05:30,610 --> 00:05:37,720 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 65 00:05:37,720 --> 00:05:38,540 zero. 66 00:05:38,620 --> 00:05:46,160 So I'm going to create the other buttons the same way just by copying and pasting. 67 00:05:46,270 --> 00:05:59,140 I have added the rest of the buttons inside the form element so we can see here with represents an attribute 68 00:05:59,650 --> 00:06:05,560 that displays more initials inside the button. 69 00:06:05,560 --> 00:06:11,250 So what if I just played and the button is going to be the value of that button. 70 00:06:11,390 --> 00:06:14,990 And these are represented by these numbers here. 71 00:06:15,100 --> 00:06:22,270 So we have the buttons that will have 0 1 2 and then this is the addition button. 72 00:06:22,270 --> 00:06:31,450 We've got the suppression button here we've the multiplication button on line 27 929 we've got the clear 73 00:06:31,450 --> 00:06:38,830 button 30 we will be equal to bottom line among the division button. 74 00:06:38,840 --> 00:06:50,680 But because there is no deviation on the keyboard you have to use this symbol to add the division symbol 75 00:06:50,890 --> 00:06:52,940 to the button. 76 00:06:53,110 --> 00:07:05,590 So we have the symbol hash to force 7 the semicolon DAO will add a division button o a devotion symbol 77 00:07:05,980 --> 00:07:08,580 to the button. 78 00:07:08,980 --> 00:07:19,300 I have closed all the values in quotes here because they are values for these attributive family so 79 00:07:19,300 --> 00:07:26,500 this value is an attribute and you always have to enclose the value of attributes in quotes. 80 00:07:26,520 --> 00:07:30,460 No it is called 3 break element here. 81 00:07:30,460 --> 00:07:37,160 This basically means that I have three buttons three buttons here will be on the same line and they 82 00:07:37,160 --> 00:07:40,280 will be break and then we have these three buttons. 83 00:07:40,450 --> 00:07:46,120 There'll be a break and then we have this three button to be another break and then there will be this 84 00:07:46,270 --> 00:07:53,890 button so all these buttons would be on wherever you were the break element means that the buttons will 85 00:07:53,890 --> 00:07:55,360 be separated. 86 00:07:55,450 --> 00:07:59,500 So I have one line to line every line. 87 00:07:59,710 --> 00:08:06,190 So these are all the various lines so on this line here we're going to have zero the one did too. 88 00:08:06,220 --> 00:08:07,470 And the plus button. 89 00:08:07,720 --> 00:08:16,120 Let's take a look at how this looks in the browser so that's how the buttons were presented in typee 90 00:08:16,210 --> 00:08:17,530 Web browser here. 91 00:08:17,650 --> 00:08:20,660 This is a display area for these various buttons. 92 00:08:20,710 --> 00:08:22,820 The buttons will not work at the moment. 93 00:08:22,820 --> 00:08:25,790 I click on it you can see each time I click on it. 94 00:08:25,820 --> 00:08:28,920 He will show in the corresponding court here. 95 00:08:29,440 --> 00:08:32,190 You can see here that shows have a click. 96 00:08:32,190 --> 00:08:35,130 It will show but nothing will be displayed. 97 00:08:35,330 --> 00:08:43,600 And that's because we've not added the javascript part of the code that will create that interaction. 98 00:08:43,600 --> 00:08:46,490 So going to be doing that in the next to you. 99 00:08:46,720 --> 00:08:48,460 Thank you so much for watching. 100 00:08:48,460 --> 00:08:49,360 Bye for now.