<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,600,300|Open+Sans+Condensed:300,700|Ubuntu+Mono:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">Calculator</p>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Ohm's Law</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container theme-showcase" role="main" ng-app ng-controller="OhmController">
<form name="ohm" class="form-horizontal" role="form">
<div class="form-group" ng-class="{'has-error': ohm.voltage.$invalid && ohm.voltage.$dirty}">
<label for="voltage" class="col-sm-2 control-label">Voltage</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" ng-model="voltage.enable" ng-disabled="enough(voltage.enable)">
</span>
<input name="voltage" type="text" class="form-control text-right" ng-pattern="numeric" ng-model="voltage.value" ng-disabled="!voltage.enable" ng-change="calculate()">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{voltage.prefix}}V <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li ng-repeat="unit in units"><a href="#" ng-click="setUnit(voltage, unit)">{{unit.symbol}}V</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error': ohm.current.$invalid && ohm.current.$dirty}">
<label for="current" class="col-sm-2 control-label">Current</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" ng-model="current.enable" ng-disabled="enough(current.enable)">
</span>
<input name="current" type="text" class="form-control text-right" ng-pattern="numeric" ng-model="current.value" ng-disabled="!current.enable" ng-change="calculate()">
<div class="input-group-btn">
<button type="button" name="current" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{current.prefix}}A <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li ng-repeat="unit in units"><a href="#" ng-click="setUnit(current, unit)">{{unit.symbol}}A</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error': ohm.resistance.$invalid && ohm.resistance.$dirty}">
<label for="resistance" class="col-sm-2 control-label">Resistance</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" ng-model="resistance.enable" ng-disabled="enough(resistance.enable)">
</span>
<input name="resistance" type="text" class="form-control text-right" ng-pattern="positiveNumeric" ng-model="resistance.value" ng-disabled="!resistance.enable" ng-change="calculate()">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{resistance.prefix}}Ω <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li ng-repeat="unit in units"><a href="#" ng-click="setUnit(resistance, unit)">{{unit.symbol}}Ω</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error': ohm.power.$invalid && ohm.power.$dirty}">
<label for="power" class="col-sm-2 control-label">Power</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" ng-model="power.enable" ng-disabled="enough(power.enable)">
</span>
<input name="power" type="text" class="form-control text-right" ng-pattern="positiveNumeric" ng-model="power.value" ng-disabled="!power.enable" ng-change="calculate()">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="text">{{power.prefix}}W</span> <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li ng-repeat="unit in units"><a href="#" ng-click="setUnit(power, unit)">{{unit.symbol}}W</a></li>
</ul>
</div>
</div>
</div>
</form>
<input type="button" ng-click="reset()" value="Reset" class="btn btn-lg"/>
</div> <!-- /container -->
<div id="footer">
<hr/>
<div class="container">
<p class="text-muted">© Roberto Lo Giacco</p>
</div>
</div>
</body>
</html>
function OhmController($scope) {
$scope.numeric = /^\-?\d*(?:\.\d+)?$/;
$scope.positiveNumeric = /^\d*(?:\.\d+)?$/;
$scope.calculate = function() {
$scope.errorMessage = null;
if ($scope.current.enable && $scope.voltage.enable) {
// R = V / I
$scope.resistance.value = $scope.voltage.value / $scope.current.value * Math.pow(10, $scope.voltage.power - $scope.current.power - $scope.resistance.power);
// P = I * V
$scope.power.value = $scope.current.value * $scope.voltage.value * Math.pow(10, $scope.current.power + $scope.voltage.power - $scope.power.power);
} else if ($scope.current.enable && $scope.resistance.enable) {
// V = I * R
$scope.voltage.value = $scope.current.value * $scope.resistance.value * Math.pow(10, $scope.current.power + $scope.resistance.power - $scope.voltage.power);
// P = I^2 * R
$scope.power.value = Math.pow($scope.current.value, 2) * $scope.resistance.value * Math.pow(10, ($scope.current.power * 2) + $scope.resistance.power - $scope.power.power);
} else if ($scope.power.enable && $scope.voltage.enable) {
// I = P / V
$scope.current.value = $scope.power.value / $scope.voltage.value * Math.pow(10, $scope.power.power - $scope.voltage.power - $scope.current.power);
// R = V / I
$scope.resistance.value = $scope.voltage.value / $scope.current.value * Math.pow(10, $scope.voltage.power - $scope.current.power - $scope.resistance.power);
} else if ($scope.power.enable && $scope.resistance.enable) {
// V = I * R
$scope.voltage.value = $scope.current.value * $scope.resistance.value * Math.pow(10, $scope.current.power + $scope.resistance.power - $scope.voltage.power);
// I = (P / R)^1/2
$scope.current.value = Math.sqrt($scope.power.value / $scope.resistance.value) * Math.pow(10, $scope.power.power - $scope.resistance.power - ($scope.current.power * 2));
} else if ($scope.voltage.enable && $scope.resistance.enable) {
// I = V / R
$scope.current.value = $scope.voltage.value / $scope.resistance.value * Math.pow(10, $scope.voltage.power - $scope.resistance.power - $scope.current.power);
// P = V^2 / R
$scope.power.value = Math.pow($scope.voltage.value, 2) / $scope.resistance.value * Math.pow(10, ($scope.voltage.power * 2) - $scope.resistance.power - $scope.power.power);
} else if ($scope.current.enable && $scope.power.enable) {
// V = P / I
$scope.voltage.value = $scope.power.value / $scope.current.value * Math.pow(10, $scope.power.power - $scope.current.power - $scope.voltage.power);
// R = P / I^2
$scope.resistance.value = $scope.power.value / Math.pow($scope.current.value, 2) * Math.pow(10, $scope.power.power - ($scope.current.power * 2) - $scope.resistance.power);
} else {
$scope.errorMessage = "Cannot calculate!"
}
};
$scope.setUnit = function(factor, unit) {
factor.power = unit.power;
factor.prefix = unit.symbol;
$scope.calculate();
};
$scope.enough = function(enable) {
return !enable && ($scope.voltage.enable ? 1 : 0) + ($scope.current.enable ? 1 : 0) + ($scope.resistance.enable ? 1 : 0) + ($scope.power.enable ? 1 : 0) >= 2;
}
$scope.reset = function() {
$scope.voltage = { power: 0, prefix: "", value: "" };
$scope.current = { power: 0, prefix: "", value: "" };
$scope.resistance = { power: 0, prefix: "", value: "" };
$scope.power = { power: 0, prefix: "", value: "" };
$scope.errorMessage = null;
};
$scope.reset();
$scope.units = [
/*{ name: "yotta", symbol: 'Y', power: 24 },
{ name: "zetta", symbol: 'Z', power: 21 },
{ name: "exa", symbol: 'E', power: 18 },
{ name: "peta", symbol: 'P', power: 15 },
{ name: "tera", symbol: 'T', power: 12 },
{ name: "giga", symbol: 'G', power: 9 },*/
{ name: "mega", symbol: 'M', power: 6 },
{ name: "kilo", symbol: 'k', power: 3 },
{ name: "", symbol: ' ', power: 0 },
{ name: "milli", symbol: 'm', power: -3 },
{ name: "micro", symbol: 'ยต', power: -6 },
{ name: "nano", symbol: 'n', power: -9 },
{ name: "pico", symbol: 'P', power: -12 },
/*{ name: "femto", symbol: 'f', power: -15 },
{ name: "atto", symbol: 'a', power: -18 },
{ name: "zepto", symbol: 'z', power: -21 },
{ name: "yocto", symbol: 'y', power: -24 }*/
]
}
body {
font-family: 'Open Sans', serif;
padding-top: 70px;
padding-bottom: 30px;
}
.navbar {
font-family: 'Open Sans', sans-serif;
}
.navbar-brand {
font-family: 'Open Sans Condensed', sans-serif;
}
.navbar-nav {
font-weight: 700;
}
.jumbotron {
margin-top: -50px;
font-family: 'Open Sans Condensed', sans-serif;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}