You may get used to window calculator application and find it easy to access than actual calculator on your hand. But what if you have it right in your web application? Yes, it is going to be easier and quicker. In addition, it will make your web application more efficient as you can make the calculation result right in to your working algorithm. However, you will be shown the standard calculator and you can extend it to be more complex as you want. In this tutorial, you will find out how to make it works right in your web application just in minutes.

INSTRUCTION

HTML

<div align="center" class="calculator_box">
	<div align="center" style="width:400px;" class="calculator">
	  <div class="clearfix displayBox">
		<div style="position:absolute; height:0;">
			<button type="button" class="close bg-white pad10" data-dismiss="modal" aria-hidden="true">
				&times;
			</button>
		</div>
		<p class="displayText" id="display">0</p>
	  </div>
	  <div class="clearfix numberPad">
		<div class="col-xs-9">
		  <div class="row">
			<button class="btn clear hvr-back-pulse" id="clear">C</button>
			<button class="btn btn-calc hvr-radial-out" id="sqrt">√</button>
			<button class="btn btn-calc hvr-radial-out hvr-radial-out" id="square">x<sup>2</sup></button>
		  </div>
		  <div class="row">
			<button class="btn btn-calc hvr-radial-out" id="seven">7</button>
			<button class="btn btn-calc hvr-radial-out" id="eight">8</button>
			<button class="btn btn-calc hvr-radial-out" id="nine">9</button>
		  </div>
		  <div class="row">
			<button class="btn btn-calc hvr-radial-out" id="four">4</button>
			<button class="btn btn-calc hvr-radial-out" id="five">5</button>
			<button class="btn btn-calc hvr-radial-out" id="six">6</button>
		  </div>
		  <div class="row">
			<button class="btn btn-calc hvr-radial-out" id="one">1</button>
			<button class="btn btn-calc hvr-radial-out" id="two">2</button>
			<button class="btn btn-calc hvr-radial-out" id="three">3</button>
		  </div>
		  <div class="row">
			<button class="btn btn-calc hvr-radial-out" id="plus_minus">&#177;</button>
			<button class="btn btn-calc hvr-radial-out" id="zero">0</button>
			<button class="btn btn-calc hvr-radial-out" id="decimal">.</button>
		  </div>
		</div>
		<div class="col-xs-3 operationSide">
		  <button id="divide" class="btn btn-operation hvr-fade">÷</button>
		  <button id="multiply" class="btn btn-operation hvr-fade">×</button>
		  <button id="subtract" class="btn btn-operation hvr-fade">−</button>
		  <button id="add" class="btn btn-operation hvr-fade">+</button>
		  <button id="equals" class="btn btn-operation equals hvr-back-pulse">=</button>
		</div>
	  </div>
	</div>
</div>

This is the calculator buttons. Each button has its ID and CLASS to represent its value and function. You cannot change any of this otherwise it will not work properly as it is specifically defined in the css and js file.

Style Sheet

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://learnweb.top/cdn/calculator/creative.min.css">

You need only bootstrap 3 library which commonly already included in your application and a custom calcuator style sheet which you can modify its look and effect by your own. If you like this standard look, you just embed this ready-to-use file in to your application.

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://learnweb.top/cdn/calculator/calculate.js"></script>

To make it works, you just need the jQuery library and a custom JavaScript  file which is ready to use. However, if you want to add more command on it, you can make your own modification on this standard script.

That is it! Now you can just copy and paste or just make a little changes to match your requirements and this standard script is working so fine. Hope it is helpful!

Similar Tutorials

Comments