Basic JavaScript Calculator Source Code | HTML, CSS: Do you ever think what you can do using Javascript? Javascript lets you do all that you will never have thought about. At this time JavaScript is one of the most demanding languages.

You will find this calculator programs on a very well-known website like CodePen, but those programs will be very advanced. If you are a beginner or are looking for simple code, then those codes will be difficult for you to understand.

I will show you how to make a calculator using JavaScript, HTML & CSS. I.e. will share the source code of JavaScript calculator. This is very simple but useful program. When I started learning Javascript, in the second class I expressed my desire to learn this from my teacher.

Basic JavaScript Calculator Source Code Given Here Below.

Copy these codes and save it with the name that is given here. use can use IDE as well as notepad in windows. I would recommend that first understand this code and then use it anywhere. So, if you have to make it yourself, you do not have to copy the code repeatedly.

I had been created in 2 separate files So that the code does not get long. Generate two files first “calculator.html” second “style.css”

calculator.html

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaSctipt Calculator | Web Dev Trick</title> <link rel="stylesheet" href="style.css"> </head> <body> <script> function calcNumbers(result){ form.displayResult.value=form.displayResult.value+result; } </script> <div class="container"> <form name="form"> <div class="display"> <input type="text" placeholder="0" name="displayResult" /> </div> <div class="buttons"> <div class="row"> <input type="button" name="b7" value="7" onClick="calcNumbers(b7.value)"> <input type="button" name="b8" value="8" onClick="calcNumbers(b8.value)"> <input type="button" name="b9" value="9" onClick="calcNumbers(b9.value)"> <input type="button" name="addb" value="+" onClick="calcNumbers(addb.value)"> </div> <div class="row"> <input type="button" name="b4" value="4" onClick="calcNumbers(b4.value)"> <input type="button" name="b5" value="5" onClick="calcNumbers(b5.value)"> <input type="button" name="b6" value="6" onClick="calcNumbers(b6.value)"> <input type="button" name="subb" value="-" onClick="calcNumbers(subb.value)"> </div> <div class="row"> <input type="button" name="b1" value="1" onClick="calcNumbers(b1.value)"> <input type="button" name="b2" value="2" onClick="calcNumbers(b2.value)"> <input type="button" name="b3" value="3" onClick="calcNumbers(b3.value)"> <input type="button" name="mulb" value="*" onClick="calcNumbers(mulb.value)"> </div> <div class="row"> <input type="button" name="b0" value="0" onClick="calcNumbers(b0.value)"> <input type="button" name="potb" value="." onClick="calcNumbers(potb.value)"> <input type="button" name="divb" value="/" onClick="calcNumbers(divb.value)"> <input type="button" class="red" value="=" onClick="displayResult.value=eval(displayResult.value)"> </div> </div> </form> </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <!doctype html> <html> <head> <meta charset = "utf-8" > <title> JavaSctipt Calculator | Web Dev Trick </title> <link rel = "stylesheet" href = "style.css" > </head> <body> <script> function calcNumbers ( result ) { form . displayResult . value = form . displayResult . value + result ; } </script> <div class = "container" > <form name = "form" > <div class = "display" > <input type = "text" placeholder = "0" name = "displayResult" /> </div> <div class = "buttons" > <div class = "row" > <input type = "button" name = "b7" value = "7" onClick = "calcNumbers(b7.value)" > <input type = "button" name = "b8" value = "8" onClick = "calcNumbers(b8.value)" > <input type = "button" name = "b9" value = "9" onClick = "calcNumbers(b9.value)" > <input type = "button" name = "addb" value = "+" onClick = "calcNumbers(addb.value)" > </div> <div class = "row" > <input type = "button" name = "b4" value = "4" onClick = "calcNumbers(b4.value)" > <input type = "button" name = "b5" value = "5" onClick = "calcNumbers(b5.value)" > <input type = "button" name = "b6" value = "6" onClick = "calcNumbers(b6.value)" > <input type = "button" name = "subb" value = "-" onClick = "calcNumbers(subb.value)" > </div> <div class = "row" > <input type = "button" name = "b1" value = "1" onClick = "calcNumbers(b1.value)" > <input type = "button" name = "b2" value = "2" onClick = "calcNumbers(b2.value)" > <input type = "button" name = "b3" value = "3" onClick = "calcNumbers(b3.value)" > <input type = "button" name = "mulb" value = "*" onClick = "calcNumbers(mulb.value)" > </div> <div class = "row" > <input type = "button" name = "b0" value = "0" onClick = "calcNumbers(b0.value)" > <input type = "button" name = "potb" value = "." onClick = "calcNumbers(potb.value)" > <input type = "button" name = "divb" value = "/" onClick = "calcNumbers(divb.value)" > <input type = "button" class = "red" value = "=" onClick = "displayResult.value=eval(displayResult.value)" > </div> </div> </form> </div> </body> </html>

