1 00:00:00,240 --> 00:00:03,940 We're almost ready to build the calculator, we need to start setting some JavaScript. 2 00:00:04,200 --> 00:00:09,360 First of all, I want to do is I usually like to grab the elements into an object format so that we 3 00:00:09,360 --> 00:00:12,680 can make use of it as needed within our code. 4 00:00:12,990 --> 00:00:15,300 So this is our main calculator. 5 00:00:15,810 --> 00:00:23,910 And using document queries selector, I'm going to select the element with the class of my cowl and 6 00:00:23,910 --> 00:00:27,240 that's going to bring that element into a usable object format. 7 00:00:27,510 --> 00:00:32,040 And that's always a good idea to just do a quick check to make sure that you do have the element that 8 00:00:32,040 --> 00:00:33,740 you want to make use of and utilize. 9 00:00:34,080 --> 00:00:38,760 So the thing that we need to do, we need to set some variables and these are const they're not going 10 00:00:38,760 --> 00:00:39,510 to be changing. 11 00:00:39,690 --> 00:00:41,370 So this is the key layout. 12 00:00:41,610 --> 00:00:43,220 We can call it Mikis. 13 00:00:43,260 --> 00:00:47,040 This is an array, but it's going to have arrays within it as well. 14 00:00:47,050 --> 00:00:54,840 So for each roll of keys to the first row is going to contain keys of one, two, three and the next 15 00:00:54,840 --> 00:00:55,080 row. 16 00:00:55,110 --> 00:00:57,740 So don't forget to separate these arrays out. 17 00:00:57,990 --> 00:01:01,410 So the next one is actually this is going to be a plus sign. 18 00:01:01,420 --> 00:01:03,350 This is not a for the plus sign. 19 00:01:03,960 --> 00:01:11,660 So this is four, five, six on the keypad of the calculator and then the next one can be a minus sign. 20 00:01:11,970 --> 00:01:14,490 And this essentially is how your keys are going to be laid out. 21 00:01:14,670 --> 00:01:19,440 You might want a different combination, but I think this one is going to be a fairly standard one that 22 00:01:19,440 --> 00:01:20,160 gets used. 23 00:01:20,640 --> 00:01:22,740 This can be for multiplication. 24 00:01:23,190 --> 00:01:25,350 So Asterix for multiplication. 25 00:01:25,560 --> 00:01:29,260 And then let's finalize this with the last straw. 26 00:01:29,280 --> 00:01:31,050 So we've got a C for clear. 27 00:01:31,260 --> 00:01:33,000 We've got a zero four zero. 28 00:01:33,300 --> 00:01:35,370 We've got an equal sign for equal. 29 00:01:35,370 --> 00:01:36,870 And there was one that we're still missing. 30 00:01:36,870 --> 00:01:40,100 So we're missing the backslash, which is the divide, Bill. 31 00:01:40,110 --> 00:01:42,630 So all of our available keys that we need. 32 00:01:42,870 --> 00:01:50,100 And we also have a series of operators that we want to use so we can call them my operators or operators 33 00:01:50,370 --> 00:01:51,330 where we want to call them. 34 00:01:51,480 --> 00:01:57,360 And then this is where we've got the actual operators that we are going to be using within the functionality. 35 00:01:57,360 --> 00:02:00,360 And that's up and coming as we build this application out. 36 00:02:00,390 --> 00:02:04,350 So make sure that they correspond with the keys and we can save that. 37 00:02:04,350 --> 00:02:08,800 So let's refresh, make sure there's no errors and we're ready to build our application. 38 00:02:08,850 --> 00:02:13,890 So what I usually like to do is make sure that the dorm is loaded so the elements are loaded. 39 00:02:14,010 --> 00:02:17,040 And this is the same thing that's used when you use Jeker. 40 00:02:17,050 --> 00:02:20,280 If you're familiar with Chickory, where we've got our document ready. 41 00:02:20,460 --> 00:02:23,070 So we're adding an event listener to the document object. 42 00:02:23,190 --> 00:02:27,270 And the event that we're listening for is dorm content loaded. 43 00:02:27,270 --> 00:02:34,530 I know it's fairly long, but this is the object that gets loaded when all of the dorm content is loaded. 44 00:02:34,530 --> 00:02:39,540 So basically at this point, you're ready to start interacting with the dorm. 45 00:02:39,780 --> 00:02:44,510 So always a good idea to include it, just to make sure that everything is loaded properly. 46 00:02:44,820 --> 00:02:50,580 So once this loads, you're ready to start building out your calculator and we're going to start out 47 00:02:50,580 --> 00:02:53,340 by setting up creating a div. 48 00:02:53,340 --> 00:02:56,250 So this one is going to be the output area. 49 00:02:56,430 --> 00:03:02,310 And if we want to have it as a global object, we can set a variable that's going to be just globally 50 00:03:02,310 --> 00:03:03,960 sitting as my output. 51 00:03:04,230 --> 00:03:11,550 And then within our function we set up that output and using doch create elements. 52 00:03:11,670 --> 00:03:18,090 So this gives us the ability to create elements dynamically and JavaScript and our console log out the 53 00:03:18,090 --> 00:03:21,990 value of my output so we can see that we are creating an element. 54 00:03:22,260 --> 00:03:27,150 So see, that element is being created in the console and right now we don't see a whole lot. 55 00:03:27,150 --> 00:03:28,800 It's just a div that's been created. 56 00:03:29,340 --> 00:03:36,750 So we need to add some properties to it and we want to start this my output and that's its inner HTML 57 00:03:37,020 --> 00:03:39,420 and give it in terms of zero. 58 00:03:39,420 --> 00:03:42,910 So calculators usually have a digit and that's going to be zero. 59 00:03:43,170 --> 00:03:48,730 We can also take that my output object that we created and we could add a class to it. 60 00:03:48,750 --> 00:03:54,220 So using the class list a method, we've got a few choices we can add, remove toggle. 61 00:03:54,780 --> 00:03:59,550 So in this case, we want to add in a class and that class that we want to add in is output. 62 00:03:59,550 --> 00:04:01,680 So let's refresh take another look at it. 63 00:04:01,860 --> 00:04:07,600 And so now we've got a div with a class of output and inner HTML of nothing. 64 00:04:07,680 --> 00:04:11,490 So next we need to append it to our calculator object. 65 00:04:11,760 --> 00:04:14,580 So that's where we can take my calculator object. 66 00:04:14,580 --> 00:04:23,160 And using the append child method in JavaScript gives us the ability to add elements to other elements. 67 00:04:23,490 --> 00:04:27,390 So the element that we want to add is the output object. 68 00:04:27,570 --> 00:04:28,850 So let's see what that looks like. 69 00:04:29,100 --> 00:04:29,990 And there we go. 70 00:04:30,030 --> 00:04:34,170 So now we've got our screen for our calculator. 71 00:04:34,530 --> 00:04:36,540 So it's starting to look a little bit better. 72 00:04:36,540 --> 00:04:41,700 And of course, coming up next, we've got to loop through the keys and add in all of the keys so we 73 00:04:41,700 --> 00:04:44,250 have something that actually looks like a calculator. 74 00:04:44,490 --> 00:04:45,690 So, so far, so good. 75 00:04:45,690 --> 00:04:46,620 We've got a screen. 76 00:04:46,830 --> 00:04:48,690 Go ahead and add this into your project. 77 00:04:48,840 --> 00:04:54,240 And as you can see, if you want to apply the styling now, you can actually visually see the screen 78 00:04:54,420 --> 00:04:59,940 so you can adjust some of the output styling that we created by default in the beginning or you're. 79 00:05:00,000 --> 00:05:05,990 OK, to go with what you currently have as well and then update the styling afterwards, so whatever, 80 00:05:06,030 --> 00:05:11,550 however you will prefer to approach this, either way, we've just got our screen. 81 00:05:11,550 --> 00:05:13,500 And coming up next, we're going to add in the buttons. 82 00:05:13,740 --> 00:05:17,040 So go ahead and create an element dynamically. 83 00:05:17,040 --> 00:05:23,240 So create a diff, update some content inside the div and then add a class to that div. 84 00:05:23,460 --> 00:05:27,090 And then lastly, append it to your main calculator object. 85 00:05:27,210 --> 00:05:29,130 And coming up next, we're going to build the keys.