Calculator

Developer
Andy McFee
Size
7,374 Kb
Views
48,576
  1. Calculator Previews
  2. Calculator HTML Codes
  3. Calculator CSS Codes
  4. Calculator JS Codes

How do I make an calculator?

An HTML/CSS/JS calculator. Featuring SCSS and CoffeeScript.This was mostly just an exercise for me to start learning CoffeeScript. Any feedback on ways to improve would be greatly appreciated.. What is a calculator? How do you make a calculator? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.

Calculator Previews
IQ Test

Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calculator</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="calculator"> <div class="input-prepend"> <span class="prepend" id="currentOperator"></span> <input class="value" disabled="disabled" id="value" value="0" type="number" ng-model="calcScreen" /> </div> <div class="keypad"> <span data-num="1" class="btn">1</span> <span data-num="2" class="btn">2</span> <span data-num="3" class="btn">3</span> <span data-operator="&plus;" class="btn btn-function">&plus;</span> <span data-num="4" class="btn">4</span> <span data-num="5" class="btn">5</span> <span data-num="6" class="btn">6</span> <span data-operator="&minus;" class="btn btn-function">&minus;</span> <span data-num="7" class="btn">7</span> <span data-num="8" class="btn">8</span> <span data-num="9" class="btn">9</span> <span data-operator="&times;" class="btn btn-function">&times;</span> <span id="clear" class="btn btn-function">c</span> <span data-num="0" class="btn">0</span> <span id="neg" class="btn btn-function">-</span> <span data-operator="&divide;" class="btn btn-function">&divide;</span> <span data-equals="=" class="btn btn-block">=</span> </div>
</div>
<div class="debug"> <div>Key: <span id="key"></span></div> <div>Current: <span id="current"></span></div> <div>Previous: <span id="previous"></span></div> <div>Operator: <span id="operator"></span></div> <div>newInput: <span id="newInput"></span></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calculator - Script Codes CSS Codes

