Angular Calc
How do I make an angular calc?
What is a angular calc? How do you make a angular calc? This script and codes were developed by Alexius M Wronka I I on 19 September 2022, Monday.
Angular Calc - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular Calc</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="App">
<div class="calcBox" ng-controller="CalcCtrl"> <div class="number-line"><div id="fitin" class='title left'><div>{{title}}</div></div></div> <div class="title"><span>Easy Calc</span></div> <div class='operations-box'> <div class="calc-row"> <div class="calc-button"ng-click='addValue(7)'><text>7</text></div> <div class="calc-button"ng-click='addValue(8)'><text>8</text></div> <div class="calc-button"ng-click='addValue(9)'><text>9</text></div> <div class="calc-button"ng-click='makeOperation["*"](title)'><text>x</text></div> </div> <div class="calc-row"> <div class="calc-button"ng-click='addValue(4)'><text>4</text></div> <div class="calc-button"ng-click='addValue(5)'><text>5</text></div> <div class="calc-button"ng-click='addValue(6)'><text>6</text></div> <div class="calc-button"ng-click='makeOperation["-"](title)'><text>-</text></div> </div> <div class="calc-row"> <div class="calc-button"ng-click='addValue(1)'><text>1</text></div> <div class="calc-button"ng-click='addValue(2)'><text>2</text></div> <div class="calc-button"ng-click='addValue(3)'><text>3</text></div> <div class="calc-button"ng-click='makeOperation["+"](title)'><text>+</text></div> </div> <div class="calc-row"> <div class="calc-button"ng-click='addValue(".")'><text>.</text></div> <div class="calc-button"ng-click='addValue(0)'><text>0</text></div> <div class="calc-button"ng-click='makeOperation["/"](title)'><text>/</text></div> <div class="calc-button"ng-click='equalFunc(title)'><text>=</text></div> </div> <div class="calc-row"> <div class="calc-button clear" ng-click='clear()'><text>CLEAR</text></div> </div> </div> </div> </div> <div class="title"><span>Wronka Co.</span></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Angular Calc - Script Codes CSS Codes
.calcBox { margin-top: 60px; position: relative; margin-right: auto; margin-left: auto; width: 400px; border-radius: 25px; height: 400px; border: 3px solid darkgrey; padding: 10px; background-color: lightgrey; box-shadow: -4px 4px 3px black;
}
.calcBox .title { /* display:inline-block;*/ overflow-x: scroll; margin-top: 2%; margin-left: 5%; margin-bottom: -30px; font-family: Verdana; color: grey; font-weight: bold;
}
.calcBox .number-line { margin-top: 20px; position: relative; margin-right: auto; border-top: 2px solid gray; border-bottom: 2px solid #E0E0E0; margin-left: auto; border-radius: 5px; width: 90%; height: 40px; background-color: white;
}
.calcBox .operations-box { display: flex; /* flex-direction:row;*/ margin-top: 10%; margin-bottom: 10%; margin-right: auto; margin-left: auto; float: left; flex-direction: column; width: 100%; /* flex-wrap: wrap;*/
}
.calcBox .operations-box .calc-row { display: flex; flex-direction: row;
}
.calcBox .operations-box .calc-row .calc-button { border-radius: 10px; text-align: center; margin: 8px auto; padding: 10px; width: 20%; height: 20%; background-color: #B0C4DE; border-bottom: 2px solid skyblue; box-shadow: -.5px .5px 1px black;
}
.calcBox .operations-box .calc-row .calc-button text { font-family: Verdana; color: darkblue; font-weight: bold;
}
.calcBox .operations-box .calc-row .calc-button:active { background-color: lightblue; border-bottom: 2px solid #B0C4DE;
}
.calcBox .operations-box .calc-row .calc-button:active text { color: white;
}
.calcBox .operations-box .calc-row .clear { width: 60%;
}
.left { text-align: right; margin-right: 5%; font-size: 25px;
}
Angular Calc - Script Codes JS Codes
app = angular.module("App", []);
app.controller('CalcCtrl', function ($scope) { $scope.title = "0"; var currOperand = null; var temp = null; var total = null; $scope.storVal = 0; $scope.equalFunc = null; var eqCheck = false; var eqPush = false; //add numerical values to the title $scope.addValue= function(num){ if($scope.title.indexOf('.')>0&&num==="."&&eqCheck===false){ $scope.title +=""; } else if(eqCheck===true){ $scope.title=num+"" eqCheck = false; } else if($scope.title==="0"&&eqCheck===false&&num!=="."){ if(total ===null){total=num+""} $scope.title=num+""; } else if(eqCheck===false){ if(total ===null){total=num+""} $scope.title+= num } } //store title value on operation click and assign operation to equals button $scope.makeOperation = { "+": function (x){ if(eqPush){ $scope.title = (Number(total)+temp)+""; } eqCheck = true; temp = Number(x); currOperand = null; eqPush= true; $scope.equalFunc = function(y){ eqPush = false; if(currOperand===null){ currOperand=Number(y) $scope.title = Number(x) + currOperand; } else{ $scope.title = (Number($scope.title)+currOperand)+""; } } }, "-": function (x){ eqCheck = true; currOperand = null; $scope.equalFunc = function(y){ eqPush = false; if(currOperand===null){ currOperand=Number(y) $scope.title = Number(x) - currOperand; } else{ $scope.title = (Number($scope.title)-currOperand)+""; } } }, "/": function (x){ eqCheck = true; currOperand = null; $scope.equalFunc = function(y){ eqPush = false; if(currOperand===null){ currOperand=Number(y) $scope.title = Number(x) / currOperand; } else{ $scope.title = (Number($scope.title)/currOperand)+""; } } }, "*": function (x){ eqCheck = true; currOperand = null; $scope.equalFunc = function(y){ eqPush = false; if(currOperand===null){ currOperand=Number(y) $scope.title = Number(x) * currOperand; } else{ $scope.title = (Number($scope.title)*currOperand)+""; } } } } //clear the calculator and memory $scope.clear= function(){ console.log("works") $scope.title ="0"; $scope.currVal=0; $scope.storVal=0; $scope.equalFunc = null; currOperand = null; total = null; }
});
Developer | Alexius M Wronka I I |
Username | awronka |
Uploaded | September 19, 2022 |
Rating | 3 |
Size | 3,707 Kb |
Views | 40,480 |
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 |
React Calc | 6,046 Kb |
Transition button | 4,112 Kb |
A Pen by Alexius M Wronka I I | 2,375 Kb |
Animated Drop Down | 3,066 Kb |
React Test | 1,232 Kb |
Guage | 3,480 Kb |
List React | 3,155 Kb |
D3 Dot Graph | 4,139 Kb |
Angular 2 forms | 1,244 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 |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Starfield using KineticJS | Asp | 3,512 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Starfield old school style | Bolloxim | 5,214 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!