Build A Simple Calculator App - Python Tkinter GUI Tutorial #5

what's going on guys my name is John elder from khou-tv calm and in this video we're going to create a simple calculator with kinter and Python all right in the last video we looked at creating input boxes couple videos before that we did buttons so in this video we're gonna put everything we've learned so far sort of together and create a very very simple calculator and this is what its gonna look like pretty cool but before we get started if you like this video I want to see more like it be sure to smash the like button below subscribe to the channel and be sure to check out coda me comm where I have dozens of other courses with hundreds of videos to teach you to code use coupon code youtube to get twenty two dollars off membership that's all my courses all my videos all my books for a one-time fee just $27 which is insanely cheap so like I said this is the calculator we're going to create in this video and you can see all it does is add so we can go four plus two equals six it doesn't subtract multiply divide yet we'll do that in the future in this video I just want to do the very basics get the graphical user interface the stuff here going on I just do a simple addition and things like that so we may finish this whole thing in this video or we may have to break it up into a couple we'll just have to see and you can see this is just a very very basic we're using buttons here like we've learned a couple of videos ago it's not fancy looking we've got an input box with some raised borders like we learned how to do in the last video you know just very simple but it's it's a program we can build it and should be cool so I'm gonna go to the program we made yesterday and let's just save this as how you late tour okay so right off the bat we haven't looked at this yet but you see up here it says simple calculator that's the title just go ahead and close this and to to change that on any program we just type in root and then dot title and then just type in whatever we want so we can go simple calculator right so that'll work okay so off the bat we can start to use some of this stuff we've already used in the past get rid of this pack stuff we're not going to be packing anything anymore I'm gonna be using a grid system so let's just use this this entry text box that we used in the last video and just sort of expand a little bit now I want to make this with 35 and let's give this a border width with equal to five okay so now we want to slap that up on the screen so let's go eat grid as we already know how to do and we want this in the very first row and column the very first column and now we'll do a couple of things we want to give this a column all um span of three and that's because underneath this input field there's gonna be three buttons and each button will be in a column so we want this column and we want this text field this entry field just span all three of those right and I'm not sure if we talked about that in the last video or not but you can you can do that like that now let's give this some padding we want to go pad x equals let's go ten and let's go pad y equals ten okay so let's save this and let's just run this real quick just to see if it worked Python how you later dot pie pull it up and so far so good it's a simple calculator it says enter your name that's from the last video we'll take that off here alright so so so far so good let's look at this let's just get rid of this there we go in fact we could probably just comment this out we really don't need that okay so now we need one two three four five six seven eight at least nine buttons right so let's I think we can get rid of this okay so let's go let's call them button underscore one and each button will be button to button three button 4 it's easy way for us to keep track of that and so we want this to be a button and we want it to go in route and we want the text of the button to say one right now we want to make the button bigger so let's go pad X and let's give this a 40 and let's go pad Y and give this a 20 you can make these any size you want now we're gonna have to give this a command and let's call this button ad right so we need to create a button ad so let's go def button underscore ad let's just put that for now okay so that will work so let's just we need nine of these right well ten actually because we need zero so two three four five six seven eight nine ten okay so we'll just come through here and this will be button to button three but for button five six but seven very exciting right button 8 + button zero and same thing go through here and change them two three four five six seven eight nine and zero okay so we've created our buttons pretty simple we also need let's see we need a plus button and equal to button and clear the screen button well we'll work on those in just a bit first let's start slapping these up onto the screen now I'm going to pull up just a regular calculator it comes with a computer and you can see the regular calculators start with seven eight nine four five six and then end with one two three so we want to do sort of the same thing so and let's comment here and say put buttons on the screen okay and up here maybe we'll go define buttons so is good to comment your code I'm very lazy at it as you can see okay so let's go button underscore Eclipse to touch to tease but mm underscore one dot grid and now we want this too go row equals column equals we'll fill these in in a bit so button one two three four five six seven eight nine right so let's just go two three four five six seven and eight nine and I guess we need one more zero okay so where do we want these to go in the Rove grid system right well button one two three those go on the bottom well let's start at the top here so the very top row is button seven eight and nine so seven eight nine that'll be a Row 1 Row 1 and Row 1 right all on the same row and then in column column 0 column 1 column 2 in fact all of these can go 0 1 2 0 1 2 okay so 4 5 6 those are in the middle the next row down so that's row 2 2 & 2 and finally the last row is button 1 2 & 3 so that's row 3 3 & 3 finally then we want row 4 and then column 0 so let's save this and run this guy and see how that looks we got an error my clique that's something from the old let's pull this back up where does it say my click oh this old button get rid of that alright save this and run this guy again ok so it's looking pretty good the buttons don't actually do anything yet but they look like buttons starting to look like a calculator right not bad so what we want now is to let's say we want a clear the screen button and we want a equals to button and we also need an addition button so let's go ahead and create those real quick so let's go back up here and let's create button underscore add and I'm just gonna copy all this and so we want this to have an addition sign in it and actually we need to change the padding because it's a symbol this the width is a little bit different so it's 39 instead of 40 so that works let's see next we need a button underscore equal I'm gonna do the same thing but for the text I'm going to put an equal to sign and we want to make this a long button so we're gonna go 91 and we'll take a look and see what that means in just a second so we have an addition button we've got an equal to button now we need a button underscore clear and let's paste this in two equal to signs and we want this to say clear and we want this to be long as well but 79 will do the trick there instead of 91 because when it was 91 we just had one thing now we've got all of these characters so taking that into account will uh but this is 79 you could put this any size you want make it look however you want so let's head back down here and let's go so we want lets go button dot clear button add button dot what was the other one add zero and equal right dot grid actually just copy this okay so now where do we want these to go well we can go let's see the button dot add we want this on row equals five column equals zero and then right next to it we want what but an equal maybe so let's go a row equals five column equals 1 and then here below we want row what are we on Row 3 Row 4 we want the clear in row four I guess and then column equals one all right I think that's right sir I was starting to lose track here let's close this and run it again oh that absolutely is not what we want what is gone wrong here so zero clear plus and equal are on the same so let's see what I did here in the code so zero and what do we say 0 and equal are on the same let's run it again I've lost track so zero and clear go together let's just do that right now so zero and clear or both on Row 4 that seems right and then add and equal or both on Row 5 that seems right add an equal add an equal huh what has gone wrong here oh I know since these buttons are spanning two columns we need to put call spans of two into each one so where are we up here we use this column span we need to do the same thing for e see the clear in the equal to so clear needs a space this in columns fan too and what was the other one equal to and equal equals call span two as well so okay save this let's run this again and hopefully that will do the trick boom awesome so now we've got this thing it looks okay but none of these buttons actually do anything so let's go ahead close this and let's look through here here we have button add let's change this from button add we want this to be cup button click right that makes more sense to me know what I was thinking so just go through here and change these rope pick okay so and then up here we need to change this from button add to button click ok so when this gets clicked we want something to happen now let's pass a parameter through here and let's let's just call this number now to pass a nut pass a parameter into a function normally you would just go like this and then you know and then and do that right but you can't because we can't use these parentheses if you remember back when we first learned about buttons you can't pass parameters with these buttons like that but you can do it it just takes another sort of thing so what we need to do is something called a lambda we use a lambda so it's a la M BDA and then lambda and then a colon and then you can do your thing right like that so let's go through here and change each of these to that new here but now what we want to pass into each one of these is what the button number is right so for button one we want to pass in one for button two two three four five six seven eight nine and then zero and then these we'll deal with later so now let's just take we've passed through here than just first things first we want to delete what's already in the box right and then we want to insert so e dot insert learn how to do this the other day whatever that number was onto the thing right and I think that's all we want to do so let's save this and run it and see if that worked so we have seven eight nine two two one three five six now if we want to do like a bigger number 55 that becomes problem right we can only sort of enter one thing at a time this way so we need to take that into account with our code here so it's pretty simple instead of deleting what was already in there we can just go oh we could just leave like this save this and run it it's not ideal it may not even work not sure let's see so 5 8 7 see what's going on here say I want to put in the number let's close this and run it again they want to put in the number 108 108 well it says 801 right so we need to fix that and we need to do some other things but this video is getting a little bit long so it looks like we have to break this up into a couple of videos so we'll pick this up in the next video probably tomorrow or the day after that so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel and check out coding me comm where you can use coupon code youtube to get $22 off membership so you pay just $27 to access all my courses hundreds of videos in the PDFs of all my best-selling coding books join over 50,000 students learning to code just like you my name is John elder from coding me calm we'll see you again tomorrow

Channel: Codemy.com

Views: 205,441

Keywords: python, tkinter, gui, python tkinter, tkinter python, python gui, tkinter gui, gui python, graphical user interfaces python, tkinter grid system, grid system tkinter, python grid system, build graphical user interfaces with python, how to build graphical user interfaces with python, how to python tkinter, calculator app, build a calculator, build a calculator with python, build a calculator with tkinter

Id: F5PfbC5ld-Q

Length: 18min 5sec (1085 seconds)

Published: Fri Jan 18 2019