Skip to content

Instantly share code, notes, and snippets.

@unamanic

unamanic/angular calls

Created December 15, 2015 06:26
Show Gist options
  • Save unamanic/539236432d31aab8a900 to your computer and use it in GitHub Desktop.
Save unamanic/539236432d31aab8a900 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
angular calls
<!DOCTYPE html>
<html lang="en" ng-app="calcApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
html, body {
color: #404040;
font-weight: 100;
}
.container {
width: 596px;
margin-top: 100px;
}
.text-area {
height: 70px;
}
.text {
font-size: 36px;
margin-right: 120px;
}
.btn {
width: 80px;
height: 50px;
margin-top: 5px;
font-family: sans-serif;
font-weight: 100;
}
.btn-ac {
width: 331px;
}
.operationLabel {
font-size: 36px;
width: 50px;
height: 50px;
color: cornflowerblue;
margin-left: 70px;
display: none;
}
.equation {
height: 30px;
font-size: 20px;
color: cornflowerblue;
}
</style>
</head>
<body ng-controller="calcCtrl">
<div class="container">
<div class="text-area">
<p class="text pull-right">{{equation}}</p>
</div>
<div class="text-area ">
<p class="text pull-right">{{answer}}</p>
<p class="operationLabel text-center">+</p>
<br/>
</div>
<div class='text-center button-groups'>
<div class="buttons">
<button type="button" class="btn-7 btn btn-default" ng-click="op('7')">7</button>
<button type="button" class="btn-8 btn btn-default" ng-click="op('8')">8</button>
<button type="button" class="btn-9 btn btn-default" ng-click="op('9')">9</button>
<button type="button" class="btn-divide btn btn-primary" ng-click="op('/')">÷</button>
</div>
<div class="buttons">
<button type="button" class="btn-4 btn btn-default" ng-click="op('4')">4</button>
<button type="button" class="btn-5 btn btn-default" ng-click="op('5')">5</button>
<button type="button" class="btn-6 btn btn-default" ng-click="op('6')">6</button>
<button type="button" class="btn-multiply btn btn-primary" ng-click="op('*')">x</button>
</div>
<div class="buttons">
<button type="button" class="btn-1 btn btn-default" ng-click="op('1')">1</button>
<button type="button" class="btn-2 btn btn-default" ng-click="op('2')">2</button>
<button type="button" class="btn-3 btn btn-default" ng-click="op('3')">3</button>
<button type="button" class="btn-subtract btn btn-primary" ng-click="op('-')">-</button>
</div>
<div class="buttons">
<button type="button" class="btn-0 btn btn-default" ng-click="op('0')">0</button>
<button type="button" class="btn-decimal btn btn-default" ng-click="op('.')">.</button>
<button type="button" class="btn-equals btn btn-success"></button>
<button type="button" class="btn-add btn btn-primary" ng-click="op('+')">+</button>
</div>
<div class="buttons">
<button type="button" class="btn-ac btn btn-info" ng-click="clear()">AC</button>
</div>
</div>
</div>
<script>
(function () {
angular.module("calcApp", [])
.controller("calcCtrl", function ($scope) {
$scope.equation = "";
$scope.answer = 0;
$scope.clear = function () {
$scope.equation = "";
$scope.answer = 0;
};
$scope.op = function (digit) {
$scope.equation += digit;
$scope.answer = eval($scope.equation);
};
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment