Imperial to Metric conversion
Length Conversion
| Imperial(ft) | >>> | Metric(m) |
| <<< |
Area Conversion
| Imperial(ft2) | >>> | Metric(m2) |
| <<< |
Volumn Conversion
| Imperial(ft3) | >>> | Metric(m3) |
| <<< |
Volumn Conversion
| Imperial gallon | >>> | Liters |
| <<< |
Length Conversion
| Yard | >>> | Meters |
| <<< |
Length Conversion
| Mile | >>> | Km |
| <<< |
//javascript.js
$(document).ready(function () {
$("#length_I").change(function () {
var feet = $(this).val();
var meter = parseFloat(feet * 0.3048).toFixed(2);
$("#length_M").val(meter);
});
$("#length_M").change(function () {
var metric = $(this).val();
var feet = parseFloat(metric * 3.2809).toFixed(2);
$("#length_I").val(feet);
});
$("#area_I").change(function () {
var feet = $(this).val();
var meter = Math.pow(parseFloat(feet * 0.3048),2).toFixed(2);
$("#area_M").val(meter);
});
$("#area_M").change(function () {
var metric = $(this).val();
var feet = Math.pow(parseFloat(metric * 3.2809),2).toFixed(2);
$("#area_I").val(feet);
});
$("#volumn_I").change(function () {
var feet = $(this).val();
var meter = Math.pow(parseFloat(feet * 0.3048), 3).toFixed(2);
$("#volumn_M").val(meter);
});
$("#volumn_M").change(function () {
var metric = $(this).val();
var feet = Math.pow(parseFloat(metric * 3.2809), 3).toFixed(2);
$("#volumn_I").val(feet);
});
$("#gallon").change(function () {
var feet = $(this).val();
var meter = parseFloat(feet * 4.546).toFixed(2);
$("#liters").val(meter);
});
$("#liters").change(function () {
var metric = $(this).val();
var feet = parseFloat(metric * 0.22).toFixed(2);
$("#gallon").val(feet);
});
$("#yard").change(function () {
var feet = $(this).val();
var meter = parseFloat(feet * 0.9144).toFixed(2);
$("#meter").val(meter);
});
$("#meter").change(function () {
var metric = $(this).val();
var feet = parseFloat(metric * 1.0936).toFixed(2);
$("#yard").val(feet);
});
$("#mile").change(function () {
var feet = $(this).val();
var meter = parseFloat(feet * 1.6093).toFixed(2);
$("#km").val(meter);
});
$("#km").change(function () {
var metric = $(this).val();
var feet = parseFloat(metric * 0.6214).toFixed(2);
$("#mile").val(feet);
});
});
---------------------------------------------------------------------------------
//default.html
<!DOCTYPE html>
<html>
<head>
<title>assignment final</title>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
<div class="title">
<h1>Imperial to Metric conversion</h1>
<hr />
</div>
<div class="col-md-4">
<h3>Length Conversion</h3>
<table>
<thead>
<tr>
<td>Imperial(ft)</td>
<td>>>></td>
<td>Metric(m)</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" id="length_I" class="form-control"/>
</td>
<td><<<</td>
<td>
<input type="number" id="length_M" class="form-control"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Area Conversion</h3>
<table>
<thead>
<tr>
<td>Imperial(ft<sup>2</sup>)</td>
<td>>>></td>
<td>Metric(m<sup>2</sup>)</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" id="area_I" class="form-control" />
</td>
<td><<<</td>
<td>
<input type="number" id="area_M" class="form-control" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Volumn Conversion</h3>
<table>
<thead>
<tr>
<td>Imperial(ft<sup>3</sup>)</td>
<td>>>></td>
<td>Metric(m<sup>3</sup>)</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" id="volumn_I" class="form-control" />
</td>
<td><<<</td>
<td>
<input type="number" id="volumn_M" class="form-control" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Volumn Conversion</h3>
<table>
<thead>
<tr>
<td>Imperial gallon</td>
<td>>>></td>
<td>Liters</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" id="gallon" class="form-control" />
</td>
<td><<<</td>
<td>
<input type="number" id="liters" class="form-control" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Length Conversion</h3>
<table>
<thead>
<tr>
<td>Yard</td>
<td>>>></td>
<td>Meters</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" id="yard" class="form-control" />
</td>
<td><<<</td>
<td>
<input type="number" id="meter" class="form-control" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Length Conversion</h3>
<table>
<thead>
<tr>
<td>Mile</td>
<td>>>></td>
<td>Km</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" id="mile" class="form-control" />
</td>
<td><<<</td>
<td>
<input type="number" id="km" class="form-control" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments:
Post a Comment