html { height: 100%;
}
body { height: 100%; width: 100%; background-color: #827d86; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF0483A3', endColorstr='#FF002733'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjODI3ZDg2Ii8+PHN0b3Agb2Zmc2V0PSIzOSUiIHN0b3AtY29sb3I9IiM1YzU4NWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NzQ0NDkiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -moz-radial-gradient(top, circle cover, #827d86 0%, #5c585f 39%, #474449 100%); background-image: -webkit-radial-gradient(top, circle cover, #827d86 0%, #5c585f 39%, #474449 100%); background-image: radial-gradient(circle cover at top, #827d86 0%, #5c585f 39%, #474449 100%); position: relative; font-size: 20px; line-height: 20px; background-attachment: fixed;
}
a { text-decoration: underline;
}
.calculator { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background-color: #cdc6c0; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEBE4DE', endColorstr='#FFAFA8A2'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZTRkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FmYThhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ebe4de), color-stop(100%, #afa8a2)); background-image: -moz-linear-gradient(top, #ebe4de, #afa8a2); background-image: -webkit-linear-gradient(top, #ebe4de, #afa8a2); background-image: linear-gradient(to bottom, #ebe4de, #afa8a2); -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -moz-transform: rotate3d(76%, 1, 1, 45deg); -webkit-transform: rotate3d(76%, 1, 1, 45deg); transform: rotate3d(76%, 1, 1, 45deg); overflow: hidden; width: 256px; height: 370px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-top: -185px; margin-left: -128px; -moz-box-shadow: 0 10px 40px rgba(30, 25, 34, 0.8), 0 10px 5px -5px white inset, 0 -10px 5px -8px #87807a inset, 0 0 8px -1px #050000 inset; -webkit-box-shadow: 0 10px 40px rgba(30, 25, 34, 0.8), 0 10px 5px -5px white inset, 0 -10px 5px -8px #87807a inset, 0 0 8px -1px #050000 inset; box-shadow: 0 10px 40px rgba(30, 25, 34, 0.8), 0 10px 5px -5px white inset, 0 -10px 5px -8px #87807a inset, 0 0 8px -1px #050000 inset;
}
.input-prepend { position: relative;
}
.input-prepend .prepend { position: absolute; top: 10px; left: 10px; color: #a59e98;
}
.value,
.value[disabled=disabled] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff8f2; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE1DAD4'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UxZGFkNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e1dad4)); background-image: -moz-linear-gradient(top, #ffffff, #e1dad4); background-image: -webkit-linear-gradient(top, #ffffff, #e1dad4); background-image: linear-gradient(to bottom, #ffffff, #e1dad4); -moz-box-shadow: 0 0 8px 0 rgba(125, 118, 112, 0.4) inset; -webkit-box-shadow: 0 0 8px 0 rgba(125, 118, 112, 0.4) inset; box-shadow: 0 0 8px 0 rgba(125, 118, 112, 0.4) inset; width: 100%; margin-bottom: 20px; height: 40px; padding: 5px 10px; text-align: right; border: 1px solid #afa8a2; color: #504b54;
}
.btn, .btn-block { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 2px black, 0 10px 5px -5px #fff8f2 inset, 0 -10px 5px -8px #7d7670 inset, 0 0 2px 0 rgba(5, 0, 0, 0.5) inset; -webkit-box-shadow: 0 0 2px black, 0 10px 5px -5px #fff8f2 inset, 0 -10px 5px -8px #7d7670 inset, 0 0 2px 0 rgba(5, 0, 0, 0.5) inset; box-shadow: 0 0 2px black, 0 10px 5px -5px #fff8f2 inset, 0 -10px 5px -8px #7d7670 inset, 0 0 2px 0 rgba(5, 0, 0, 0.5) inset; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: color 1s; -o-transition: color 1s; -webkit-transition: color 1s; transition: color 1s; background-color: #cdc6c0; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEBE4DE', endColorstr='#FFAFA8A2'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZTRkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FmYThhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ebe4de), color-stop(100%, #afa8a2)); background-image: -moz-linear-gradient(top, #ebe4de, #afa8a2); background-image: -webkit-linear-gradient(top, #ebe4de, #afa8a2); background-image: linear-gradient(to bottom, #ebe4de, #afa8a2); text-shadow: 1px 1px 0 #e1dad4; border: 1px solid #6c6055; color: #504b54; cursor: pointer; display: inline-block; float: left; font-size: 20px; font-weight: bold; height: 45px; line-height: 45px; margin: 0 6px 12px; padding: 0; text-align: center; width: 45px;
}
.btn:active, .btn-block:active { -moz-box-shadow: 0 0 2px black, 0 5px 5px -5px #fff8f2 inset, 0 -5px 5px -8px #7d7670 inset, 0 0 6px -1px rgba(5, 0, 0, 0.5) inset; -webkit-box-shadow: 0 0 2px black, 0 5px 5px -5px #fff8f2 inset, 0 -5px 5px -8px #7d7670 inset, 0 0 6px -1px rgba(5, 0, 0, 0.5) inset; box-shadow: 0 0 2px black, 0 5px 5px -5px #fff8f2 inset, 0 -5px 5px -8px #7d7670 inset, 0 0 6px -1px rgba(5, 0, 0, 0.5) inset;
}
.btn:nth-child(4n), .btn-block:nth-child(4n) { margin-right: 0;
}
.btn:nth-child(4n - 3), .btn-block:nth-child(4n - 3) { margin-left: 0;
}
.btn:hover, .btn-block:hover { background-color: #d7d0ca; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF5EEE8', endColorstr='#FFB9B2AC'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZWVlOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I5YjJhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5eee8), color-stop(100%, #b9b2ac)); background-image: -moz-linear-gradient(top, #f5eee8, #b9b2ac); background-image: -webkit-linear-gradient(top, #f5eee8, #b9b2ac); background-image: linear-gradient(to bottom, #f5eee8, #b9b2ac);
}
.btn-function { background-color: #b4ada7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD2CBC5', endColorstr='#FF968F89'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyY2JjNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk2OGY4OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d2cbc5), color-stop(100%, #968f89)); background-image: -moz-linear-gradient(top, #d2cbc5, #968f89); background-image: -webkit-linear-gradient(top, #d2cbc5, #968f89); background-image: linear-gradient(to bottom, #d2cbc5, #968f89); -moz-box-shadow: 0 0 2px black, 0 10px 5px -5px #ebe4de inset, 0 -10px 5px -8px #69625c inset, 0 0 2px 0 rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 0 2px black, 0 10px 5px -5px #ebe4de inset, 0 -10px 5px -8px #69625c inset, 0 0 2px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: 0 0 2px black, 0 10px 5px -5px #ebe4de inset, 0 -10px 5px -8px #69625c inset, 0 0 2px 0 rgba(0, 0, 0, 0.5) inset; line-height: 41px;
}
.btn-function:active { -moz-box-shadow: 0 0 2px black, 0 5px 5px -5px #ebe4de inset, 0 -5px 5px -8px #69625c inset, 0 0 6px -1px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 0 2px black, 0 5px 5px -5px #ebe4de inset, 0 -5px 5px -8px #69625c inset, 0 0 6px -1px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 0 2px black, 0 5px 5px -5px #ebe4de inset, 0 -5px 5px -8px #69625c inset, 0 0 6px -1px rgba(0, 0, 0, 0.5) inset;
}
.btn-function:hover { background-color: #beb7b1; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCD5CF', endColorstr='#FFA09993'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZDVjZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EwOTk5MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcd5cf), color-stop(100%, #a09993)); background-image: -moz-linear-gradient(top, #dcd5cf, #a09993); background-image: -webkit-linear-gradient(top, #dcd5cf, #a09993); background-image: linear-gradient(to bottom, #dcd5cf, #a09993);
}
.btn-block { width: 100%; margin: 0; color: #fff; text-shadow: 1px 1px 0 #c38100; background: #f5b330; -moz-box-shadow: 0 0 2px black, 0 10px 5px -5px #ffe562 inset, 0 -10px 5px -8px #a56300 inset, 0 0 2px 0 rgba(45, 0, 0, 0.5) inset; -webkit-box-shadow: 0 0 2px black, 0 10px 5px -5px #ffe562 inset, 0 -10px 5px -8px #a56300 inset, 0 0 2px 0 rgba(45, 0, 0, 0.5) inset; box-shadow: 0 0 2px black, 0 10px 5px -5px #ffe562 inset, 0 -10px 5px -8px #a56300 inset, 0 0 2px 0 rgba(45, 0, 0, 0.5) inset; background-color: #f5b330; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFD14E', endColorstr='#FFD79512'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDE0ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q3OTUxMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffd14e), color-stop(100%, #d79512)); background-image: -moz-linear-gradient(top, #ffd14e, #d79512); background-image: -webkit-linear-gradient(top, #ffd14e, #d79512); background-image: linear-gradient(to bottom, #ffd14e, #d79512);
}
.btn-block:active { -moz-box-shadow: 0 0 2px black, 0 5px 5px -5px #ffe562 inset, 0 -5px 5px -8px #a56300 inset, 0 0 6px -1px rgba(45, 0, 0, 0.5) inset; -webkit-box-shadow: 0 0 2px black, 0 5px 5px -5px #ffe562 inset, 0 -5px 5px -8px #a56300 inset, 0 0 6px -1px rgba(45, 0, 0, 0.5) inset; box-shadow: 0 0 2px black, 0 5px 5px -5px #ffe562 inset, 0 -5px 5px -8px #a56300 inset, 0 0 6px -1px rgba(45, 0, 0, 0.5) inset;
}
.btn-block:hover { background-color: #fab835; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFD653', endColorstr='#FFDC9A17'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RjOWExNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffd653), color-stop(100%, #dc9a17)); background-image: -moz-linear-gradient(top, #ffd653, #dc9a17); background-image: -webkit-linear-gradient(top, #ffd653, #dc9a17); background-image: linear-gradient(to bottom, #ffd653, #dc9a17);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;
}
.debug { display: none; position: absolute; top: 10px; left: 10px;
}
.debug .red { color: red;
}

