 Okay, hello everybody. Welcome to simple calculator app using a Python 3 and TK inter Let me show you what we're gonna be doing today So if we take a look up here on the screen, you'll see I've already got this functioning So I've got a very simple calculator app. Here's where my display is gonna be I've got a bunch of buttons and I have got Yeah, basically some math to do so let's go ahead and try a little bit of math Let's try six times seven and then I'm gonna click equals and that gives us 42 and then say I could add Six and that equals 48 and we can also do things multiply using Decimals 8.9 and click equals that gives a big long number and then I can hit C to clear out and start over okay, so Basically what we're gonna be doing today is learning how to use TK inter the grid geometry manager So we can lay out our buttons how we like them Command called eval and that's what lets us do the math very very easily We're gonna be using something called try accept to avoid errors And we're gonna use something called a lambda so we can pass values from the buttons to some functions So why don't we go ahead and get Started the first thing I'm gonna do is I'm gonna go ahead and import as I mentioned We're using TK inter now if you just happen to still be on Python 2 make that a capital T But otherwise you should be on Python 3 and is a small T and then I'm going to create the window And I'm gonna call it roots. You don't have to call it root But that's what I call it and it is TK inter dot TK notice. This is a capital T This is a lower case T So I don't make that mistake and I'm gonna give it a title even though you can't really see it on mine But depending on you the way your computer is set up you might see more or less of these letters. I'm just gonna call it Calculator And then the last thing I'm gonna do down at the bottom. This is the last line of the program That's why I'm leaving some space so your root dot main loop And if I don't have this don't forget the parentheses if I don't have this the window will shut automatically Now I am using an editor called genie. I just happen to be running on Ubuntu Linux But this will work on Mac. It will work on Windows It'll look a little bit better actually on on Mac probably can't speak to windows But probably look really nice So in this case, I can either click this button here on genie or I can push f5 on my keyboard And you can see here. I've got a blank window and it has space where I'm gonna start putting in my Widgets on my calculator So the first thing I want to do here is to basically design the GUI I don't have to do it this way, but this kind of makes sense to me. So What I want to do is Think about what buttons I need. So I'm gonna go ahead and show you the layout okay, so hopefully you can see On the screen you should be able to see the general layout So you'll see that the GUI itself is divided into columns and it's also divided into rows We have four columns labeled zero one two and three. We have six rows labeled zero one two three four and five we have 17 buttons okay one two three four five six seven eight nine C zero dot the four operators and Then the equals button notice that the equals button actually goes outside of Just one small grid area and I'll talk about how to do that. I also noticed the label at the top 42 where the result comes also goes across several columns. I'm gonna show you how to do that code Today, so let's get started on the coding so the first thing I want to do is Start creating my well, I'll create the result now watch what I do here the result is A GUI widget type so GUIs are made up of widgets That's like buttons and different elements could be a drop-down list etc. Etc. So I'm gonna go ahead and make a label called result and It is a TK inter label It is gonna go into the root window and When I start my program, it's going to have no text. It's gonna be blank Now as I mentioned before it's gonna be going into the grid So if we go back to our grid, I'm gonna be setting it at zero zero That's the leftmost grid, but notice how it goes in. Well, let's notice how it goes into Different columns. So what I need to do in my code is the following I'm gonna say label dot result dot grid and I need to say where it's gonna go and it's gonna go into row Zero it's going to go into column zero and Let's say let's let's let's try this and see what happens. I'm gonna put some text here I'll just put 42 and see what happens. So I'm gonna run it and I got a an error says label is not defined Okay, it's label underscore result Let's go ahead and run that again Nothing is popping up, which is not a good sign But I can I'm sure I can work around that Oh exit. Sorry. So I think I still have an error so control C Let me get out of this here. Okay Let's try it one more time. See what happens. Oh It did pop up. It's just so small. He can't see anything. Yeah, I forgot about that It does that so you can see how the 42 is way over here It's so it's actually kind of hiding out in this one little grid spot But what I wanted to do actually I'm gonna leave that there for now I'll come back to that it'll make more sense once I start adding things So what I'm gonna start doing is creating all of the different buttons, okay? So I'm gonna go ahead and just do this row one. So we got one two three and divide So let's go ahead and do that together. So these are buttons. So that's I'm gonna say button And I'm just gonna call the first one button one makes sense And I don't have to call it that but that's what makes sense to me It is gonna go into the root window the text is going to be one and For buttons we need to give them a command as in what happens when we click them so let me go and Explain this and let's go ahead and get that set up. I'm gonna say button one Dot grid and it's gonna go into row equals one column equals zero Now we're gonna run this and we'll probably get an error Okay, you see what it says here error add is not defined So I need to define my functions. So I should put a little comment here create GUI And put a little comment here create functions Okay, so I want to define my first function add and this is I'm not talking about adding I'm talking about adding a character to my formula that I'm trying to do I'm just gonna put pass here for now So I'm gonna run that and see if it works again. So now you can see I've got It's really hard to move that and get it get a grip on it But you see now I've got one button and if I click it of course nothing happens So let me go ahead and just finish out that first row real quick And this is kind of how I do things so it's gonna be button one button two Button three and I think this is divide Yeah, if you're not sure you can always click back and check out, you know What what goes where and that is divide? So I'm gonna go back to here and Now the row is gonna be the same but the column is going to change So it's gonna be column two and that's gonna be in column three Of course the text is going to change So let me go ahead and check that and make sure I've got that row complete Okay, so now you can see how it's coming together But now you can really see how this 42 is Really way over here in that column. So if I made this a bigger longer number 0 4 2 4 2 again You can see how what starts to happen is it's messing up the Distribution of the buttons and things so let me just make that really long so it's really clear In case anybody doesn't quite get that So you can see here because this is in row zero column zero It expands to fill up this whole column. We don't want that So what we're gonna do is we're gonna add a little attribute here called column span and There since there are four columns. I'm gonna put four here Now if I run it So even though it's gotten bigger It doesn't mess up the Size now probably if I put a really big number it might go out to the end But we're gonna have to just deal with that one So I'm gonna go back and get rid of that for now since we don't need it now. Here's the problem This this is probably something new if you've seen some tutorials of mine with Tk inter I Cannot put a value in here. So what I want to do is be able to put add one Add to actually put that in quotation marks. You'll see why in a minute in this case Divide. Okay, so I'm gonna go ahead and put What can I put there? Try to figure out what I called it my original version and Value okay, you know, it might not be a value. So I'll put that there for now Let's run it and see what happens. So I'm gonna go ahead and click one of these buttons and Actually, I'm gonna go ahead and I'll try this print the value strong button Now you see something interesting there. It already has printed those values out. So if I click one Nothing's happening. I click three. Nothing's happening. Okay, so what happens is when it gets here it evaluates that and then it's done So this is probably worth your your your time right now so what we're gonna do is we got to use something called a lambda and this is sometimes referred to as a kind of inline function and Again, I don't really know that much about this, but I just know that this is what fixes it So that's really that's a good result So we need to put lambda and then add and then our function and now if I run it You can see how one two three and divide did not print out down here And then if I press two you can see now down here. I got three. I Got one Etc. Etc Now at this point I could actually Do the rest of the program and get it working and then add the gooey stuff depends how you want to do things, but I'm gonna go ahead and just kind of get the gooey done and I think what I'll do Is I'm gonna copy this and I'll put that here. This is gonna be button four and it's going to be ctext four and I'm gonna put a four here and That's gonna be in row two column zero So let me go ahead and just verify that so the four button is in row two column zero. So we're happy there and Then what again what I'll do is I'll just copy this and Paste it a few times. Okay, so I'm gonna have button four button five six seven No, four five six and then it's gonna be Times I'll call it multiply Again this park is probably a little boring You might want to speed up and skip this if you know what you're doing now But it's pretty straightforward The gooey stuff just takes time. Make sure you don't mess up over here Make sure you change everything that needs to be changed And then we're using an asterisk don't use an X because we need to use the asterisk which is the way that Python does it and you'll see why in a few minutes So and column three and then again, this is something always drives me nuts with my beginner students Is they refuse to test things? So I've added some code. I'm gonna test it So did I get my second row? Yes. Click four. Is it printing? Yes. Click five. Yep six Okay, so you see that printed five because I made a mistake here and then let's put the asterisk and So then I go back here and fix that I should test it again, but I'm pretty confident that's gonna work. Okay, and then I will need to do the next row And that's going to be See seven. Let's get the red space. It's ugly. So seven and now we are in row three Seven and the lambda is seven Okay, so this should be eight nine and Subtract and you see how the gooey part takes a lot of time But that's just what it takes seven eight nine nine and This is subtract and let's go ahead and fix all these things so eight and eight nine and nine and this is subtract and This is subtract again. We also need to fix the columns So they're all in the same row row one or so row three column zero one and two Again, I'm gonna go ahead and test it Okay, so I've added seven and it's working down at the bottom eight nine and minus Okay, so we're really you see how it's kind of coming together And now I think we got two more rows to do So two more rows. Yeah, I think two more rows. So let's go ahead back and look at the grid So we've done up to here. We need C which is clear zero Dot and plus. All right. So this is gonna be Clear This is gonna be clear and the text is just gonna be a big C and In this one, I'm actually not gonna be adding that one. I'm gonna make a new function called clear So I'm gonna go up here and go ahead and make the basic structure of that So I'm gonna call that clear. I'm not really passing a value So I don't really need to do anything there and I'm just putting pass here as a placeholder This this will prevent me from getting an error and I'll add the the Code later and this is gonna be in row four Now since it's a little different, I'm not gonna copy that because it uses clear instead of add So I need zero now. I need oh, I can't put yeah, this has to be button zero text is zero Command is zero and I've got a I'm not sure how to pause this but I got a delivery up right back Okay, just had a delivery. Hopefully I'll get back to this now. Where was I? So add zero and that's gonna be in row four, and it's gonna be in column one Let's see here. So you got button zero next up is gonna be button Dot and then it's gonna be button add so dot dot Add So again, just put the dot there in this case. We are adding the dots So that's we do want that to stay the same and add Same thing Again, you this will this will make a little bit more sense later But I think you get the idea from the demo. This should be column two and this should be column Three if I recall correct, so let's go ahead and test it Okay, it's really starting to come together and look like a little calculator. Which is Pardon me kind of cool. So one two three divide. I'm just gonna test everything four five six asterisk seven eight nine Minus Clear doesn't do anything yet zero dot Plus fantastic and the final button that we need If I go back to here is the equals button And I put that made that really big at the bottom So it's in row five and we'll be doing basically the same thing we did up here with the label Yes, we're gonna be using column span again But the thing is buttons a little different so you'll you'll see the difference here in a second So I'm gonna go to make a copy this because it's easier to copy once you have it working once And this is gonna call button equals and that's gonna be in row five column zero And I'll put row span equals again four because it's four Equals and then the function here, we're not we're not adding we're not clearing So I'm gonna call this function calculate So then I'm gonna go up to here, and I'm gonna make a new function called deaf calculate That's anything pass. I'm gonna use that there. I'm gonna test it and There is my button. We see how it's way over here Even though I put column span so what I gotta do In the case of a button is I also have to add the following so it's width Equals now on my computer. It was 16 worked out really well, and this is 16 characters. It's not pixels. It's characters Let's go ahead and test that oh Geez did I do something? I did something weird there. Oh I put row span Column span Okay, yeah, let's try that again, and now you can see how the equals button is Pretty big. All right That's the gooey part of it. Okay, so our gooey is created our Code is all connected to the various functions that we're gonna be using to do this and this is where we Have to actually start doing some calculations now before I get to that. I want to show you down here I'm gonna go into the Python interpreter and If you look down here, I know the text is a little bit small. Sorry, but basically What we want to do is we want to do something like three plus five You know Times four or whatever. So I hit enter you can see how Python automatically Calculates that for us In our case what we're gonna be doing is we're gonna be doing something like the following We're you making a mathematical expression. It's gonna be a string and if I do three plus five times four I Do that if I say print Expression it's just gonna print it out. Sorry. That should be three plus. Sorry. So let's go expression equals three plus Five times four. Okay, and I forgot the quotes So hit enter and I'll go ahead and print expression again It just gives us the exact expression. So what we need to do is to use print And it's a new command you may not be aware of it's called eval and Then what it does is it evaluates whatever you've entered in there as Python code So you got to be really careful that nobody can hack into it and you know start messing with your system But in this app, it should be pretty safe And so you can see now it has evaluated this expression three plus five times four So it's four times five because of order of operations is 20 plus three is 23 So we're gonna be using this and putting that into our calculator app So here we go now So as I mentioned, we're gonna be using an expression So in this particular case, I'm just gonna be using a global variable And when we start our program the expression is blank and what we want to happen is when we Click add value that value is added to the expression So normally I wouldn't recommend using global variables, but in this case It makes our lives actually makes our lives a little bit easier Otherwise we'd have to you know make a little object for it or something I guess But let's just stick with a global variable and please forgive me gods of Python So I'm gonna say global global expression And if you're not familiar with the global and local, I think I have a video about it Somewhere and then what I'm gonna do is I'm just go ahead and print expression Oh, sorry, I missed a step someone say expression plus equals value You notice I'm printing here, but we'll get away from that in a second So what it does is whatever button I click on it's gonna take this expression And it's gonna add that to the value or add the value to it. Sorry So I got invalid syntax on line one That's annoying, isn't it? Oh, I'm in the still in the Python interpreter here So I'm gonna exit that oops Exit let's try it again. I'm gonna run this Okay, so I'm gonna hit one and you can see down here the expression is now one and I can go plus three times Five for example, okay, so you can see how the expression is now building up Hey, which which makes me pretty happy. So that's that's basically what we wanted So what we want to do now is Evaluate the expression when we click calculate So what I'm gonna do is I'm gonna say Say result Equals eval Expression Let's say print result This is what I just did down here. So what should happen is that it's gonna evaluate whatever expression I have entered and print the result So let's try that And again notice I could have jumped into doing the GUI stuff, you know put it right into the GUI But what I'm gonna do is I'm separating it into sections You need to learn how to break a problem down into parts and do it piece by piece So this is one part that we don't know how to do so I'm gonna try and go and do So was it three plus that thing still printing? four times five equals Okay, so I now can see that I'm getting the correct answer so then all I have to do now is get this into The GUI okay, so here's what I'm gonna do so global expression expression plus equals value for expression Let's see here Expression Okay, so the expression is gonna be changed here. So I'm gonna say global Expression you'll see why in a second. So I printed the result What I'm gonna do here is label result Dot config and last time if you watch my BMI calculator, I did this slightly differently But I'm gonna do this like this this time equals result. So let's go ahead and test that There it is. It's the new Alex. I saw the old one running. So let's tie a three times three This deal let's close that there's the new one So I say three times three or two, okay, I'm gonna click equals And you can see now we got the answer now. Here's a problem. So gave me the answer, which is good now if I hit plus Notice how it's still continuing the old Which is usually not what we want. So what we want to do is Once the result has been calculated. We're gonna set the expression To result so here. Let's see what that looks like. So I say three times three equals nine So now if I push Okay, I got an error. Okay, got it. It's telling me I got an error. It says unsupported operand types For int and string. So because the result is an is either gonna be an integer or a float I need to change this to a string And this is another reason why you should be testing your code as you go through. So let's go ahead and Need to close these old versions Yeah, if you don't close them, then you won't be able to get good This is a really old one. It's up here. Let's get rid of that Okay, I can't close that one. Lovely Can't close that. Okay, let's close the whole terminal Okay, that one's stuck. I'll have to deal with that one later Yeah, so let's see here. Let's try one more time. Make sure we got the latest version. So three times three equals Gives us nine times two We'll give us 18. Okay, so this is giving us what we want down here. All right, so I'm happy with that Let's see here. What else do we need to do? We need to deal with clear. Okay, so if we want to do clear clear is pretty easy We just do global expression Equals global expression and then I say expression Equals blank and then again, we have to update the label rules in this case expression Let's try that. It's six times six equals. We get 36. I'm gonna hit clear Okay, and then I'm gonna say six minus three equals Then it gives us three. So that looks like it's working. We haven't tested dots yet. So let's do three See that kind of didn't quite work how we wanted it times Okay, so you can see how that did not work. So let's I know why okay The other thing is we need to now up instead of printing it down here. I should have been doing this all along I'm just gonna go ahead and copy this And now that's gonna go there instead of printing Okay, so let's test that out. Okay, so three times three equals nine. I'm gonna push dot Six plus six point four Okay, so I've tested with a few different values. That's good. I'm gonna hit clear Now I'm gonna hit equal sign with something that's blank And you can see here we get an error. I'm gonna let that go. I'm gonna close that. I'm gonna run it again And then I'm gonna try and enter A bad expression instead of six point nine I'm gonna try six point point nine And again, you see we get it. We keep getting an error So we need to deal with that And the way to do that is we're gonna use something called a try accept loop or try accept Uh, I guess block So I'm gonna go to calculate Okay, and I'm gonna say I'm gonna put reasons why I can leave that out. I'll say result equals nothing And then The first problem was if we have something if it's blank So I'm gonna say if expression Is not blank Then I'm gonna do all these things Okay, so let's go ahead and test it So say five times five equals Okay, I'm gonna clear it now. I'm gonna hit equals Okay, notice nothing happens because there's nothing here to to print And notice there's no error. So that fixes that so let's try nine point point nine hit equals. We're still getting a syntax error So what we have to do If it's not blank We're gonna do the following try And in the case of accept I'll explain this a little in detail in a minute. I'm gonna say result equals error And then I'm gonna say expression Is now blank and then down here what I'm gonna do I'm gonna take this out I don't have to do it this way. I could just copy and paste I could do this Uh, but what I want to do since I have I have repeated code, which we always want to avoid I'm just gonna put that there Make it a little bit more efficient. Okay, so let's test this Okay, so if it is not blank Okay, so the expression is not blank. We're gonna try to evaluate it Okay, and it evaluated there was no error. So it skipped down to here Okay, now I'm gonna clear it. I'm gonna hit equals Okay, it's blank. So it just skips down to here label result dot config equals Result, okay, so that's gonna keep it blank because result is blank here And the final one I'm gonna do a problem three dot dot nine Plus six I hit equals Oh, let's try it again 9.9 point 9.9 minus minus nine So here it says error So it says the result is error and then it resets the expression because there's two things We're displaying the result, but the expression still exists separately. So we need to reset that as well Okay, so then what I could have done 9.9 equals Or plus point point six equals gets an error Now if I start typing it just goes right back to three Which is pretty cool And I think that's pretty much It I think that's the whole program. So you can see how it's pretty easy I think relatively speaking to create a working calculator Notice that most of the code is actually the GUI code Because there's quite a lot of GUI elements. So each element requires two lines of code and there's 17 buttons plus one label. So that gives us what 34 lines of code Except for that It's pretty straightforward. Again, I don't usually like to use global variables, but in this case, we'll leave it So, yeah, so that's it. That's there's your calculator app I will leave a link to the code down below if you like what you saw, please subscribe Give a thumbs up appreciate that the kind of stuff. It's not too much to ask And just as a review we've gone over a little bit tk inter We talked about the grid geometry manager the eval statement Try and accept blocks which basically traps errors. It's called and using lambdas so that we can send a value In our commands here using tk inter And that my friends is that thanks for watching