1 00:00:00,840 --> 00:00:09,060 Hello and welcome to this lecture in this lecture we are going to be creating the structure for the 2 00:00:09,060 --> 00:00:12,870 calculator using CML. 3 00:00:13,530 --> 00:00:16,230 So this is my text editor. 4 00:00:16,290 --> 00:00:25,380 I'll be using to write the HMO code which is this text editor called Sublime Text the way I'm going 5 00:00:25,380 --> 00:00:36,840 to structure this lecture is to add chunks of code at a time and then I explain the code to you rather 6 00:00:36,840 --> 00:00:41,790 than you watch me type and take up too much time. 7 00:00:42,660 --> 00:00:53,810 I have added some basic tags these are tags that you will find in every web page or every web application. 8 00:00:53,880 --> 00:00:56,880 They are standard tags that you will see. 9 00:00:57,390 --> 00:01:03,610 So let me explain each one very quickly on line one. 10 00:01:03,640 --> 00:01:11,600 We've got the doc type the doc type basically is there for information and purposes. 11 00:01:11,730 --> 00:01:19,690 What it does it instructs the web browser or any browser that's trying to display the page. 12 00:01:19,830 --> 00:01:25,540 It just lets them know that the content of the page is hate mail. 13 00:01:25,620 --> 00:01:34,100 That's the purpose of the doc type and the hate mail next to it just indicates it's an hate PML document. 14 00:01:34,350 --> 00:01:42,590 So the actual hasty MLK content is between these number two line number two and line 14. 15 00:01:42,600 --> 00:01:50,980 So any of the content are displayed on the web page the content starts from the hate mail that to this 16 00:01:50,980 --> 00:01:52,640 e-mail tag here. 17 00:01:52,680 --> 00:02:02,550 So most tags have an opening and a closing tag so they all come in pairs the head note notice also it's 18 00:02:02,550 --> 00:02:09,420 indented properly so you can tell that the head and the body are both children of the hate PML element 19 00:02:09,980 --> 00:02:21,030 and the title here tag is the child of the head tag the in between the head tag is where you find things 20 00:02:21,030 --> 00:02:29,310 like the title a link to any CFS or script or JavaScript. 21 00:02:29,310 --> 00:02:30,720 Most times you can. 22 00:02:30,840 --> 00:02:34,070 You can include them in the head section. 23 00:02:34,080 --> 00:02:40,860 You can also include several metal tags MIT attacks are used to provide extra information about the 24 00:02:40,860 --> 00:02:50,610 document that you are trying to display and the actual content of the page that visitors or anyone sees 25 00:02:50,790 --> 00:02:57,950 is between the body tags or anything between the body tag is visible. 26 00:02:58,050 --> 00:03:07,640 I have added so much chunk of code I've added From line for to line 7. 27 00:03:07,970 --> 00:03:10,240 So there's a few meth attacks here. 28 00:03:10,240 --> 00:03:20,020 Line 4 basically is a meth attack and it's got an attribute of course set with a value of UTF that 8 29 00:03:20,410 --> 00:03:28,970 the core set attribute basically specifies the character encoding for the hasty AML document. 30 00:03:29,320 --> 00:03:37,090 Line 5 here against another method to out with the attribute of name equals description and also we've 31 00:03:37,720 --> 00:03:39,250 got another attribute here. 32 00:03:39,250 --> 00:03:42,280 Content equals javascript calculator. 33 00:03:42,550 --> 00:03:49,330 So this is descriptive of the document these information here that matter tag they are used to provide 34 00:03:49,390 --> 00:03:57,070 extra information which helps these search engines to display data relevant data. 35 00:03:57,190 --> 00:03:58,750 Line 6. 36 00:03:59,020 --> 00:04:04,350 The meta tag here with the name of attribute with it with this attribute here. 37 00:04:04,360 --> 00:04:07,240 Code name and the value of viewport. 38 00:04:07,250 --> 00:04:15,250 Notice most of and most attributes have the values and closed in quotes. 39 00:04:15,250 --> 00:04:23,350 So here on line 6 the value for this name metal attack this name attribute is viewport. 40 00:04:23,560 --> 00:04:32,440 And then we've also got the content here and the value is with equals device dash with and he's also 41 00:04:32,440 --> 00:04:44,530 got an initial dash skill equals 1 What the viewport is the viewport ref is refers to the screen that 42 00:04:44,530 --> 00:04:47,250 is going to view this calculator. 43 00:04:47,650 --> 00:04:50,230 So it will resize to whatever. 44 00:04:50,590 --> 00:04:58,750 So this what makes this w makes the web page or the web application display this calculator makes it 45 00:04:58,840 --> 00:05:00,370 responsive. 46 00:05:00,370 --> 00:05:08,350 That means it will be responsive to any device regardless of the size it will all to recite itself to 47 00:05:08,350 --> 00:05:14,680 fit that screen device regardless of the device type it will fit the screen. 48 00:05:15,070 --> 00:05:19,780 And this initial scale here is just to zoom is the initial zoom. 49 00:05:19,780 --> 00:05:24,790 So if you want to zoom higher you can zoom as you want in and out of the device. 50 00:05:24,790 --> 00:05:26,010 That's what the scale is. 51 00:05:26,020 --> 00:05:27,520 It's just a zoom. 52 00:05:27,520 --> 00:05:33,760 Line 7 is a reference to the style sheet that I'll be using and be using this. 53 00:05:33,770 --> 00:05:36,900 This is the style sheet have defined on here. 54 00:05:37,000 --> 00:05:42,480 So this is just a link to the style sheet line Niles spoke about. 55 00:05:42,480 --> 00:05:47,480 Line 9 before is just a title for the calculator. 56 00:05:48,300 --> 00:05:51,440 So I've added some more code here. 57 00:05:51,460 --> 00:05:53,460 Line 14 and 15. 58 00:05:53,470 --> 00:06:02,290 Line 14 basically is a head in tag that will use to give a title to the application page. 59 00:06:02,290 --> 00:06:07,540 So that's just what is so hard in tag and the PR here is a breakdown. 60 00:06:07,600 --> 00:06:13,820 Which means after this line it will give us space underneath. 61 00:06:13,840 --> 00:06:16,640 Basically what the break means it means wants this. 62 00:06:16,660 --> 00:06:23,350 Once you get to the end of this line create a space so anything is that needs to follow will come after 63 00:06:23,350 --> 00:06:33,840 this space has been created using the bizarre tag I have added some more CODE ON LINE 16 and 17 lines 64 00:06:33,910 --> 00:06:42,100 16 is have created a form the calculator is going to be created inside the form so the input everything 65 00:06:42,100 --> 00:06:51,370 will be enclosed in a form so the form I have given it an idea equals to my form and I've also given 66 00:06:51,370 --> 00:07:02,670 it a name equals to calc C LC So given it and attributes so this is an attribute and name attribute 67 00:07:02,800 --> 00:07:04,870 given it with the name of calc. 68 00:07:05,360 --> 00:07:07,170 All right so he's got two attributes. 69 00:07:07,170 --> 00:07:13,080 Once an idea and one is a name are also on line 17 created an input. 70 00:07:13,250 --> 00:07:17,010 Phil this is where the answers for the calculator will be displayed. 71 00:07:17,560 --> 00:07:26,710 So giving it a name attribute with a with a value of display so naturally let me save this and see if 72 00:07:26,710 --> 00:07:29,700 we can see if we can see the input. 73 00:07:34,020 --> 00:07:41,900 Ok so this is the input we've just created and that is the head in tag so we can see the input here. 74 00:07:41,940 --> 00:07:51,710 So the answers for the calculator will be displayed inside this input on line 18. 75 00:07:51,900 --> 00:07:59,190 Have got on that input tag but the type of input is a button. 76 00:07:59,250 --> 00:08:07,860 So do the attribute type here equals the value of button and the value of that button will be zero. 77 00:08:07,860 --> 00:08:13,080 So this is where we'll be creating the actual keys for the calculator. 78 00:08:13,080 --> 00:08:14,700 So let me show you. 79 00:08:14,910 --> 00:08:23,280 Let's see what it looks like because all we're going to do is just copy and paste it and create the 80 00:08:23,280 --> 00:08:23,770 other keys. 81 00:08:23,760 --> 00:08:26,110 You can see we've just created a zero. 82 00:08:26,120 --> 00:08:32,280 So I'm going to copy the same and change as change a few things and we can get the rest of the keys 83 00:08:32,280 --> 00:08:32,930 popping up. 84 00:08:32,940 --> 00:08:38,740 So that's just how you create the individual key pads on the calculator. 85 00:08:38,940 --> 00:08:47,580 Using this impulse in the using this input tag will a type equal button the value will be the key. 86 00:08:47,580 --> 00:08:50,610 So be 0 followed by a 1 and so on. 87 00:08:52,250 --> 00:08:52,890 OK. 88 00:08:52,920 --> 00:08:56,850 I have now added more code to create all the keys. 89 00:08:56,860 --> 00:09:00,540 We'll use for his key pad for the calculator. 90 00:09:00,900 --> 00:09:03,500 So basically this is how you create the keys. 91 00:09:03,540 --> 00:09:11,240 So the first one with the value of this will be key pad 0 1 2 3 and this will be the plus symbol. 92 00:09:11,260 --> 00:09:14,550 Notice his break here means after the plus symbol. 93 00:09:14,550 --> 00:09:17,280 Give a break and start a new line. 94 00:09:17,280 --> 00:09:20,600 So we've got 3 4 5 keys. 95 00:09:20,760 --> 00:09:26,580 And then after that we've got the minus key and then a break. 96 00:09:26,580 --> 00:09:29,020 Next we've got six seven eight. 97 00:09:29,130 --> 00:09:33,420 And then this is a multiplication symbol and then a break. 98 00:09:33,420 --> 00:09:38,520 This is number nine two to add a. 99 00:09:38,550 --> 00:09:41,050 This is an entity. 100 00:09:41,130 --> 00:09:46,570 This is what we use to create the division symbol. 101 00:09:47,010 --> 00:09:47,480 OK. 102 00:09:47,490 --> 00:09:50,540 So is use notice here we've got equals two. 103 00:09:50,800 --> 00:09:57,140 But for the visual you need to use this entity a symbol entity to create the symbol. 104 00:09:57,150 --> 00:10:02,180 So let me save that and then you can see how it looks. 105 00:10:02,180 --> 00:10:06,310 So this should give us the full structure of our app. 106 00:10:06,360 --> 00:10:07,620 Just refresh. 107 00:10:07,620 --> 00:10:11,310 As you can see we've got all the key pads we need for the calculator. 108 00:10:11,970 --> 00:10:18,950 So we've got the structure for the hasty e-mail structure in place in the next lecture. 109 00:10:18,960 --> 00:10:22,590 We'll be styling it to make it look prettier. 110 00:10:22,590 --> 00:10:24,210 That's it for this lecture. 111 00:10:24,210 --> 00:10:25,560 Thanks for watching. 112 00:10:25,560 --> 00:10:26,280 Bye for now.