Made with AngularJS.
Created
April 1, 2019 01:32
-
-
Save CarterMcAlister/15600e68307824193f01fd2b71ff8475 to your computer and use it in GitHub Desktop.
Calculator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body ng-app='Calc' ng-controller='MainCtrl'> | |
| <div class="container"> | |
| <div class="calcBody"> | |
| <div class="resultPanel"> | |
| <p class="calcText">{{current}}</p> | |
| </div> | |
| <span ng-repeat="(key, value) in calcButtons"> | |
| <span ng-if="key % 4 == 0"><br></span> | |
| <button type="button" ng-class="{special: (key+1)%4==0}" class="btn" | |
| ng-click="buttonPress(value)">{{value}}</button> | |
| </span> | |
| </div> | |
| </div> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //todo: limit characters | |
| var app = angular.module('Calc', []); | |
| app.controller('MainCtrl', function($scope, $timeout) { | |
| $scope.current = ""; | |
| $scope.calcButtons = ["AC", ".", "%", "/", | |
| "7", "8", "9", "*", | |
| "4", "5", "6", "-", | |
| "1", "2", "3", "+", | |
| "0", "(", ")", "="] | |
| //functions | |
| function calculate(){ | |
| $scope.current=eval($scope.current); | |
| console.log($scope.current) | |
| } | |
| function clear(){ | |
| $scope.current = ""; | |
| } | |
| function isValid(str){ | |
| try{ | |
| eval(str+1); | |
| return true; | |
| } | |
| catch(err){ | |
| return false; | |
| } | |
| } | |
| $scope.buttonPress = function(str){ | |
| console.log(str); | |
| if(str == 'AC'){ | |
| clear(); | |
| }else if(str == '='){ | |
| calculate(); | |
| }else if (isValid($scope.current + str)){ | |
| $scope.current += str; | |
| } | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| { | |
| background:#6D6A75; | |
| font-family: 'Cabin', sans-serif; | |
| padding: 80px; | |
| } | |
| .special{ | |
| background-color:#A4303F !important; | |
| } | |
| .btn{ | |
| background-color:#EEE; | |
| border:none; | |
| color:black; | |
| font-size:30px; | |
| height:65px; | |
| padding: 15px 20px; | |
| margin: 1px -1px; | |
| width: 80px; | |
| } | |
| button:focus {outline:none;} | |
| .calcBody | |
| { | |
| background-color:#1C1F33; | |
| width: 323px; | |
| margin: 0 auto; | |
| box-shadow: 10px 10px 5px #322; | |
| overflow: hidden; | |
| } | |
| .calcText{ | |
| position: absolute; | |
| bottom: -45px; | |
| font-size:50px; | |
| right: 16px; | |
| color:white; | |
| } | |
| .resultPanel{ | |
| background-color:#1C1F33; | |
| border: 0px; | |
| min-height:80px; | |
| position: relative; | |
| border:0px 0px 0px 0px; | |
| margin:0px 0px -19px 0px; | |
| padding:0px 0px 0px 0px; | |
| } | |
| .rightButtons{ | |
| background-color:#000; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment