Building Calculator With Vanilla JavaScript | HTML | CSS

what's up guys and as always welcome to welcome back to my channel and before we start this tutorial i would like to apologize for my absence because i was away for a little while i was sick i wasn't able to upload to youtube or even build project or do anything so i apologize and i know this is not good because my channel is new and this is not good for the algorithm of youtube but i promise i will be uploading twice a week at least from now on and uh today before we start with the with the introduction of what we are going to do obviously we are going to build this beautiful calculator but before i would like to say uh thanks for the people who subscribe to my channel and thanks for the people who are commenting on my videos and i actually have um one video reach a thousand uh view on youtube so that's a good news and i wish to reach a thousand subscriber by before the end of the year so if you would if you like uh javascript or front-end technology in general so i will be uploading javascript project i have actually many projects in my github i did not share with you guys until now but we will be taking a look at all my project i will be sharing all my project with you and actually my portfolio and the project i put in my portfolio my favorite is rick and morty i found the rick and morty api and i made a nice website with vue.js we will be building that if you are interested in vue.js as well and today actually i picked the calculator because one of you guys requested so if you guys have any idea if i have any idea of a project just leave it in the comment down below and i will try my best to do it and share it with you guys okay so today we are going to be building this uh calculator it's actually the odin project oden project called creator if you guys don't know about the odin project but this is one of the free resources online i've used to uh to learn programming so today we are going to build this calculator with the vanilla javascript and if you guys are interested i uh i can build it also with vue.js i did not try to be honest to build it with vue.js but uh i think it's gonna be more easier with vue.js than vanilla javascript so if you guys interested just leave it in the comment down below and i will uh and i will read your comment anyway this is what we are going to build this calculator so basically if you divide by zero you cannot divide by zero and you can delete one number you can clear all you can do any car any multiplication division whatever subtracting or whatever you want to do it's a normal calculator and you cannot add more than one decimal point that's important you can go ahead and read what they are asking you to do and actually i recommend you to go and try to build it yourself because that's the only way you will learn faster all right guys so let's generate a boilerplate and call it a cult later okay and let's link our stylesheet and our script basically in the html we don't really need a lot of stuff we need a div calculator or we can just name it cart for short and inside of here we need another div called container i can type inside of this container this container will have all our buttons right inside of here let's have another div called output output screen okay inside of it we need to do this okay the first one will have a class of previous okay and the second one will have a class of current and just to explain quickly previous and current is uh this is the current now when i click on any number this this will be the current number okay now the previous number the previous number will be the current number as soon as i click on one of this operation like if i click add now this is the previous number and and the current number now is empty is ready for me to click another number right and now this is the calculation right so this is the previous and this is the current number all right so outside of the output screen we will have 18 button because these are 18 buttons so let's say button okay and okay now this is 18 button okay uh what we want next is to give each one of them a class so we can select them on on css and javascript later so the first one will have a class this will be the clear all okay this will be the clear button okay as you guys can see here this is the clear button the delete button and then the division and then the numbers and then multiplication numbers and so on okay here this one would be the delete and this will have a delete okay now we will have a division you can you can just search for the sign of the division okay at the beginning i did the html code for the division but then i had a problem with the with the javascript and that's why i just searched for the for the sign of the of the division on google and then i i copy it to my text so we will give it a class of operation and i will copy this sign okay so just to make our life a little bit easier now this one will be a number so this would be one now this two three and then the multiplication and then four on five and six and then i think this is also be an operation uh button and then seven and eight and nine and then subtraction and then the decimal point and then the zero and this one will be the equal one okay basically i'm doing this because all of them will have the same class of number or num for short so it's a little bit easier like that and if you're wondering about this shortcut you just hold the alt alt key and you select whatever you want one two and three and this will be multiplication and then four five and six and then the add sign um then seven and eight nine okay oh this one an operation and this will be subtract yes and now this one is [Music] the decimal point now this one is a number this should be the zero okay and let's have last one yeah that's my that's what the last one will be the equal but the equal will not be a number of course and let's give it two classes equal oh i forgot to explain why i'm giving it two classes this one the equal and the clear all i'm giving it uh an extra class of spam because i want them to spawn to be bigger than all the other ones the equal and the clearer okay now if we take a look at what we have this is what we are we are going to have in and it's very ugly so let's make it look beautiful now but first let me give this a class of operation okay this one as well all right so i think everything is clear and ready to go let's jump right into our style and make it look a little bit more beautiful so first let's remove all the margin and the padding okay at the body i want to have just different colors you can choose whatever you want any different colors i will just i have them in here so i will paste them it's a gradient okay of light colors and this is the fallback if my browser does not support this color and this will be the okay this is just a preference you can just skip it if you wish so now i will select the calc did i call it call core calculator yeah arc okay so [Music] position relative because i want to position other stuff inside of it as a absolute so i want it to be absolutely inside of this div okay and minimum height i want to be a 100 viewport height and a background of uh e0 e0 e0 okay let's continue let's grab our container or container div and display everything inside of it as a grid okay and let's give it a margin from the top now margin top uh 2am and let's justify the content to the center and align content to the center and this what we are going to have okay um [Music] position absolute top 50 left 50 and now as you guys can see it's exactly in the center but it's not i want it to be in the center of of my content if that makes sense because now it does start from the center but my contents start exactly from the center so it's not in the center oh that's awkward all right so let me explain in another way so if i said here translate minus 50 minus basically this this to whatever if it's not 50 if it's 10 in here and 20 in here you should put minus this and minus that okay percent okay now if i save look what will happen so now it's exactly in the center of my content like now it's exactly in the center that's exactly what i want right so i hope that makes sense so the grid template column i want to the columns i want to repeat four columns 100 pixels okay angry template i will be making a video about grid soon enough pre-template pro okay we want to repeat 5 5 rows be maybe 120 pixels give it a min max function 120 pixel and auto just in case my content is a little bigger than 120 pixels so let's save and this is what we are going to have it's not quite there yet but don't worry we will fix it so we want we want it to be exactly like this one and it's not it's not the same yeah so what we are going to do next is give it a background of rgb rgba and zero zero zero zero point zero two okay or the radius we will do it later if we wish oh let's give it a box shadow the box shadow i did in here it's a preference you you you can skip this one you don't really need it look it's um you guys can can see it's a white shadow in here so let's give it a box shadow box shadow 20 pixels 120 pixels and 60 pixel of blur and the color should be this is the one and now we need to do this side so to do this side you have to make the same exact values but negative values okay and you give it the color you wish of course we will give it a different color than the one before just a white color okay let's take a look and this is what we are going to have i think i believe uh calc yeah i spell it wrong because i i can tell there's something wrong with the color it's i should name it calculator just for peace of mind but whatever all right so let's move on now uh let's grab the con a containers pan the ones with the class of span and grid column we want them to span two two columns right so this is how they will look the equal one the equal the equal and clear all okay and next let's grab the output screen we call it output screen so the output screen let's give it some dummy numbers so we can see what's going on okay like so so this is our screen right now it's here our two divs all this one actually this div this one so let's style it so it can look nicer great column so i want my grid column to be from the beginning to the end i wanted to take the whole everything from the beginning to the end right so this will make it right here or you can just say until -1 so let's give it a background of black okay like so and a lot of white so we can see the text and we displayed flex and just justify content um space around let's put space between them let's see yep so but then i want the flex direction to be column like so and i want to align the items line items supplex flex and yes flex end exactly like so i want to give it a padding of 10 pixels at least like so and uh two more things i want to do in here it's a word wrap yes it's a wardrobe uh break word and word break it's a break all exactly so if i have more content it will break to the next line like like for example if we had more of course like so say it would break as you guys can see it will break to the next line okay go back and that's the style for our output screen and now let's style the current we don't need much actually in the current but i want the current to have a font size of 2.2 ram you can play around with this and choose what what you want because i want this one to be a little bit bigger than this one the current here to be bigger than this one okay what's next the previous let's select the previous and make it a little a little bigger font size 1.6 ram okay this is how it's gonna look okay now let's grab all the container every time i'm typing container i'm typing const first that sucks container button and let's give it a background of uh rgba closer to this one but 0.4 and the border radius of 15 pixels and no border and no outline okay and then let's grab the container or let's make a hover so we can get so we can finish this one container you see const container button cover background actually i made a mistake okay so this all this or this one should be in here in the hover okay and [Music] here i want the font size to also be 1.6 ram for 1.5 let's see and the background we don't want a background in here we want to make it when we hover over it and um [Music] border let's give it the one picture of solid white and this is how it's gonna be looking like i think we are very close to this one so i believe i made something wrong it does look weird a little bit but there is something wrong let me see what's wrong with it okay um let's see if here i made it under it yep that's what's wrong with it because here should be a hundred actually let's make it round in here and here so i can make it exactly the same so to do so let's say border button uh top or right uh it's right radius yes let's give it a 30 pixels of border radius and um and here up okay let's see how does it look like why nothing changed let me test it by say border one pixel solid grid actually does round it so i think we need to [Music] also give the output yeah to give the output screen the same exact so we can round it because if you can see look at the bottom of you see it's rounded but if we delete this border it's not right we have to give our output screen put it here save and now it's rounded and we have to do the same thing for the equal button yeah so let's continue let's do it for the container dot equals and what we are so basically i want the same thing no i want the bottom one right now finally i want to just to make my operation buttons a little bit bigger font size to be touring okay that's it so let's take a look at my box shadow why doesn't why the box shot is not working in this one and i forgot to add a transition to all my buttons so it can have a smooth transition between one another when i hover over it 0.3 seconds please okay and i want to take a look at my box shadow and see why why is it not working so i think let's try this i believe that's everything we need into our css and now let's jump into our javascript so what we need to do first is to create a function that will hold everything in it like all our other functions and everything okay and now let's select everything we have in here i will select all the numbers and all the operations and the current and the previous one okay okay so after selecting everything we need let's just take a quick look if that's everything we need previous current numbers all the operations and the delete clear and equal button so that's everything now we need three variables okay the first variable is to the current value that we click on like if i click on one i want a variable to hold that one okay so first and let's call it operand okay and we will make it an empty string for now and i want a variable to hold the previous operand okay i want another variable to hold the operation if i chose uh multiply i want this sign to be in this variable to us to be assigned to this variable no pun intended and not just make it null for now all right so now i will create a function to hold all or to handle all our buttons all the actions of our buttons will be inside of this function okay so let's grab the number buttons and loop through them for each for each button so for each button what do we want to do i want as soon as i click let's take a quick look to our example in here so what i want to do is as soon as i click in here okay i want this value to be assigned to this current okay and then this current to be equal to this current text so we can see it in this screen that's exactly what we want to do but we also want to check if if i if this number let's say for example if i add if i have 12.5 for example okay i also want to see if this number has already uh a period or a decimal point okay i don't want to add another one like now i'm clicking and nothing is happening this is the finished version by the way so i'm clicking on nothing happen i want also to check for that okay because if we if we did not you can add more than one and this is not correct yeah unless i add for example and another number i can add decimal point yeah but i cannot add more than one all right let's continue hey if this is not the case then i want the current operand to be equal to the button the text content basically i'm assigning whatever number i click on to this current like i just explained to you and then i want to update the display okay and this is a function we did not make yet let's make it now all update display i can type correct function okay and in this function all we want to do is to make this current operand that we click on okay to be equal to the current text the text content okay the text content inside of here so instead of this text content okay i want whatever in the current operand to be in here and operand and now if we test our calculator let's refresh if we test it it's not gonna work because we did not call actually handle buttons in here that's my mistake okay save now if i click it should work okay it's not working again why is it not working let's actually inspect okay i know now why is it not working because as soon as we loop through each and every button i should have added um an event listener and did everything i just did right now inside an event listener because now we are not listening to the buttons that's why it's not working so let's add an event listener and this event listener should be a click event okay and now all this stuff should be right over here we save hopefully this is working now as you guys can see as soon as i click because i was also logging here so as soon as i click this button will have the current operand will have the the value of the text i'm clicking on and then it will call the update display and assign whatever in the current operand to the current text.text content and it will be showing in here okay now let's move on actually let's add another line in here and make this to be the previous same concept the text content to be equal to the previous operand here now we will not touch the update display again so before we move on from this from the number buttons i want also to see to check if um inside of this loop if the current operand equal to zero i don't want it to be added to anything okay if it's equal to zero and i don't want the current operand to do anything i want it to be equal to an empty string else don't do anything okay so let's move on to the operation button again we are inside of this handle buttons yeah operation buttons dot for each let's loop again through them all of them and you can name this btn this represents the buttons okay you can name it whatever you want you will get confused you can just change the name again this will be a click event and for the operation i want to check if the current operand okay if this one is empty if the current operand is empty and i click add for example i don't want to make any operation right doesn't make sense because there is no calculation to calculate so we will say that if the current operand is equal to an empty string return otherwise operation you should make it equal to the button.txt content this operation like i explained before i want all the operation to be assigned to this variable right like if i click plus i want this operation to hold that value for that moment and then i want we will create another function called operate okay and then we will update the display we will create this function now but this function will be outside of the handle buttons okay but inside of our calculator function okay so let's call it operate now this function all what this function will do is to assign the current the current value so let me explain let me show you and explain it slowly because might be a little bit confusing so what this function will do is let's say i have 12 here okay so this is the current right now as soon as i click on plus or multiplication or whatever i want this value to be equal to the previous value okay and next to it i want to have the operation what type of operation like if it's add or multiply or subtract or divide i want it to be next to it in here so this this function will be responsible of this like for example now look if i click add you see i want this to happen all right let's continue but first the current is empty i don't want to do anything again right because it doesn't make sense it's equal to an empty string return but if the previous operand is not empty then i want to make my calculation calculate the result okay calculate the result this function will make to calculate the result and operand next to it i want to have the operation like i just showed you now operation right and finally i want the current operand to be empty just like i just like here exactly like here for example like we said 12 or 1 plus as soon as i click plus i want the current to be empty and the previous to have this value the current operand next to it i want the operation this one okay let's move on so i think we are ready for to make the calculate result or let's let's go back to the handle buttons and make the clear because they are very easy the clear button the clear but advanced listener uh and it's very easy the clear one if i clear i want the current operand to be equal to zero okay and the previous operand to be equal to an empty string and the operation to be to be equal to null alright and then i want to update the display with all these values and again i will show you so if i click clear i want the current operand to be equal to zero as you guys can see and the previous to be empty and the operation to be empty null and then update the display with this value very simple right okay let's go let's now make the card now let's make the delete one the delete button and then and the equal button because the delete button actually it's the it's a little bit it's a little bit more than just few lines of code let's do it delete button.add event listener again what i want to do is because later we will implement in the calculate result okay we will we will check if we are dividing by zero i want to display a message okay like this one like if i'm dividing by zero i want to display a message because that's what they're asking us to do i think somewhere in here there you go display a snarky error message if the user tries to divide by zero don't let it crush your calculator first i want to check if if my current operand is equal triple equal to this message so if it's equal to you can't you can't divide by zero i want the current operand to be equal to zero when i delete okay and i want temp let's create a temporary variable we equal to this else i want the temp to equal the current operand dot to string dot slice from zero to minus one and now we are done from this we're going to check for if the temporary if this temp equal to an empty string or temporary equal to zero we are going to make temp equal to zero okay and the current operand is equal to temp and then we update the display okay else the current operand equals parse float attempt we change it from from a string to a floating point number and then we update the display okay i think we are done from the delete button now that's all we need in the delete button we will see if it's working or not something is wrong and i don't know what so let's inspect it and see what's happening line 66 okay so what's happening in line 66 so there is some bugs like that things mistakes happens and you don't really realize what's going on so basically here this should be an empty string okay and close this one and i believe if we test it now it's gonna be working i think so oh yeah exactly so let's delete and see oh size is not a function why slide is not a function where because to string it should be like that okay oh now oh exactly now it's working and the clear button is actually clear all is working as well and as you can see it's zero new clear all all right and when you delete you can delete one like i said and so on so let's continue and now we should be able to create this one i'll create result this function so we can calculate the result and see our calculator working you can come here and create a function okay so what we need in this function a lot of stuff let's create two variable for the current and the previous value temporary ones okay and we because as you guys know it's a string right whatever we will save inside of of this current operand will be string so we have to change it to floating point number right so here will be the current operand and this will be the previous one okay so this is the previous and this is the current all right and this is the result let's create a variable for the result okay so if somehow these are not a number like we did not enter a number okay if the previous or the current are not numbers don't do anything okay now we are going to check after this to see if the operation is equal to one of the operation buttons okay like let's start with the add okay if it's equal to the add i want the result to be equal to previous this previous previous plus the current symbol right else if the operation is equal now i want the result to be equal to the previous minus the current okay else if the operation is equal and here it should be triple equal okay like i said i will copy this you can copy it from my repository if you want or just google it simply i want the result to be equal to the previous divided by the current okay [Music] same thing but for multiplication [Music] let's put this down and i will tell you why because i want also to see if operation is equal to this to the division sign again okay and the current is equal to actually we need this should be one and the current is equal to zero okay i want the result to be equal to you and divide by zero all right actually else yes else just empty string okay finally want the current operand to be equal to the result okay and the operation to be equal to null and the previous operand to be equal to an empty string i think now we can do some calculation with our our calculator let's see one plus one oh we did not implement the equal button so let's go and implement it clear and the delete so yeah we did not implement the equal button yet so let's let's do it but at least i as you can see everything is working fine let's go ahead and implement the equal button and actually it's very simple the equal button all what we are going to do is to equal button add an event listener to it and just call the two functions we just made the update display and the calculate result calculate the result and then update the display very simple let's go back now and see if this is working or not one plus five equals six perfect it's working congrats all right so if i add plus 4 equal 66 minus let's say 67 equals minus 1 perfect so if i want to clear i will clear if i want to delete i can delete so now everything is working fine okay but in the odin project they are asking us to do some extra stuff these three extra steps or four extra steps okay first user can get floating point number you already did it okay and make it look nice it's already extra other escape backspace button so you can undo we already did it the delete button now the key uh other keyboard keyboard support okay there is some bugs i already fix it okay i don't know if i'm gonna continue doing this video or not because it's getting very long but you should be able to do other keyboard support if you can't add a keyboard support you can find the code in my github repository it's already it's already there i already did it and you can add you can copy my code and play around with it so let's try divide by zero actually uh this should be before the other one we put this up okay if we put this line up and this is down so it because you know javascript work like that from the top to the bottom right so let's save now and go back and see i think it would be fixed because it will shake first if it's equal to if we are dividing by zero it will be this let's try divided by zero equals you can divide by zero anyway that's it but there is a lot into it there is some bugs i want you guys to fix it i want you to look for it and fix it yourself and add some keyboard support and if you would like to share with me uh what you did you can do it through uh instagram or whatever i will link it in the description below and you have my code in the github repository you can go and check my code in there you will find some extra stuff actually in my code so i will link it in the description below alright thanks for watching and see you in the next one

Channel: Rise To Code

Views: 52

Keywords:

Id: yqAI7cRfcLI

Length: 62min 25sec (3745 seconds)

Published: Sat Sep 18 2021