How to Make A Calculator App using HTML, CSS and JavaScript (2023)

her element will come back to code with this channel in this video we will take this calculator using HTML CSS in JavaScript so let's try it these videos press this button it will delete one one but if we press this button it will delete all of them for example 45 multiply by 2 equal to 90 okay 85 Plus 32 172 and 22 divided by 2 so you will get the result so we will get this calculator in this video using HTML CSS in JavaScript so let's get started so if you are new to my YouTube channel don't forget to subscribe so for this calculator up we have these two files okay HTML calculator.css and calculator dot HTML so now let's start our coding first of all we will come to the HTML file write here our code assign a title and let's link our calculator.css with this file okay to link it we will like let's calculated that CSS and in the calculator.cs we will write adding zero margin zero box sizing powder box so now let's come here and we will start our coding first of all we will create a container oh sorry container container class then you will create a calculator after that we will create a forum inside forum uh we will have input Fields the DV element and then the input type would be text okay after this this let's copy this paste it here and we will have um but before we should design it okay we should design our calculator so let's run it to run it I have installed an extension go live server okay let's press this and it will refresh every page our page automatically whenever we make changes to our file yeah it looks like this but let's add some design first of all to the container in that container uh width is 100 percent height direct VH and background color inside yellow and make like this wait let's head here to the calculator class to that we will add width 400 pixel height is R2 with us a border reviews pixel margin uh 20 pixels pixel for the left and right that is R2 and let's check it how it looks like yeah it looks like this but so let's add here display flicks align item Center and justify content Center and let's remove this line and let's edit background color White and you cannot border solid Gray adding 30 pixel let's check it now yeah it looks like this now and now let's add our buttons here type type would be button and the value would be all clear and this would be delete and this one will be Dot so it would be the multiplication okay I will divide let's copy this and paste it here and this would be 7 8 9 and this should be it again for it's gonna be five it's gonna be six and this would be uh plus n okay everyone two three minus sign okay double zero zero and this would be equal now yeah it looks like this okay let's uh design now so let's compare to the CSS first let's assign a name here name is equal to display border none nine zero it would be 60 holder radius in pixel and margin would be 10 pixel color white cursor pointer so let's check it now yeah it looks like this but let's make it it looks like but let's make it here's the key now so now let's increase the width of this and also this input to our text area and also we will Design font size add four sides to this okay size 15 pixel it is okay now if we are make it yes and the margin foreign let's come here to the calculator and assign a class name here play okay play this and come here Forum dot display here so display should be flat and file content Flex end top and bottom would be 20 pixel in this zero pixel left and right after that we will come just here input in the input texture line would be right font size would be 40 pixel let's check it now but it is not okay right now it should add this one okay it is okay now so let's change the background of this yes let's try something okay to the Keynote so let's make the design of this double how to make the double we will come here and we will assign a classmate equal s well equal to here and just copy this let's start here input dot equal see the width of this so let's make it 140 .35 pixel it is okay now okay so now let's add some design to this we will just come and copy this input type is equal to button H over like around color blue yeah let's make it we should remove this see it looks like this now okay so now whenever we add something here whenever we click a button we should add that value here okay so after that let's come here so let's come here to the HTML for example we click on this okay fourth so we should add here and click we'll just use this name okay display dot value is equal to with 4 okay so let's check it example person is C the video has added but for the physical time we cannot add that for so far that we like it like this [Music] save it and let's check it let's start it see you add it multiple times and also let's remove this display margin top would be 5 pixel the right is zero bottom would be 20 pixel or 15 pixel and this is yeah it is okay now and one thing else that is you should change this background color black yeah it looks like better now so now let's add the same thing for all these buttons copy this put here it should be five come here paste it here should be six here you should plus sign so we will add it for all buttons so you have added for all buttons okay for these all button but not on the equal button and also for these two so whenever with this one okay so we should clear all the videos for that we will write something like this okay is equal to nothing okay so now let's start it for example this data edit okay values let's press this see various gun between your so whenever we press this button we should delete just the last one okay so for that we will write remove this and right here uh display dot value the two string we will change it to the string then dot slice 0 comma minus 1. so let's check it now yeah for example I'll do this so let's press it see last one has gone from that so now whenever we add the buttons these operations so when we press this equal sign so we should see the result all right let's come here so one click uh we will write the display dot value equal to even okay this method we will call this and we will write inside this display dot value okay it will evaluate the value but don't use this even method on the real application because for the first for the security purpose it is not secure so now let's check it see get set for example 78 plus 10 equal C 97 and let's clear it C1 T divide it in C whatever you would like so you can add all of them okay 96 divided by 5 C 17.2 clear this 2 minus five see so it was all about creating creating a calculation a calculator using stream messages in JavaScript I hope this video was helpful for you if you like this video please subscribe our YouTube channel uh thanks for watching

Channel: Code With Yousaf

Views: 338

Keywords: calculator using javascript, calculator using html css javascript, javascript calculator, how to make calculator using html and css, how to build a simple calculator using javascript, simple calculator using javascript, how to build a calculator in javascript, javascript calculator tutorial, how to make calculator using html css and javascript, how to make a calculator using html css javascript, javascript calculator project, javascript, calculator html css javascript

Id: jWlZX851Rr0

Length: 17min 9sec (1029 seconds)

Published: Mon Mar 20 2023