Build a CALCULATOR APP in REACT JS | A React JS Beginner Tutorial

what is going on my fellow web developers my name is tyler potts and in today's video we're going to be learning to create a calculator inside of react.js now as you can see on screen i have this very nice trendy looking calculator and we'll be taking the uh google the android phones calculator for the example where when you enter in a value actually keep it here it won't start doing the calculation straight away we have a tiny little results thing here that's kind of going to show you what your results would be and then you could do minus three whatever then we click equals and actually get the final result there as you can see we could then do let's say plus four times five divided by two actually not divided by two we have the delete button we wanted to find it by six equals and bam we get this crazy house number here and there you go so that is what we're gonna be building in today's video guys so without further ado let's get started [Music] is okay guys so i have a fresh folder here just called yt standing for youtube if you want if you're wondering um and what we're gonna do is i'm just gonna press uh control comma to open up my ideas on windows on mac i think it's uh control options t um but um anyway um and then i'm going to type in here mpfx create react app and then i'm just going to do dots which is going to create in the current folder so let's go create as a boilerplate react application we can use to get started developing this calculator app so while that runs well you'll see me when it's done all right guys as you can see it is all done all we have to do now is close this um and we can start editing our files on the left here you can see our file's been generated and what i'm going to do is i'm going to delete a few of these now so let's zoom in just a little bit so you can see that a bit better i'm going to delete the app.test app.css we're going to delete the logo.svg report webfinals.js setuptest.js and then once we delete those i'm going to head into index.js remove the instance of report web files to actually delete the calling function and then i'm going to go into app.js and i'm going to delete both those calls up there we're going to remove everything from with inside off out and i'm just going to put hello world and then finally i'm just going to highlight this all i'm going to go down to tab size it detects the size and swap it to using tabs and tabs 4 just because it's better and easier to read and there you go so we now have a base application we can also go in here and just delete everything from with inside the index.css close the app and then here so let's just uh down at the bottom here we can run mpm start and what this is going to do is going to actually start our react development surfer um and that's going to load on the right side here as you can see and it's just going to say hello world so we can close that now and any changes we make will be made live on the right side so there we go so the first thing i want to do is actually set up the markup and do the html we're then going to do the css and then finally we're going to add the functionality so with inside app we're going to add a diff with the class of calculator and then we're going to have a display and inside display we're going to have a span which will have our little results so we'll just do zero there and then it'll have our actual value here so again we'll just do zero there for now then underneath display we're going to have operators and this is going to be all our um defined times plus and minus values here so we're going to create four buttons so i'm going to say button times four um and in the first one we're just going to have defined so a slash the second will be times third will be a plus and final one be a negative so let me just break these down so they look a bit prettier and not so ugly let's close that sidebar and zoom in one more there you go so you can see here we now have our buttons and we're going to create one more button underneath and this one's going to be the delete button so it's just going to say delete underneath the operators we're going to have the digits class or diff um and inside of here we're going to have basically from 0 all the way to uh nine and then decimal places as well so the first one i'm gonna do is i'm just gonna say button and we're gonna have a zero we're gonna have a button with a dot and finally we're gonna have a button with an equal sign now you're probably thinking tyler why have you gone zero dot equals well the reason for that is because we can set up these buttons here but i want to do from one to nine using a function so let me show you what i mean by that so if we didn't use a function we would have to write out nine buttons going from one all the way to nine like this but we don't want to do that we want a function that's gonna actually write them all out for us and actually do all the functionalities up here inside of our function just before the return we're going to have a constant called create digits equals and it's just going to be an arrow function um and in here we're just going to say const digits equals and we're just going to set an array for now we're then going to say 4 let i equal 1 and i'll explain what we're signing at one in a second and when it's less than 10 i plus plus so what we're doing here is we're creating an array of digits where we're going to store our actual array elements um we're then going to say let i equals one the reason we'll start at one is because we want to actually we've already got zero we just need it from one to nine so we're saying start from one and finish before we get to ten which means we're going to finish on nine so we're going to create from one to nine then all we're gonna do is we're gonna say digits dot push and let's break this down and now we're just gonna say button and then we're going to put little things in there and we'll just say i and that is basically we also need a key as well because obviously we're looping through this but what we're going to do is we're going to say buttons from um zero to uh from one two nine we're gonna basically just generate them here um and then under here we're just gonna go return and digits now what we'll do is we're going to go create and i'm going to go down here and we're just going to paste in create digits and um obviously we need to call the actual function so we're just going to say that and there you can see you see we now have the buttons from one two nine already displaying on our screen on the right side here now i think that's actually super zoomed in so we're gonna zoom out a little bit but there you go you can see we have our display our buttons and all our digits our operators and our digits all here displaying how they should now that is it for the markup we don't actually need any more markup um we may we may need to add in some variables here and some functions but otherwise this is all done that's it for the markup so what we're going to do next is we're going to move over to our index.css file and we're going to start by styling this out so i'm going to create a route where i'm going to store my variables now if you don't know what css variables are they're basically awesome and you should look into them i'm not gonna explain exactly what they are but basically you'll see in this video how you can use variables um to basically make your life a lot easier uh we're gonna have an ac free a f f and we're gonna have a dark color which i'm gonna set to a one three one a two six and then finally a light color which is just gonna be e just like that we're then going to say uh our margin for everything is going to be zero our padding is going to be zero and our box sizing is going to be border box we're going to give everything a font family our fire sands and then we're just going to say sans serif that hit safe and on the right you can see that's already taken effect now i don't know why this has gone slightly over so let's just there we go if we slam this to the left will it allow me to there we go much better there we go now it fits um so in here we're just gonna under here we're just gonna say body and all we wanna do for the body is set a background color of hyphen hyphen light now that's just going to set our background color to our light variable here and if we ever want to change this we could just say let's say 333 you can see we can change it on the fly like that and that's why css variables are amazing and you should all be using them um and they don't support there's polyfills for internet explorer you'd have to worry about that so we're gonna set our app and we're gonna set it to a display of flex we're gonna give it a min height off a hundred feet h if you want it to come all the way to the top we're then going to align the item center and also justify the content to be centered this way i think it's now going to be in the middle of our screen we're then going to get our calculator and what we're gonna do is we're gonna give it a width of a hundred percent a max width of 400 pixels we're then going to say its background color will be just a simple white and we're then gonna say it's a border radius is 16 pixels we're then gonna have an overflow of hidden because we don't want anything overflowing and finally we just want to have the box shadow and this one is going to be 0 pixels 2 pixels 64 pixels rgba 0.2 and that's just going to give it a little floaty effect there so as you can see that's now all done um and it's looking a bit good we should yeah if we're able to pull out there you can see it's it does have a constrained width um so cool now underneath calculator wouldn't set up our display our display is going to be equal to a padding of 16 pixels it's going to have a text align right we're then going to have a background color of dark that did not work background color off dark we're gonna have a color of light and we're gonna have a font size of 24 pixels a font weight of about 300 and finally underneath display we're going to set the span to be a font size of 14 pixels a font um actually and then a color off we're just going to do an 888 for our gray there we go there you go so that's looking a bit nicer and it's now good so that's now styled up we then want to get our actual buttons so we're going to style all our buttons in one um so we're going to say the appearance is going to be none we don't want them having any of the default styling we don't want them having a border we don't want them having an outline um we want them to have the color off by default to be white we're gonna then basically set the font size to be about 16 pixels sorry 20 pixels not 16 that'd be way too small um and then we're going to have a padding of 16 pixels a cursor of pointer because using appearance nuns removes that and then we're going to have a transition of 0.4 s so as you can see on the left there our buttons are now styled there i mean they don't look amazing but they're there they're ready so what we're going to do is underneath button we're just going to say button huffer phone we're going to give him a hufflepuff and what we're just going to say is opacity 0.9 or 0.9 overall sorry not percent hit save and now when we hover them they're going to go a bit lighter you won't be able to see it yet but we'll add that in soon so underneath here we want to go operators and we just want to say button so operators and we want to say display flex because we want them all to be flexed and then we want to go operators button will be flex one one zero percent now that should stretch all of these buttons to be equally sized across the top here and then we're going to set the background color to be our primary color there you go and finally our font weight to be about 700 we want these ones to be bold and there you go now you can see the styling is now working it's looking pretty good underneath operators we're going to have the digits not the gidgets the digits clicked in jets god my typing is horrendous but it's fine guys we've got this so we're gonna display this as a flex item we're not gonna give it a flex wrap off wrap um and then we're gonna say dot digits buttons or button and we'll give these a flex of 1 133.333 so we're going to basically stretch them so they all fit across there we're then going to give them an actual max width of 33.3333 just to make sure you know they've got they they don't ever go above that we're going to give it a background color and these ones are going to be dark oh that's not how it works hold on dark and there you go you can see now they've got the base styling which i really like and there we go so that's now done and that is actually all the styling we need for this as you can see our calculator is now done you could actually select different buttons um i mean they don't do anything yet but it's all there and it's ready to be functionality so let's add in the functionalities to our little app also let's go up to our app here and just give it a padding of 16 pixels that way it'll bring it in so it's not touching the edges and that'll look a bit nicer especially if that did not well why are you not working oh it did work um so there you go cool let's bring that down so let's just remove the index there the css and now we are back in our app.jss file now we need to actually import um use state for this so we're gonna say import and we're gonna say use state from react and then underneath function we're gonna create a constant and we're gonna basically say calc and then set calc is equal to u state which will be equal to um just some just a string we're then going to get our results and we're going to have a set result which is equal to use state which will also be a string we're then going to have just a constant called operators which is bait or ops which is going to basically tell us what our operator values are equal to so we're just going to set a all the operators and what they're equal to so this is going to be defined or a forward slash a asterisk a plus and a minus and finally a period or a dot and there we go yep reload you're fine um and there you go now we have our operator so we can actually use that later on now underneath our operators we're going to actually create a constant called update calc now this is actually going to be an arrow function and we're gonna pass through something we're gonna basically pass through a value and each one of these will be a value so our buttons will all represent a value and when you click one of these it will basically apply this to our calc so how we're gonna do that is we're just going to say set calc is equal to calc plus value just like that but there's going to be a few issues with this but for now let me show you what happened so let's get our update calc let's go down to our um display here and let's actually swap this out to be our calc value or so oh sorry or using the two things or it'll be equal to a zero and there you go so if there's no value inside of calc it'll be it represent a zero and we're gonna do a similar thing for this span over here so what we're going to do is we're going to copy this i'm just going to say um we're going to say result question mark so if there's a value we're going to do span else we're just going to return nothing and there you go now that's disappeared so if there's a value we'll show it if not we won't and there you go that's now done we're then going to use our update calc in here so we're going to say up or on click and every single one of these will basically be a quick arrow function which will say update or update calc and it will be have a string value of whichever item it is and in this case it's the forward slash so we're going to have a update calc of this so i'm actually going to copy this i'm going to put this on every single or not to delete so the delete and the equals will be two exceptional buttons or um different buttons they won't use the same function i'm gonna have a plus and finally i'm to have a negative value here we're then going to go down to the zero and we'll do the same here will be equal to zero period will be equal to the period and the equals burn will actually be separate so let's space that away from these ones here we don't need to actually go to our create digits function and add the exact same thing here but instead of applying this here what we're going to do is we're going to say i dot 2 string now we need these to be strings because um if not we'll have some issues later on but basically we'll say it here we've got that let's just break that down just so it looks a bit neater um and we'll break that onto a new line just so we can read easier and there you go so now we have this function here which is passing through the update cal i to string down here and that should be correct so let's actually have a look here if we now start adding buttons you can see it starts adding everything here now you can see there's a few issues here we can add multiple operators in a row um which isn't a good thing um and our delete and equals do not work so we just refresh here so what we need to do is inside of our update calc function we actually now need to do an if statement we need to say if and we'll break this down and we'll say if our operators includes the value and the calculation is currently equal to nothing or ops dot includes value and the ops dot includes and then we're going to check the last what we're going to do here is we're going to check the actual last um value we entered so here all we're saying is if it's equal if the last value is an operator and the calculation has nothing or our operator had the value is an operator and the last value was also an operator we're going to return and not do anything so now if we click you'll see nothing will happen if we added 2 we could then add a minus but we still can't add an extra and then we can add our free so you can see there that's how we can limit the um operations there so this little line here just prevents you from adding in loads of um asterisks same with the dots you can't add a dot straight after minus uh we go five dots five uh and then minus five dot you can't add a dot after a dot as well so we can have multiple dots as well and there you go so that is now done let's refresh our screen again so that's all good but now how do we update our results so underneath set calc we want to do if not ops dot includes value so if the last item was not a value or not a operator we're going to say set result to e foul and now evaluation basically um this will basically whatever the string you pass in it will evaluate it if it's a five plus five it'll give you ten if it's five plus five plus five will give you fifteen if five times five you'll give you 25 and so on um so we can say calc plus value because the calc actual value will not be updated until the next frame or the next call um dot 2 string now 2 string again is important because we need it all to be string related and there you go that is going to basically update so if we go two plus five you can see it's showing but it's not actually giving us the right value there and that is probably because you can see here we left a zero and now in here we just need to say result and there you go we get seven so let's refresh here let's say two plus five gives us seven also i know there's no space let's just add a non-breaking space there just so we always have the space there and there you go that's now added in and we can now do let's say minus five give us back to two times ten uh and there you go that's that's basically doing the the operation all there and then so now let's how do we actually evaluate this so when we click equals well it's not doing anything so let's actually create a new function and this is going to be called calculate so we're going to say const cal q late it's equal to a set calc and all we do is a foul our calculation dot two string so our current calculation or our current calc we're just going to value it so whatever we have in here we're going to value it and actually return it and then inside of our equals button we're just going to say on click oh one click calculate just like that and now if i click you'll see it gives us our value here which is perfect um so if we just do two plus three oh no i wanted a five we need now i need to delete one so let's go back up and let's create a console let's call it delete last um and we'll set this equal to an arrow function again and all we're going to do in this one is go if the calc um is equal to empty string wait if calc is not equal to an empty note is if it's equal to an empty string we're going to return oh um else we're going to basically say const value is equal to calc dot slice zero because we're going to start at zero minus one which is going to remove the last value and then we're gonna say set calc to be equal to our new value without the following one so now we click delete and let's actually refresh three plus two delete oh so the reason it's not working is because i foolishly forgot to actually add the click effect so we're gonna set the click offend there now if we hit delete there you go you can see it will remove it we can go three plus five um and there you go we've got the same effect there minus two times one for no reason delete we didn't know that five and there you go you get all the calculations there which is perfect so everything is working as it should and that is how you make a calculator in react js so guys i hope you have learned something useful in this video if you have don't get leave a thumbs up let me know any questions you have in the comment section below and i'll try and reply do not forget to join our discord surfer the link is also in the description we get talking on that quite regularly recently it's been a bit inactive but normally it is flowing with conversations so don't forget to get involved in that channel and i will see you in the next video peace [Music] you

Channel: Tyler Potts

Views: 96,777

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: oiX-6Y2oGjI

Length: 26min 34sec (1594 seconds)

Published: Wed Jun 30 2021