style.css

/** Code By Web Dev Trick ( https://webdevtrick.com ) For More Source Code Visit Our Blog ( https://webdevtrick.com ) **/ body, html { background: #ECEDEF; margin: 0; padding: 0; } .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2); border-radius: 14px; padding-bottom: 20px; width: 320px; } .display { width: 100%; height: 60px; padding: 40px 0; background: #FF0509; border-top-left-radius: 14px; border-top-right-radius: 14px; } .buttons { padding: 20px 20px 0 20px; } .row { width: 280px; float: left; } input[type=button] { width: 60px; height: 60px; float: left; padding: 0; margin: 5px; box-sizing: border-box; background: #ecedef; border: none; font-size: 30px; line-height: 30px; border-radius: 50%; font-weight: 700; color: #5E5858; cursor: pointer; } input[type=text] { width: 270px; height: 60px; float: left; padding: 0; box-sizing: border-box; border: none; background: none; color: #ffffff; text-align: right; font-weight: 700; font-size: 60px; line-height: 60px; margin: 0 25px; } .red { background: #FF0509 !important; color: #ffffff !important; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 /** Code By Web Dev Trick ( https://webdevtrick.com ) For More Source Code Visit Our Blog ( https://webdevtrick.com ) **/ body, html { background : #ECEDEF ; margin : 0 ; padding : 0 ; } .container { position : fixed ; top : 50% ; left : 50% ; transform : translate ( -50%, -50% ) ; background : #fff ; box-shadow : 0 4px 8px 0 rgba ( 0,0,0,0.2 ) , 0 6px 20px 0 rgba ( 0,0,0,0.2 ) ; border-radius : 14px ; padding-bottom : 20px ; width : 320px ; } .display { width : 100% ; height : 60px ; padding : 40px 0 ; background : #FF0509 ; border-top-left-radius : 14px ; border-top-right-radius : 14px ; } .buttons { padding : 20px 20px 0 20px ; } .row { width : 280px ; float : left ; } input[type=button] { width : 60px ; height : 60px ; float : left ; padding : 0 ; margin : 5px ; box-sizing : border-box ; background : #ecedef ; border : none ; font-size : 30px ; line-height : 30px ; border-radius : 50% ; font-weight : 700 ; color : #5E5858 ; cursor : pointer ; } input[type=text] { width : 270px ; height : 60px ; float : left ; padding : 0 ; box-sizing : border-box ; border : none ; background : none ; color : #ffffff ; text-align : right ; font-weight : 700 ; font-size : 60px ; line-height : 60px ; margin : 0 25px ; } .red { background : #FF0509 !important ; color : #ffffff !important ; }

Preview

If you are using a phone click on Result for preview



See the Pen Basic HTML CSS JavaScript Calculator by Web Dev Trick

(@webdevtrick) on CodePen.



This is source code for a calculator using HTML, CSS, JavaScript. I Know this is very basic, but always remember basic is most important. Whose basic has weak they can ‘t become an expert. This is my Opinion.

Hope you enjoyed this article, if you feel this is useful for you, then you can increase our morale by sharing. If you have any questions or want to say something, then you can comment below. Thanks for Visiting. For More Useful Articles & Source Code keep Visiting Our Blog .