1 00:00:02,070 --> 00:00:03,310 Hello in this link. 2 00:00:03,310 --> 00:00:08,700 Sure we are going to start designing the calculator. 3 00:00:08,810 --> 00:00:19,180 It's going to be a two part lecture series on the design and hopefully we'll complete that in part two. 4 00:00:19,410 --> 00:00:25,780 First thing I want to do is to start creating the buttons for our calculator. 5 00:00:25,800 --> 00:00:29,820 So go to the tool box here and click on come on. 6 00:00:29,820 --> 00:00:30,590 Control. 7 00:00:30,660 --> 00:00:40,630 That's one for buttons just dragging along and we just create a button somewhere there. 8 00:00:41,520 --> 00:00:54,710 I'll be the first button all moved that he a little bit and just give it. 9 00:00:55,070 --> 00:00:57,210 And I want it to be too big. 10 00:00:59,250 --> 00:01:00,130 OK. 11 00:01:00,650 --> 00:01:04,340 Let's change some other properties are click on the button. 12 00:01:04,420 --> 00:01:06,720 I want to change the background color. 13 00:01:07,220 --> 00:01:09,410 So come here with go back color. 14 00:01:09,530 --> 00:01:13,190 Click on that and go to Web. 15 00:01:15,560 --> 00:01:21,760 I'm just going to screw down and look for the color that I like. 16 00:01:22,040 --> 00:01:26,790 I want something bluish sky blue. 17 00:01:26,840 --> 00:01:28,130 I like that. 18 00:01:28,130 --> 00:01:35,490 So next I want to change the text on the button. 19 00:01:36,200 --> 00:01:41,110 At the moment the same button one I wanted to say. 20 00:01:41,420 --> 00:01:44,900 Number seven. 21 00:01:44,900 --> 00:01:45,740 All right. 22 00:01:45,740 --> 00:01:53,540 Next thing I want to do is change the name the actual name of the button. 23 00:01:53,840 --> 00:01:57,170 It's called button one here. 24 00:01:57,170 --> 00:02:03,360 I want the button to reflect the number it represents. 25 00:02:03,380 --> 00:02:05,580 Call it button seven. 26 00:02:05,750 --> 00:02:12,460 Next thing I want to do is change the size of the button and I'll go to the font. 27 00:02:12,470 --> 00:02:14,150 We've got size here. 28 00:02:14,210 --> 00:02:15,920 Just change that to 29 00:02:18,590 --> 00:02:22,390 30 see what it looks like on the 30. 30 00:02:22,640 --> 00:02:23,870 That's quite big. 31 00:02:25,730 --> 00:02:28,960 OK I'll leave it light up for now and see. 32 00:02:29,930 --> 00:02:31,750 Let's click on that again 33 00:02:35,200 --> 00:02:41,860 make it 28 and see looks like yep 28 is good. 34 00:02:42,040 --> 00:02:44,570 So I'll leave it may click. 35 00:02:44,620 --> 00:02:48,840 Make sure when you're changing the properties always click on the. 36 00:02:49,240 --> 00:02:52,950 On the actual button. 37 00:02:53,040 --> 00:02:58,930 So that way you know you are changing the correct properties because if you click on here you're trying 38 00:02:58,930 --> 00:02:59,640 to change stop. 39 00:02:59,650 --> 00:03:07,900 You'll be changing the properties for the forms So always check the title when you change in properties. 40 00:03:07,900 --> 00:03:10,510 I'm happy with the rest of the properties. 41 00:03:10,690 --> 00:03:15,730 The text line is set to me the center so I'm happy with that so I'm going to do nice. 42 00:03:15,730 --> 00:03:21,930 Copy the button and paste it three more times. 43 00:03:21,940 --> 00:03:23,550 Just right click. 44 00:03:23,560 --> 00:03:40,900 Copy paste as one paste to paste three and I'll just change the values in each of the buttons. 45 00:03:41,290 --> 00:03:44,670 So I've changed the properties for the rest of the button. 46 00:03:44,950 --> 00:03:47,950 These and I've also named them cogently. 47 00:03:47,950 --> 00:03:53,470 This one here is going to be the divide button the division button. 48 00:03:54,010 --> 00:03:58,130 So I've called it divide between. 49 00:03:58,180 --> 00:04:01,640 Notice the capitalization of the second word. 50 00:04:01,660 --> 00:04:11,380 So now I need to put a division sign in there so to do that I just need to go to where the text is here 51 00:04:11,860 --> 00:04:13,030 and get rid of the text. 52 00:04:13,030 --> 00:04:21,010 We're going to use the old key so to put a division symbol you hold down the old key on your keyboard 53 00:04:21,520 --> 00:04:32,500 and typing 0 2 4 7 and that will place a division symbol in the next thing I want to do I want to change 54 00:04:32,500 --> 00:04:35,140 the background color of this. 55 00:04:35,140 --> 00:04:37,600 So I just come here. 56 00:04:37,600 --> 00:04:40,150 Where is caught the bad color. 57 00:04:42,840 --> 00:04:47,550 And just scroll down. 58 00:04:47,760 --> 00:04:49,610 Look for the color I like. 59 00:04:51,350 --> 00:04:53,540 I want a distinct color. 60 00:04:53,580 --> 00:04:56,080 Kind of. 61 00:04:56,520 --> 00:04:59,640 Let's give it it. 62 00:04:59,700 --> 00:05:00,930 What does that look like. 63 00:05:01,020 --> 00:05:01,430 Yeah. 64 00:05:01,490 --> 00:05:05,600 Does it work. 65 00:05:05,790 --> 00:05:08,220 All right I'll leave it with that color. 66 00:05:08,910 --> 00:05:24,030 So what I'm now going to do is copy all this and paste it three more times carbon copy one just online 67 00:05:24,030 --> 00:05:26,940 intimate to 68 00:05:30,690 --> 00:05:31,620 okay. 69 00:05:31,680 --> 00:05:34,260 One more three. 70 00:05:37,170 --> 00:05:38,860 Okay. 71 00:05:39,530 --> 00:05:40,670 That's good. 72 00:05:42,820 --> 00:05:45,820 Let me just run the code and see what it looks like in code 73 00:05:48,730 --> 00:05:50,900 okay. 74 00:05:50,980 --> 00:05:55,450 I think I'll need to expand this form a bit. 75 00:05:55,450 --> 00:05:55,900 OK. 76 00:05:55,900 --> 00:05:57,430 Click on that. 77 00:05:57,520 --> 00:05:59,210 Go back to the form. 78 00:05:59,470 --> 00:06:00,960 Where's the border 79 00:06:03,810 --> 00:06:04,850 board. 80 00:06:04,870 --> 00:06:06,610 There's a property here. 81 00:06:06,730 --> 00:06:15,880 I want to remove that for now and make it sizable so that I can increase the size of the form. 82 00:06:17,080 --> 00:06:18,800 So if I click on that. 83 00:06:18,800 --> 00:06:25,140 Now the form should be sizable. 84 00:06:25,210 --> 00:06:26,080 All right. 85 00:06:26,080 --> 00:06:27,030 OK. 86 00:06:27,130 --> 00:06:32,920 So I will lock that property down later but for now why we're still in the design mode. 87 00:06:33,010 --> 00:06:43,390 I just I'm just gonna make it a bit recyclable so I'm gonna stop this lecture show here in part two. 88 00:06:43,390 --> 00:06:53,110 I'm going to configure the rest of the button and also add a result button here a result a text result 89 00:06:53,830 --> 00:06:57,370 where the results of the calculation will be displayed. 90 00:06:57,550 --> 00:07:04,940 And that also include a button called clear that will clear what server is showing on the display. 91 00:07:05,050 --> 00:07:07,440 So we'll do all that in the next lecture. 92 00:07:07,450 --> 00:07:08,500 Thanks for watching. 93 00:07:08,500 --> 00:07:10,050 Take care and bye for now.