Traditional JS Approach:
index.html
Add a form with two fields:
Field named: T_C
- labeled Celsius
- default value "0"
Field named: T_F
- labeled Fahrenheit
- default value ""
JSHeader:
function c2f( cT ) { return (9/5 * c) + 32 }
function f2c( fT ) { return 5/9 * ( f - 32) }
cT.oninput = function(e) {
fT.value = c2f( e.target.value )
}
fT.oninput = function(e) {
cT.value = f2c( e.target.value )
}
var cT;
var fT;
onLoad:
var cT = document.getElementById('T_C');
var fT = document.getElementById('T_F');
fT.value = c2f(cT.value);
Angular.js Approach:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="/js/angular.min.js"></script>
<script src="tempConvert.js"></script>
</head>
<body >
<div ng-app ng-init="fT=32;cT=0">
<div ng-controller="cfTempCtrl">
<input type="number" ng-model="cT"/>°C
<br/>
<input type="number" ng-model="fT"/>°F
</div>
tempConvert.js
function cfTempCtrl($scope) {
$scope.$watch('fT', function(value) {
$scope.cT = Math.round( (value - 32) * 5.0/9.0 );
});
$scope.$watch('cT', function(value) {
$scope.fT = Math.round( value * 9.0 / 5.0 + 32 );
});
}
previous page
|