In this lesson, we are going to learn how to create a simple calculator using HTML CSS, and JavaScript. In the last article, we learned how to create a Responsive Registration form using HTML and CSS.
Calculator in Html
We are going to create a simple calculator with the help of HTML CSS, and Javascript. You can use this calculator to perform any type of basic calculation.
It has the functionality of (+, -, *, /). You can perform these operations in this calculator. All the functionalities are added with the help of JavaScript and design is made with the help of Html and CSS.
You might like it:
How to create a calculator in HTML?
In this program, we are going to learn how to create a calculator. We are going to create it step by step with the source code.
It has a unique design and it fulfills all the basic requirements of a calculator. You can use it for your personal calculations as well because it is a functional calculator.
If you are interested in this calculator and want to add this calculator to your project then you can copy and download the source code from this article. Scroll down to get the source code of this basic calculator.
For creating this calculator you need to create three files in your editor (VS code/ sublime etc.). These extensions allow the browser to understand the type of the file so that the browser can execute the file easily.
Source code of HTML
Javascript Calculator | Fantacy Designs
|
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 |
<script> function calcNumbers(result){ form.displayResult.value=form.displayResult.value+result; } </script> <h1>Calculator</h1> <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> |
Code of CSS file:
|
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 77 78 79 80 |
body{ background: linear-gradient(to right, #ec6f66 , #f3a183); margin: 0; padding: 0; } h1{ font-size: 40px; font-weight: 900px; font-family: arial; color: #fff; margin-top: 60px; text-align: center; } .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: linear-gradient(to right, #ffc371 , #ff5f6d ); 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: linear-gradient(to right, #ffc371 , #ff5f6d ) !important; color: #ffffff !important; } |
Source code of JavaScript
|
1 2 3 |
function valuecal(result){ calculatorForm.evalresult.value = calculatorForm.evalresult.value + result; } |
By using this method you can create a calculator in HTML, CSS, and JavaScript. If you found any type of problem in understanding any line of HTML, CSS JavaScript then you can click here for understanding all the tags and properties of HTML and CSS.
If you like this design then must like it and follow us.
Thanks for reading this article.
