Build a Calculator with Vue.js

a coders I'm Cody Seibert and welcome to another tutorial where I'm going to show you how to build a calculator app using view GS so to start off let's just go ahead and show you what we're building so I'm just gonna load up the Mac calculator which has kind of a grid guess this is a calf or by five grid that has buttons he had different operands and operators and of course you have a display section up here so that's what we're gonna try to emulate and I don't know if it's gonna work 100% as this app does but we're gonna try to get close so moving on I'm kind of going to skip the set up I basically use vcli to set up this project here and what we're gonna do is just kind of modify what's already there to build out our calculator app so to start off let's go into the app table view file let's just go ahead and clean some of this up so that we only display our calculator so I'm gonna get rid of us image and I'm also going to get rid of this hello world but instead of just deleting it I'm going to go ahead and rename it to calculator then anywhere I'm importing it just change out the calculator so I'll save that that's going to crash because obviously we haven't created the calculator component so if I go back to my components folder I'm just going to rename hello world to calculator a head and gut basically everything we have so we can start fresh and just to verify that this is working I'll leave a little hello world message in here and say that go ahead and gut the Stiles gut the source and we are good to go at this point we don't need to touch any of the other files that I that I'm aware of so let's go ahead and talk about what we need to do we go back and look at that calculator it has a kind of a grid structure so I'm thinking about using CSS grid to kind of replicate that so let's go up here let's remove that and let's just call this calculator inside our Styles I'm going to define a new calculator class we can use CSS grid so I'm gonna say grid template columns I'm gonna say there's gonna be four columns that I'm going to repeat them with equal right so this is a way to do like percentages so each one it has the same equal percentage of each other for the rose this will kind of make sense in a second when we visualize it for the Rose I'm just going to give it a grid Otto rose put some spacing automatically between all of our rows so each one should at least be 50 and height I'm gonna save this what this is going to do is basically any child element of our calculator component is going to be put into eight or by infinity grid that I'll to say span hello is that a couple times in fact I think it might need that he divs let's see in fact I think I forgot to say display is bread okay so definitely don't forget that line 19 display grid that tells the component that it needs to be a grid a CSS grid so if you notice here as I keep pasting new components we're getting a four column by infinite amount of rows grid so that's kind of a step in the right direction and what do we need for our calculator well first of all we needed a display let me say class display and I'll just type in some random number here and what we need to do is we need to make this display span the entire top four columns so if we go down at the bottom of the style and say display we can specify how many columns that display should take up so I could say grid column I want to start at column 1 and I want it to in after column 4 so if I save this that displays will take up the entire first row and to kind of demonstrate that a little bit better I'm gonna say make it red so we can visualize right and then let's just go ahead and make the font a little bit larger for all these so I'm going to say font size of 40 pixels just to make it a little bit easier to read so at this point we can start implementing the rest so let's look and see what we need we need a row that has AC plus minus percent and a divide icon so here I'll just get rid of this and I'll say we're do plus minus I think was percent then we have a divided it was pasted in here so if I say that we kind of have our first row ready to go and now for the second row seven eight nine times I do the same thing seven eight and then I'll just put an X for x so save that let's just go ahead and continue four five six - four five six - never need or three one two three I believe one two three plus and finally we have a zero dot and equals so I'll just do that zero dot so one thing we'll notice is that the zero I forgot to add a plus so let me just do that but we need to zero that take up two columns right so how do we do that before we use that grid - column last so what we can do here is just say are on the zero I'm gonna say classes you row and then down in the style I'm going to say zero is a grid column of one comma or 1/3 which will give it two columns in this hmm and now since all of these are kind of like buttons let's just go ahead and give it a class button for all these obviously I could just give them buttons I'm just to keep it simple though I'm just going to give it to class equals button go ahead and fix that in zero go down here and I'll make a new button style so be in background color is equal to NRT for now order one pixel solid right so we're making a little bit of progress so going back to the calculator notice that this whole row here or column I mean as kind of like an orange text or the or orange color in the background so what I'm going to do here is define a new class called operator background color orange and then a text color of white and then for emi operators so that includes divide I'm going to give it a class operator x minus plus and equals I'll save that and now we have the correct coloring for these operators let's just go back one more time and look to see if we're missing anything yeah so at this point it seems pretty good I mean we could probably spend hours just messing with the styles to make sure it looks good so now that we have a decent layout going and of course let's just get rid of this red make that something else a better border I'm still being kind of nitpicky here the borders a little there we go of course if you don't want the the columns that be so large what you could do is just set a width to our calculator I'll give it a with like 400 pixels and then a margin:0 auto to make it centered here so our calculator is looking a little bit more like this calculator here I'm not gonna spend too much time making it look exactly as is mmm like I don't need to text the line this right or whatnot but anyway the next fun steps is we need to declare the logic in the bindings to our different buttons and display the first thing I see here is we could probably abstract this into a view data property here so let's go to our view component and declare a data function which returns something that has a display or a current set equal to an empty string and then up here I'm going to just interpolate that here and say current so it's going to render whatever the current data value is so for instance if I say 1 2 3 that's going to render out 1 2 3 or if I type hello world that's going to type out the string but for now we're going to keep that blank and then we're just going to fall back on a 0 if it's not defined and then we can kind of just go through these buttons and one by one add whatever functionality we need to it so to start off let's just do a click call back on the Clear button and we're going to call a function called clear and to define functions on your view component and notice that this is a view component all you need to do is add a methods attribute and then define the method that you want so I'm going to say clear as a method and what it's going to do it's going to reset current back to the empty string here so if we were to have something typed in there and we clicked on the see notice that it goes back to zero so moving right along try to implement the next method which is sine so again I'm just going to add a click listener to this and call a sine method and then I'm going to go and implement that sign method here so what do we want to do in the user clicks plus or minus basically we just want to append a minus in front of here if it doesn't already exist or if it doesn't exist we just go ahead and remove it so one way to do that is we could just say this dot current is equal to this current and dot carrot is going to be ternary operator where we just check if the first character is equal to a minus and we're going to return that string without that first character otherwise we're going to return that string with a minus sign appended to it so now if we were to go and type in this just goes and that's probably something we should try to fix but um if we assume that way I should have a number here like one two three four oops put on the wrong thing so one two three four if I say that notice that the plus or minus is now adding to it now oh cool so we might have to come back and just change that up a little bit I think for now we can move along to the percentage so let me add a new called new one called oh sorry let me add a new click call back called percent and down here to the methods same idea we're just going to add a callback function and what we're gonna do here is basically just divide whatever number it is by a hundred so this current is equal to the string of ours float this dot current divided by 100 all right so just take the current string value make it a float divide it by 100 and then cast it back to a string here so to kind of show that lets just make current equal to like 600 then if I click on that percentage notice that it becomes six it should become zero point or 0.06 okay so that is working fine awesome at this point you should kind of see how easy it is to like write out your functionality your calculator has a particular state and we're modifying the state as we click the different methods here let's move along to the different numbers at this point I think we'll leave the operators for once we have the numbers implemented so the implement the numbers basically we need to think what do we need to do every time we click on one of these we just need to append to the end of this string right so that should be pretty straightforward let's make a method called append and that's going to take a number as an argument and what we're going to do is we're going to say this dot current is equal to this current plus number and in fact I don't like doing plus here because we're kind of doing string concatenation so I'm going to do this dot current and candidated with number so it's more explicit that we're just joining two strings together can actually use this method we just created if we go up to here and for any time we have a number I'm just going to go ahead and use that click callback must a at click is equal to a pinned then for each one just go ahead and put in the string that we want to append so seven eight nine four five six one two I'd say that and I forgot to do 0 so let me just go and add 0 here let's see so does this work seems like it so let's just go ahead and add everything 1 2 3 4 5 6 7 8 9 at zero works fine not sure if that's proper but we won't worry about that right now all right so moving along last thing we have for the operands is this dot just doing another click call back and call it dot it's going to call a function dot and let's of course make sure we did find a function down here called dot what we're going to do is very similar to a pinned but we only want to append the dot if it doesn't already exist so I'm gonna say this dot current if sorry if this dot current about index of the dot is not equal to negative one to upend it in fact I'm just going to say make sure that the dot doesn't exist and if it doesn't exist we can just say this not append and then append the dot that's basically just gonna call this method here with the period just let me save this type in some numbers type in a dot click some more numbers try dotting again and notice that it doesn't append it anymore alright we're making some really good progress now to the more difficult part of building a calculator app which is the operators so for each of these operators we want to call a different kind of click call back for this one I'm gonna say divide four times I'm just gonna say times - and then for this one so for those four operators just go ahead and declare those four methods so divided times - and then we have plus I think we call it ad check what do we call it Edie so what we might want to do is when the user clicks on one of those four operators we want to kind of set inside of our internal component state what our operator is going to be when we click the equal button so up here I'm going to make a new data called operator and I'll set it to null for now and basically whenever we click one of these we're just going to define the operator as a new callback function so for each of these is going to take a and B and it's going to return some type of math that is happening between those two so in this case divided will be this and then for the other ones we're simply just going to change what the operator is doing so this one will be a times B this one will be a minus B and this one will be a plus B so I'll save that and as we click these things or operator is going to change depending on the last thing that we clicked the last step is how do we actually use these right basically we can't use it until we click the equal button so let's go over here and add a click callback to equal and make another function and this will all make sense when we tie it together in just a second so basically when the user types in a number like 200 we click Add we know that the operator is going to be set to the add operator and then when we type a new number we need to kind of keep track of that previous and current number so notice if I were to type a number now it's just appending to the current so some additional logic we need to do is I'm going to say make another one called previous which is set to null then I also want to add a boolean called operator clicked which is going to be false so anytime we click one of these operators we just basically want to do operator clicked is equal to true and then we want to set the previous equal to the current and I could probably abstract this into a helper function since is very very similar logic between all these so let's kind of do that honestly set previous is a function we going to just run those two commands and I'm going to call set previous all these right so it's not set previous all right so let's try that now so if we click on 200 we click plus we click 200 again notice that that is not working just yet and that is because we forgot to clear out current right so basically after we've clicked operator clicked we need to check to see if we've clicked an operator when we call that a pin method so over here what I can do is just say if this dot operator clicked is true we need to say this dot current is equal to an empty string and then this knot operator clicked is equal to false to kind of set it back to that empty state and of course we can just continuously get pinned to the current after we set it equal to empty string let's try this again we just say one plus two notice that previous is one and current is set to two here now the last step is when we click equal we want to run that operator against the previous in the current hmm so what I can say is this current is equal to this dot operator this dot current and this dot previous basically take the current value and run the operator against the previous value this is not going to work because this is a string and this is a string so what we need to do first is ours that to a float and then make sure we cast it to a string here hmm so let's try that out and see what happens in fact we probably want to reset previous after we've done that but I'm gonna set that back to null here so let's try out some of the stuff so I'll do like one plus two equals three plus five three equal eight minus eight should equal zero times five should equal zero plus 10 five is 50 divided by four is point zero eight times 100 gives us that negate it at eight go back to zero let's say 90 let me clear it and go to 90 percent times 100 should be ten-hour sorry should be 90 negate that and add 10 to get negative 80 so our calculator is pretty much working I think there's like a bug or two like for instance if you do if you're at zero and do plus or minus that's kind of like a little bug and then also like I think normal calculators as you keep pressing the operators it's going to like run your equal but I'm not gonna dive into kind of fixing those I just wanted to kind of show you a really quick overview a building out a calculator app using view J s honestly you didn't take any time at all it's pretty straightforward you want to try to fix those bugs feel free to do so on my git repo and post a pull request but for now I think this is a a good ending point for this tutorial so if you have any questions or comments or concerns feel free to leave some in the comment section below and if you have any recommendations of future little like mini projects that I could try to build again leave me a comment or send me a tweet on Twitter well so that about wraps it up thanks for watching and happy coding

Channel: freeCodeCamp.org

Views: 140,975

Keywords: vue tutorial, vue.js tutorial, vue beginner tutorial, vue js for beginners, vuejs, vue, javascript, programming, learn to program, coding, code, web applications, single page applications, spa, calculator app, tutorial, coding tutorial, vue-cli, vue cli, javascript tutorial, vue course, learn vue js

Id: m1_ih43p24s

Length: 22min 36sec (1356 seconds)

Published: Wed Aug 01 2018