Calculator
How do I make an calculator?
Calculator for FreeCodeCamp.. What is a calculator? How do you make a calculator? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.
Calculator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calculator</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,400'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="calculator" ng-app="CalculatorApplication" ng-controller="CalculatorController"> <input type="text" class="display" ng-model="display" readonly></input> <div class="buttons"> <div class="row"> <button class="button top" ng-click="clear()">AC</button> <button class="button top" ng-click="sign()"> <sup>+</sup>/<sub>−</sub> </button> <button class="button top" ng-click="percent()">%</button> <button class="button operator" ng-click="setOperator('/')">÷</button> </div> <div class="row"> <button class="button" ng-click="number(7)">7</button> <button class="button" ng-click="number(8)">8</button> <button class="button" ng-click="number(9)">9</button> <button class="button operator" ng-click="setOperator('*')">×</button> </div> <div class="row"> <button class="button" ng-click="number(4)">4</button> <button class="button" ng-click="number(5)">5</button> <button class="button" ng-click="number(6)">6</button> <button class="button operator" ng-click="setOperator('-')">−</button> </div> <div class="row"> <button class="button" ng-click="number(1)">1</button> <button class="button" ng-click="number(2)">2</button> <button class="button" ng-click="number(3)">3</button> <button class="button operator" ng-click="setOperator('+')">+</button> </div> <div class="row"> <button class="button double" ng-click="number(0)">0</button> <button class="button decimal" ng-click="number('.')">.</button> <button class="button operator equal" ng-click="setOperator('=')">=</button> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Calculator - Script Codes CSS Codes
/* Background image */
body { background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/retina_wood.png');
}
/* Chrome blue outline */
button:focus { outline: 0;
}
/* Common properties */
.calulator,
.display,
.button { cursor: pointer;
}
.display,
.button { font-family: 'Roboto', Helvetica, sans-serif; font-weight: 100; border: 0;
}
/* Main div */
.calculator { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 316px; width: 228px; background: #000000;
}
/* Display calculation */
.display { box-sizing: border-box; display: block; width: inherit; margin-top: 28px; padding: 0 10px; background: #000000; color: #FFFFFF; font-size: 45px; text-align: right;
}
/* All buttons */
.button { height: 47px; width: 57px; float: left; padding: 2px 0 3px 0; background: #E0E0E0; font-size: 22px;
}
.button:active { background: #BABABA;
}
/* Top row - Clear, sign, percentage */
.top { background: #D6D6D6;
}
.top:active { background: #B0B0B0;
}
/* Right column - All operators */
.operator { background: #FF8C00; color: #FFFFFF; font-size: 28px;
}
.operator:active { background: #B36200;
}
/* Decimal was too small */
.decimal { font-weight: 400;
}
/* Adding border radius */
.calculator { border-radius: 6px;
}
.equal { border-bottom-right-radius: 6px;
}
.double { width: 114px; border-bottom-left-radius: 6px;
}
Calculator - Script Codes JS Codes
var app = angular.module('CalculatorApplication', []);
app.controller('CalculatorController', ['$scope', function($scope) { var previousNum = 0; var previousOp = false; $scope.clear = function() { $scope.display = '0'; $scope.operator = false; previousNum = '0'; previousOp = false; } $scope.sign = function() { $scope.display = parseFloat($scope.display) * -1; } $scope.percent = function() { $scope.display = parseFloat($scope.display) / 100; } $scope.setOperator = function(operation) { var current = parseFloat($scope.display); var previous = parseFloat(previousNum); if (previousOp === '/') { current = previous / current; } else if (previousOp === '*') { current *= previous; } else if (previousOp === '-') { current = previous - current; } else if (previousOp === '+') { current += previous; } previousNum = current; $scope.display = current; $scope.operator = operation; previousOp = false; } $scope.number = function(num) { if ($scope.operator) { previousNum = $scope.display; $scope.display = ''; previousOp = $scope.operator; $scope.operator = false; } if (num === '.' && $scope.display.indexOf('.') !== -1) { return; } if ($scope.display === '0') { $scope.display = ''; } $scope.display += num; } $scope.clear();
}]);
Developer | Thomas Vaeth |
Username | thomasvaeth |
Uploaded | September 24, 2022 |
Rating | 3 |
Size | 2,959 Kb |
Views | 36,432 |
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!
Name | Size |
Button Draw on Hover Mixin | 58,405 Kb |
Full Viewport Z-Index Scroll | 3,020 Kb |
Flexbox Flex-Grow Mast | 2,773 Kb |
Instafetch.js Example | 3,245 Kb |
Flexbox Sticky Navigation | 135,492 Kb |
Button Offset Mixin | 2,746 Kb |
SVG Mouse Animation | 2,542 Kb |
Flexbox Grid Animation | 4,299 Kb |
Pomodoro Clock | 3,136 Kb |
Button Split Mixin | 2,543 Kb |
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!
Name | Username | Size |
SlideupBoxes | Gavra | 23,772 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Flip test | Madhes | 1,635 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Tooltip in table | Roine | 3,713 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
Under construction | GhostRider | 1,642 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!