Calculator - Script Codes JS Codes

(function() { var curVal, keyVal, newInput, number, operator, prevVal, screen, showOperator; number = operator = prevVal = curVal = keyVal = null; screen = $('#value'); showOperator = $('#currentOperator'); newInput = true; $(function() { var calculate, debug, pushClear, pushEquals, pushNegative, pushNumber, pushOperator; calculate = function() { var saveCurVal; saveCurVal = curVal; switch (operator) { case "+": curVal = parseInt(prevVal, 10) + parseInt(curVal, 10); break; case "−": curVal = parseInt(prevVal, 10) - parseInt(curVal, 10); break; case "×": curVal = parseInt(prevVal, 10) * parseInt(curVal, 10); break; case "÷": curVal = parseInt(prevVal, 10) / parseInt(curVal, 10); } prevVal = saveCurVal; screen.val(curVal); return keyVal = null; }; debug = function() { $('#key').text(keyVal); $('#current').text(curVal); $('#previous').text(prevVal); $('#operator').text(operator); return $('#newInput').text(newInput); }; pushNumber = $('[data-num]').click(function() { keyVal = $(this).data('num'); if (newInput) { if (curVal) { prevVal = screen.val(); } screen.val(keyVal); newInput = false; } else { screen.val(screen.val() + keyVal); } curVal = screen.val(); return debug(); }); pushOperator = $('[data-operator]').click(function() { if (prevVal && !newInput) { calculate(); } newInput = true; operator = $(this).data('operator'); showOperator.text(operator); return debug(); }); pushEquals = $('[data-equals]').click(function() { calculate(); showOperator.empty(); return newInput = true; }); pushClear = $('#clear').click(function() { prevVal = curVal = operator = null; newInput = true; showOperator.empty(); return screen.val(0); }); return pushNegative = $('#neg').click(function() { curVal = 0 - parseInt(curVal, 10); return screen.val(curVal); }); });
}).call(this);
Calculator - Script Codes
Calculator - Script Codes
Home Page Home
Developer Andy McFee
Username andymcfee
Uploaded August 09, 2022
Rating 3.5
Size 7,374 Kb
Views 48,576
Do you need developer help for Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy McFee (andymcfee) Script Codes
Name
BEM Flexbox Nav build for a workshop
Single-page app layout with animating transitions
A Pen by Andy McFee
Responsive Boxes with CSS3 Columns
Responsive Boxes without Images
Flexbox Header Demo
Flip Card
Prototyping Grid
Whatsizeisthisscreen.com
CSS3 Border Image
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!