AngularJS Calculator

An Arc Flash Calculator made with Angular.js

by Steven Senkus

HTML

<div id="gpWrap" ng-app='gpApp'>
            <div ng-controller="MainCtrl">
                <div id="gpHeader"><h2>Arc Flash<br/><span style="color: #da8a41; font-weight: normal; font-size: 24px;">Calculator</span></h2></div>
                <div id="gpContent">
                    <div ng-show="inputVisible">
                        <h3>Input</h3>
                        <div>
                            <label>Device Rating</label>
                            <select>
                                <option ng-repeat="rating in ratings">{{rating}}A</option>
                            </select>
                            <br />
                            <label>System Voltage</label>
                            <select>
                                <option ng-repeat="volt in volts">{{volt}}V</option>
                            </select>
                            <br />
                            <label>Arc Gap</label>
                            <select>
                                <option ng-repeat="gap in gaps">{{sdf</option>
                            </select>
                        </div>
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        <button id="gpSolve" ng-click="inputVisible = false">Solve</button>
                        <button id="gpReset" ng-click="">Reset</button>
                        <button id="gpHelp" ng-click="">Help</button>
                    </div>
                    <div ng-hide="inputVisible">
                        <h3>Output</h3>
                        <p>outputs outputs outputs outputs outputs outputs outputs outputs </p>
                        <button ng-click="inputVisible = true">Reset</button>
                    </div>
                </div>
                <div id="gpPromo"><p>Powered By Graphic...

CSS

#gpWrap {
                font-family: Helvetica, Arial, sans-serif;
                border: 4px ridge #000;
                margin: 10px 20px;
                width: 250px;
                padding: 0;
                text-align: center;
            }   
            
            #gpWrap h3, #gpWrap p {
                margin: 0;
                
            }

            #gpHeader {
                background-color: #63645f;
                color: #fff;
                margin: 0;
                width: inherit;
            }
            
            #gpHeader h2 {
                margin: 0;
                font-size: 36px;
                line-height: 28px;
                padding: 5px 0 0;
            }
            
            #gpContent {
                margin: 0;
                width: inherit;
                background-color: #bcbcc4;
                color: #48484a;
                padding: 10px;
                border: 2px solid #f60;
                border-left: none;
                border-right: none;
            }
            
            #gpSolve, #gpReset, #gpHelp {border: 2px solid #666; border-radius: 5px;}
            #gpSolve {background-color: #222; color: #f60; width:100px;}
            #gpReset {background-color: #222; color: #fff;}
            #gpHelp  {background-color: #f00; color: #fff;}

            
            #gpAddToSite   {}
            
            #gpPromo {
                margin: 0;
                background-color: #63645f;  
                color: #dd0;
            }

JavaScript

var app = angular.module( 'gpApp', [] );    

app.controller( 'MainCtrl', function( $scope ) {
    
    $scope.title = 'Arc Flash Calculator';
    $scope.inputVisible = true;
    $scope.addToSiteVisible = false;
    $scope.skinType = 1;
    
    $scope.ratings  = [30, 60, 100, 200, 400, 600, 800, 1200, 1600, 2000];
    $scope.volts    = [208, 240, 480, 600];
    
    $scope.lgibfs   = {
		'1:0.00000' : '1KA', 
		'2:0.30103' : '2KA',
		'3:0.60206' : '4KA',
		'4:0.77816' : '6KA',
		'5:0.90310' : '8KA',
		'6:1.00000' : '10KA',
		'7:1.17611' : '15KA',
		'8:1.30103' : '20KA',
		'9:1.39795' : "25KA",
		'10:1.47713': '30KA',
		'11:1.54407': '35KA',
		'12:1.60206': '40KA',
		'13:1.65322': '45KA',
		'14:1.69898': '50KA',
		'15:1.77816': '60KA',
		'16:1.84510': '70KA',
		'17:1.90309': '80KA',
		'18:1.95425': '90KA',
		'19:2.00000': '100KA',
		'20:2.02531': '106KA'
	};
    
    
    
});