JavaScript is extremely helpful when you require information elucidation and control on the customer side. JQuery is a standout amongst the most prominent and valuable JavaScript libraries. Web designers adoration to utilize JQuery and we use the same.
In this blog, I will show how we can make an adding machine framework utilizing JQuery. This apparatus especially turns out to be exceptionally convenient for engineers who construct business or business level sites; where a little ascertaining instrument is frequently required as a sidebar gadget.
For making the UI, we execute the accompanying HTML and CSS code. The idea is basic. We make a HTML table with lines and segments to fit in the different adding machine digits, administrators and different choices.
The full HTML and CSS code can be found here.
Creating the Html for a calculator as follows.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="main_div">
<div id="">
<!-- clear button and output screen key -->
<div class="inner_div">
<span class="clear_button">C</span>
<div class="output_screen"></div>
</div>
<div class="calc_button">
<!-- number keys and keys for operation -->
<span>7</span>
<span>8</span>
<span>9</span>
<span class="calculation">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="calculation">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="calculation">/</span>
<span>0</span>
<span>.</span>
<span class="output_button">=</span>
<span class="calculation">x</span>
</div>
</div>
</div>
<script src="js/custom.js"></script>
</body>
</html>
The calculator is completely stylable by means of CSS. Include the accompanying CSS scrap into your CSS document and change the styles to fit your needs.
/* Basic CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* for font-style,font-wieght & font-style */
font: bold 14px Arial, sans-serif;
}
/* for the background gradient of calculator*/
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
/* css for the main div of the calculator*/
#main_div {
width: 325px;
height: auto;
margin: 0px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#F00B72, #77B900);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
.inner_div span.clear_button {
float: left;
}
.inner_div .output_screen {
height: 40px;
width: 212px;
float: right;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
/* Clearing the floats value */
.calc_button, .inner_div {overflow: hidden;}
/* Applying some css to the buttons of the calculator */
.calc_button span, .inner_div span.clear_button {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* for giving the trasitions to the clear button */
transition: all 0.2s ease;
}
/* Removing all the right margins from the keys that are used for operation */
.calc_button span.calculation {
background: #FFF0F5;
margin-right: 0;
}
.calc_button span.output_button {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}
.inner_div span.clear_button {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* css for giving some hovering effects*/
.calc_button span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
.calc_button span.output_button:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
}
.inner_div span.clear_button:hover {
background: #0FFFAB;
box-shadow: 0px 4px #d3545d;
color: white;
}
/* giving the effect on active key setting the box shadow to 0px and displaying the button little downward */
.calc_button span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}
.calc_button span.output_button:active {
box-shadow: 0px 0px #717a33;
top: 4px;
}
.inner_div span.clear_button:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}
Javascript code is defined below:
// storing all values to the particular variable
var keysvalue = document.querySelectorAll('#main_div span');
var operatorsused = ['+', '-', 'x', ''];
var decimalappend = false;
// defining the onclick event to the keys and performing the specific operations
for(var i = 0; i < keysvalue.length; i++) {
keysvalue[i].onclick = function(e) {
// Get the values of the input_button and the number button values
var input = document.querySelector('.output_screen');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;
// Now, just appending the key values (number button Value) to the input the the user enter and finally using the eval function to find the output
// code when the clear button key is pressed it erase everything fron the output screen
if(btnVal == 'C') {
input.innerHTML = '';
decimalappend = false;
}
// If output button key is pressed, it calculate whatever the user wants to calculate and displaying the result to the user
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
equation = equation.replace(/x/g, '*').replace(//g, '/');
// In this code we basically check if there is any dot or any question mark if it is there then we remove it
if(operatorsused.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if(equation)
input.innerHTML = eval(equation);
decimalappend = false;
}
// indexOf functionality works only in InternetExplorer9+
else if(operatorsused.indexOf(btnVal) > -1) {
// when Operator button is clicked
// Getting the last character from the equation that the user entered
var lastChar = inputVal[inputVal.length - 1];
// finding the input is not empty and there must not be any operator at the last
if(inputVal != '' && operatorsused.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
// Allowing the minus sign if the string is empty
else if(inputVal == '' && btnVal == '-')
input.innerHTML += btnVal;
// Replacing the last operator (if previously exists) with the newly pressed operator by the user
if(operatorsused.indexOf(lastChar) > -1 && inputVal.length > 1) {
// Here the dot opertaor matches any character while $ symbol here denotes that this is the end of the string
input.innerHTML = inputVal.replace(/.$/, btnVal);
}
decimalappend =false;
}
//dealing with the decimal problem
else if(btnVal == '.') {
if(!decimalappend) {
input.innerHTML += btnVal;
decimalappend = true;
}
}
//if any other key is pressed, then appending it
else {
input.innerHTML += btnVal;
}
// preventing the page jumps
e.preventDefault();
}
}
0 Comment(s)