How To Make A Calculator Using HTML CSS And JavaScript

hi guys welcome back to another video of easy tutorials today in this video we are going to create a calculator using HTML CSS and very simple JavaScript here on my computer screen you can see this calculator design and we can perform all the calculations here you can see if we click on any button these numbers are displaying in this display and we can also perform all the operations here if we click on this plus icon and add any number and click on equal to it will display the result we can click this button to delete one number and we can click on this AC to clear the screen like this let's add another number here 2.5 multiply by 2 and click on equal it will give the result so this is working calculator using HTML CSS and JavaScript so before starting this video please hit the like button and subscribe my channel AC tutorials now let's start the video here in this folder you can see one HTML file one CSS file let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file in this HTML file I have added this link tag that will connect the HTML and CSS file and here we have the page title let me open this webpage with any web browser so you can see this web page Title Here calculator using JavaScript easy tutorials and this webpage is blank right now so let's come back to the code file again and here within this body tag we will create one div with the class name container and for this container we will add the CSS so write this container here in the CSS file and here we will add the width and height then we will add the background with one color code after that come back to the web page you can see this color on the complete web page now we will come back to the HTML file again and within this container let's create one div with the class name calculator in this calculator we will create one form with the form tag and in this form we will add different input Fields so here we will add one div and in this div we will add one input input type build with text and name it will be display so in this one we will display the result of the calculation after that we will create another div and in this div we'll add input field and in this input field we will add type type will be button because we have to add four button in one row input type will be button and write the value value will be AC all clear and after that we will duplicate it here we will add d e for delete then we will add 1 Dot and Slash this is for the first row after adding this let's come back to the web page you can see this input field here which is the text input field and then we have four buttons now we have to move all these things in the center so let's come back and come to the CSS file within this container we will add display Flex align items Center justify content center after that come back to the webpage you can see it is in the center of the webpage next let's come back and here we have the class name calculator so at this class name here in the CSS file and for this calculator we will change the background then we will add some padding to add a space then we will add border radius it will be 10 pixels so that the corners will be round by 10 pixel you can see the changed color for the calculator background after that we will add other buttons here right now we have added only four buttons similarly we will add other buttons so let's come back and here in this tip we have four buttons so let's duplicate this complete tip and we will change the value here we will add the value seven then eight next one is nine this one is asterisk that is for the multiply let's duplicate this div again and here we will change the value it will be 4 then 5 6. and here let's add minus again duplicate it and in this one we will add one two three and after that plus now we will duplicate this div again and here let's add 0 2 times then single 0 and next one is equal to here we will add only three buttons let's delete this one after that we will come back to the web page you can see we have one large input field that will be for the display of the result then we have other buttons like this here you can see 0 1 2 3 4 5 6 7 8 9 and all the operators for multiply plus minus and divide next we have to design all these buttons so let's come back and come to the CSS file here we will add calculator and in this calculator we have the form and in this form we have input field so here we will add input for these input we will add border border will be 0 and outline also zero then we will add the width and height that will be same so that it will be a square button it is 60 pixel then we will add the Border radius of 10 pixel and we will add box shadow box shadow there will be two box Shadow one is light color and one dark color this is light color shadow and it will be in the top left side and after that we will add one comma and add another Shadow here and it will be in the right bottom 5 pixel then 5 pixel 15 pixel and change the color then we will add the background background will be transparent and let's increase the font size font size will be 20 pixel and color will be white and cursor pointer and we will add margin margin will be 10 pixel so that we will get space between all the buttons after adding this again come back to the website here you can see these buttons looks good at the top here we will display the result and right now it is displaying like a square so we have to increase its bits and there will be no Shadow it won't display like a box so let's come back and here in this HTML file here you can see we have the input type text and name is equal to display so independent div this is the div here we will add one class name so the class name is display and we will add the CSS for this display so let's come back to the CSS file here we will add form dot display display will be Flex justify content Flex end so the contents will be in the right side and margin 20 pixel from top and bottom and left right zero after that again copy this and paste it here in this display we have the input field with the name display so for this input field we will add text align right and flex will be one so it will be full width then font size will be 45 pixel and box shadow box Shadow will be none so there will be no box shadow after adding this again come back you can see the plane area at the top where we will display the result now here you can see this equal button is in the Square form so we will increase its width so it will use the double space for that let's come back and here at the end we have the input type button value equal so here we will add one class name so the class name is equal and we will add the CSS for this one so let's copy this and paste it here we will add form input dot equal let's add width 145 pixel and after that you can see the width of this equal button is double then other buttons now the alignments of all the buttons are looking good next we have to add the functionality whenever we will click on any number that number should display in the display area so let's come back come to the HTML file so we will add the click feature in these numbers so let's start with this seven here we will add on click equal to display here you can see we have the input with the name display right this display dot value display dot value equal to in this equal we will add one value that will be displayed inside the display area when we will click on this button called seven so whenever we will click on this 7 it should display the 7 itself so here we will add 7. after adding this let's come back to the web page again and if we click on 7 you can see 7 is displaying in this area and if we click this 7 again you can see nothing is happening it means the 7 is replacing the content but we need double seven here so let's come back and here before this equal we will add Plus that's it after adding this let's come back and here if we click on 7 it is displaying 7 if we click again it is displaying double seven let's click again it is displaying triple seven so this button is working fine similarly we will do the same thing with other buttons so let's come back here let's copy this and paste it here write it in this one we will add nine in this one we will add this as tricks or multiply here we will add four let's add five then six here we will add minus it will be 1 2 3 and plus it will be 0 0 then 0 that's it we have added on click on all the numbers let's come back and here if we click on 7 it is displaying 7 let's click on eight nine four five six one two three double zero single zero so these numbers are working let's refresh and if we click on this multiply minus plus it is also working let's come back and here we have to add the click function on these buttons so let me copy this one and we will come in the first input field here we will add display dot value equal to remove this plus equal to just blank code so it will delete everything the display will be empty because this button name is AC all clear let me copy this and add it here we will add Dot and plus paste it here here we will add plus and Slash so these are similar thing but in this one we have to delete only one number so here let's add on click equal to display dot value equal to again same thing display dot value Dot to string to string and in this string we have to remove the last number so here we will add slice 0 comma minus 1 so we have added this on click equal to display dot value equal to display dot value dot to string dot slice 0 minus 1 after adding this let's come back to the website again and let's type any number here and click on this delete it is deleting one number let's click again it will delete one number let's click again and this display is cleared and let's click on the number again and click on this AC that is for the all clear it should clear all the screen so these buttons are working fine next we have to add the click function on this equal button that will perform the calculation so let's come back and at the end we have this input type button value equal so in this one here we will add on click on click equal to foreign Dot value equal to here we will add e v a l eval that is for evaluate it will evaluate the content written in the display input field so write eval display dot value that's it after adding this again come back to the website and if we click 7 minus 2 and click equal we will get the result let's add plus and 8 here we will get the result we will add 130 divide 5 here's the result now this calculator is working fine next we have to add the button color in the first row button and the last column button so let's come back and in the first row we have these buttons so for all these buttons let's add a class name operator like this and in this second one also in the third and fourth one after that come back to the CSS here we will add Dot operator and color before this operator we will add form and input like this after that you can see this color in the buttons which is in the first row next we will add the color in this last column also so let's come back and in the last buttons here we will add the same thing class operator here also class operator here also and in this one here we already have one class name equal so write a space and write operator like this after that you can see colors in this multiply minus plus and equal so finally we have completed this calculator using HTML CSS and JavaScript I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 803,224

Keywords: HTML CSS, JavaScript, JavaScript project, JavaScript projects for beginners, calculator using JavaScript, JavaScipt calculator project, make calculator using JavaScript, JavaScript tutorial, Easy Tutorials, HTML CSS Calculator design, JavaScript Mini Project

Id: cGgLHJGyS34

Length: 19min 0sec (1140 seconds)

Published: Thu Dec 22 2022