In: Computer Science
Problem: Design a web page to provide a metric conversion guide for college students. Provide the capability to convert the following (both ways):
Miles to kilometers (distance)
Gallons to liters (volume)
Pounds to kilograms (weight)
Fahrenheit to Celsius (temperature)
must have a separate PHP and HTML page
HTML Source code for converting Miles to Kilometers
<html>
<head><title>Miles to Kilometers</title>
<script language="javascript">
var textMiles;
var textKm;
var KILOMETERS_TO_MILES = 0.621371;
var MILES_TO_KM = 1.60934;
function initElements() {
if (!textMiles) { // Intitialization of the elements
textMiles = document.getElementById("text-miles");
textKm = document.getElementById("text-km");
}
}
function calMilesFromKilometers() {
initElements();
var km = parseFloat(txtKm.value);
txtMiles.value = String(km * MILES_TO_KM);//Formula to calculate the conversion rate of the KM into miles
}
function calcKilometersFromMiles() {
initElements();
var miles = parseFloat(txtMiles.value);
txtKm.value = String(miles * KM_TO_MILES);//formula to calculate KM_to_Miles
}
</script>
</head>
<body>
<body>
<b>Miles To Kilometers Converter</b> <br>
<br>
<table border="0" cellpadding="5" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td> </td>
<td><b>Miles</b> </td>
<td> </td>
<td><b>Kilometers</b> </td>
</tr>
<tr>
<td>miles: </td>
<td><input id="txt-miles" size="20" type="text" value="50"/> </td>
<td>km: </td>
<td><input id="txt-km" size="20" type="text" value=""/> </td>
</tr>
<tr>
<td> </td>
<td> <button type="button" onclick="calcMilesFromKilometers();">Calculate Miles</button> </td>
<td> </td>
<td> <button type="button" onclick="calcKilometersFromMiles();">Calculate Kilometers</button> </td>
</tr>
</table>
</body>
</html>
The above HTML Program would help the user to write a script and execute the script in the HTML Program.
__________________________________________________________________
2.Gallons to Litres
<html>
<head> <script language="Java script">
$(function () { // set values var toGallons = 0.26417;
var toMetric = 3.7854;
var converted = 0;
$('input[name="data"]').change(function () { // convert the value to convert(); });
$('input[name="convert"]').change(function () { // change radip to convert convert(); });
function convert() { var theValue = $('input[name="data"]').val(); //value of original
var selected = $("input[type='radio'][name='convert']:checked").val(); //determine if Metric or Imperial if (selected === 'i') { //If imperial converted = "The Imperial Value of " + theValue + " = the metric value of " + theValue * toMetric; } else {//If metric converted = "The Metric Value of " + theValue + " = the Imperial value of " + theValue * toGallons; } $('#newData').html(converted); //Place new data in div id newData } }); </script>
<title>Gallons to litres conversion</title>
</head>
<body> <input type="radio" name="convert" value="m">
Metric <input type="radio" name="convert" value="i" checked>
Imperial <div>Data<br><input name="data" value="0">
</div>
<div>Converted</div><div id="newData"></div>
</body>
</html>
___________________________________________________________________
3. HTML Program to convert pounds to kilogram
<html>
<head>
<script language="java
script">
function weightConverter(valNum) {
{
document.getElementById("outputGrams").innerHTML=valNum/0.0022046;
}
</script>
</head>
<body>
<p>
<label>Pounds</label>
<input id="inputPounds" type="number"
placeholder="Pounds" oninput="weightConverter(this.value)"onchange="weightConverter(this.value)">
</p>
<p>Grams: <span
id="outputGrams"></span></p>
</body>
</html>
________________________________________________________________________
We need to use the Math.round() method for the conversion
HTML Program to convert fareign heit
to celsius
<html>
<body>
<h1>JavaScript Fahrenheit to Celsius</h1>//heading
<p>Insert a number into one of the input fields below:</p>
<p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>
<p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>
<script>
function convert(degree) {
var x;
if (degree == "C") {
x = document.getElementById("c").value * 5 / 9 - 32;
document.getElementById("f").value = Math.round(x);
} else {
x = (document.getElementById("f").value +32) * 9 /5;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>
___________________________________________________________________________
The above method can help the user to enter the values and
conversion formulas in script language.